| | @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap'); |
| |
|
| | :root { |
| | --bg: #050a0f; |
| | --surface: #0a1520; |
| | --surface2: #0d1c2e; |
| | --surface3: #071018; |
| | --border: rgba(0,212,255,0.12); |
| | --accent: #00d4ff; |
| | --accent2: #ff6b35; |
| | --green: #4eff91; |
| | --glow: rgba(0,212,255,0.25); |
| | --text: #e0f4ff; |
| | --muted: #4a7a99; |
| | --danger: #ff4466; |
| | --warn: #ffaa00; |
| | --purple: #a855f7; |
| | --gold: #ffd600; |
| | --sidebar-w: 240px; |
| | --topbar-h: 52px; |
| | } |
| |
|
| | * { margin:0; padding:0; box-sizing:border-box; } |
| |
|
| | body { |
| | background: var(--bg); |
| | color: var(--text); |
| | font-family: 'Rajdhani', sans-serif; |
| | height: 100vh; |
| | overflow: hidden; |
| | } |
| |
|
| | ::-webkit-scrollbar { width: 4px; } |
| | ::-webkit-scrollbar-track { background: transparent; } |
| | ::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 2px; } |
| |
|
| | |
| | #banned-screen { |
| | position: fixed; inset:0; z-index:9999; |
| | display: none; align-items:center; justify-content:center; |
| | background: rgba(5,0,5,0.98); flex-direction:column; gap:16px; |
| | text-align:center; |
| | } |
| | .banned-icon { font-size:4rem; } |
| | .banned-title { font-family:'Orbitron',monospace; font-size:1.5rem; color:var(--danger); font-weight:900; } |
| | .banned-sub { color:var(--muted); font-size:0.9rem; letter-spacing:.1em; } |
| |
|
| | |
| | #auth-screen { |
| | position: fixed; inset:0; z-index:1000; |
| | display: flex; align-items:center; justify-content:center; |
| | background: var(--bg); |
| | } |
| | #auth-screen::before { |
| | content:''; position:absolute; inset:0; |
| | background-image: linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px), linear-gradient(90deg,rgba(0,212,255,0.04) 1px,transparent 1px); |
| | background-size:60px 60px; |
| | animation: gridMove 20s linear infinite; |
| | } |
| | @keyframes gridMove { to { transform:translateY(60px); } } |
| |
|
| | .auth-box { |
| | position:relative; z-index:1; |
| | background: linear-gradient(135deg, rgba(10,21,32,0.98), rgba(5,10,15,0.99)); |
| | border: 1px solid rgba(0,212,255,0.2); |
| | padding: 44px 40px; |
| | width:100%; max-width:440px; |
| | clip-path: polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px)); |
| | animation: boxIn 0.5s ease-out; |
| | } |
| | @keyframes boxIn { from { opacity:0; transform:translateY(30px) scale(0.97); } } |
| |
|
| | .auth-logo { font-family:'Orbitron',monospace; font-size:2rem; font-weight:900; color:var(--accent); text-shadow:0 0 30px var(--glow); margin-bottom:4px; text-align:center; } |
| | .auth-logo span { color:var(--accent2); } |
| | .auth-tagline { text-align:center; color:var(--muted); font-size:0.75rem; letter-spacing:.3em; text-transform:uppercase; margin-bottom:30px; } |
| |
|
| | .auth-tabs { display:flex; margin-bottom:24px; border-bottom:1px solid var(--border); } |
| | .auth-tab { flex:1; padding:10px; background:none; border:none; color:var(--muted); cursor:pointer; font-family:'Orbitron',monospace; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; transition:color .2s; border-bottom:2px solid transparent; margin-bottom:-1px; } |
| | .auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); } |
| |
|
| | .auth-field { margin-bottom:14px; } |
| | .auth-field label { display:block; font-size:.72rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; } |
| | .auth-field input { |
| | width:100%; padding:11px 15px; |
| | background:rgba(0,0,0,0.4); |
| | border:1px solid var(--border); |
| | color:var(--text); font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:600; |
| | outline:none; transition:border-color .2s,box-shadow .2s; |
| | clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); |
| | } |
| | .auth-field input:focus { border-color:rgba(0,212,255,0.5); box-shadow:0 0 20px rgba(0,212,255,0.1); } |
| |
|
| | .captcha-box { |
| | background:rgba(0,0,0,0.4); border:1px solid rgba(0,212,255,0.15); |
| | padding:12px 14px; margin-bottom:14px; |
| | display:flex; align-items:center; gap:12px; |
| | clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); |
| | } |
| | .captcha-question { font-family:'Orbitron',monospace; font-size:1rem; font-weight:700; color:var(--accent); flex:1; } |
| | .captcha-input { width:70px; padding:8px 10px; background:rgba(0,0,0,0.5); border:1px solid var(--border); color:var(--text); font-family:'Orbitron',monospace; font-size:0.95rem; font-weight:700; outline:none; text-align:center; } |
| | .captcha-input:focus { border-color:rgba(0,212,255,0.5); } |
| | .captcha-refresh { background:none; border:none; cursor:pointer; color:var(--muted); font-size:1.1rem; transition:color .2s; padding:4px; } |
| | .captcha-refresh:hover { color:var(--accent); } |
| |
|
| | .auth-btn { width:100%; padding:13px; background:var(--accent); border:none; color:var(--bg); cursor:pointer; font-family:'Orbitron',monospace; font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%); transition:all .2s; margin-top:6px; } |
| | .auth-btn:hover { background:#33ddff; transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,212,255,0.3); } |
| | .auth-error { color:var(--danger); font-size:.85rem; text-align:center; margin-top:10px; min-height:20px; letter-spacing:.05em; } |
| |
|
| | |
| | #app { display:none; height:100vh; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:var(--topbar-h) 1fr; } |
| | #app.visible { display:grid; } |
| |
|
| | |
| | .topbar { |
| | grid-column: 1 / -1; |
| | background:rgba(5,10,15,0.98); border-bottom:1px solid var(--border); |
| | display:flex; align-items:center; padding:0 16px; gap:12px; |
| | backdrop-filter:blur(10px); position:relative; z-index:100; |
| | } |
| | .topbar-logo { font-family:'Orbitron',monospace; font-size:1rem; font-weight:900; color:var(--accent); text-shadow:0 0 15px var(--glow); text-decoration:none; white-space:nowrap; } |
| | .topbar-logo span { color:var(--accent2); } |
| | .topbar-sep { width:1px; height:24px; background:var(--border); } |
| | .topbar-channel { flex:1; font-family:'Orbitron',monospace; font-size:.7rem; color:var(--muted); letter-spacing:.12em; } |
| | .topbar-channel span { color:var(--accent); } |
| | .topbar-actions { display:flex; align-items:center; gap:8px; } |
| | .topbar-user { display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; } |
| | .user-avatar-sm { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Orbitron',monospace; font-size:.7rem; font-weight:900; border:1px solid var(--accent); color:var(--accent); background:rgba(0,212,255,0.08); flex-shrink:0; cursor:pointer; } |
| | .topbar-role-badge { font-size:.85rem; } |
| | .icon-btn { background:none; border:1px solid var(--border); color:var(--muted); padding:5px 10px; cursor:pointer; font-size:.85rem; transition:all .2s; clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); } |
| | .icon-btn:hover { color:var(--accent); border-color:rgba(0,212,255,0.4); } |
| | .logout-btn { background:none; border:1px solid rgba(255,68,102,0.3); color:var(--danger); padding:5px 10px; cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:.8rem; letter-spacing:.1em; transition:all .2s; clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); } |
| | .logout-btn:hover { background:rgba(255,68,102,0.1); border-color:var(--danger); } |
| |
|
| | |
| | .sidebar { background:var(--surface3); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; } |
| | .sidebar-scroll { flex:1; overflow-y:auto; padding-bottom:12px; } |
| |
|
| | .sidebar-section { padding:14px 14px 5px; font-family:'Orbitron',monospace; font-size:.56rem; letter-spacing:.3em; color:var(--muted); text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; } |
| | .sidebar-section button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem; line-height:1; padding:0 2px; transition:color .2s; } |
| | .sidebar-section button:hover { color:var(--accent); } |
| |
|
| | .channel-category { padding:10px 14px 4px; font-family:'Orbitron',monospace; font-size:.52rem; letter-spacing:.25em; color:rgba(74,122,153,0.6); text-transform:uppercase; } |
| |
|
| | .channel-item { display:flex; align-items:center; gap:7px; padding:6px 14px; cursor:pointer; transition:background .15s,color .15s; font-size:.88rem; font-weight:600; color:var(--muted); position:relative; user-select:none; } |
| | .channel-item:hover { background:rgba(0,212,255,0.05); color:var(--text); } |
| | .channel-item.active { background:rgba(0,212,255,0.08); color:var(--accent); border-left:2px solid var(--accent); } |
| | .channel-icon { font-size:.82rem; opacity:.7; } |
| | .channel-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } |
| | .unread-badge { background:var(--accent2); color:#fff; font-size:.6rem; font-weight:700; padding:1px 5px; border-radius:10px; font-family:'Orbitron',monospace; flex-shrink:0; } |
| | .ch-locked { opacity:.4; cursor:default; } |
| | .ch-locked:hover { background:none; color:var(--muted); } |
| |
|
| | .voice-channel { display:flex; align-items:center; gap:7px; padding:6px 14px; cursor:pointer; transition:background .15s; font-size:.88rem; font-weight:600; color:var(--muted); flex-direction:column; align-items:flex-start; } |
| | .voice-ch-header { display:flex; align-items:center; gap:7px; width:100%; } |
| | .voice-ch-header:hover { color:var(--text); } |
| | .voice-ch-participants { padding-left:22px; display:flex; flex-direction:column; gap:2px; } |
| | .voice-participant { font-size:.78rem; color:var(--green); display:flex; align-items:center; gap:5px; } |
| | .voice-participant.muted { color:var(--muted); } |
| |
|
| | .sidebar-divider { height:1px; background:var(--border); margin:6px 14px; } |
| |
|
| | |
| | .role-group-header { display:flex; align-items:center; gap:6px; padding:8px 14px 3px; font-family:'Orbitron',monospace; font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); cursor:pointer; } |
| | .role-group-header:hover { color:var(--text); } |
| |
|
| | .user-item { display:flex; align-items:center; gap:8px; padding:5px 14px; cursor:pointer; transition:background .15s; font-size:.86rem; font-weight:600; color:var(--muted); } |
| | .user-item:hover { background:rgba(0,212,255,0.05); color:var(--text); } |
| | .user-item.me { cursor:default; } |
| | .user-item.me:hover { background:none; } |
| | .user-item.offline { opacity:.5; } |
| |
|
| | .online-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 5px var(--green); flex-shrink:0; } |
| | .offline-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex-shrink:0; } |
| | .away-dot { width:7px; height:7px; border-radius:50%; background:var(--warn); flex-shrink:0; } |
| |
|
| | |
| | .chat-area { display:flex; flex-direction:column; background:var(--bg); overflow:hidden; } |
| | .chat-header { padding:10px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; background:rgba(5,10,15,0.85); } |
| | .chat-header-info { flex:1; } |
| | .chat-header-title { font-family:'Orbitron',monospace; font-size:.85rem; font-weight:700; color:var(--text); } |
| | .chat-header-sub { font-size:.76rem; color:var(--muted); letter-spacing:.05em; } |
| | .chat-header-actions { display:flex; gap:6px; } |
| |
|
| | .messages { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:1px; } |
| |
|
| | .day-divider { display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--muted); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-family:'Orbitron',monospace; } |
| | .day-divider::before, .day-divider::after { content:''; flex:1; height:1px; background:var(--border); } |
| |
|
| | .msg { display:flex; gap:10px; padding:3px 8px 3px; border-radius:2px; transition:background .15s; animation:msgIn .2s ease-out; } |
| | @keyframes msgIn { from { opacity:0; transform:translateY(5px); } } |
| | .msg:hover { background:rgba(255,255,255,0.02); } |
| | .msg.consecutive { padding-top:0; } |
| | .msg.consecutive .msg-avatar { opacity:0; pointer-events:none; } |
| | .msg.consecutive .msg-header { display:none; } |
| |
|
| | .msg-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Orbitron',monospace; font-size:.7rem; font-weight:900; flex-shrink:0; margin-top:2px; border:1px solid rgba(0,212,255,0.2); background:rgba(0,212,255,0.06); color:var(--accent); cursor:pointer; } |
| | .msg-content { flex:1; min-width:0; } |
| | .msg-header { display:flex; align-items:baseline; gap:8px; margin-bottom:2px; flex-wrap:wrap; } |
| | .msg-name { font-family:'Orbitron',monospace; font-size:.7rem; font-weight:700; color:var(--accent); cursor:pointer; } |
| | .msg-name:hover { text-decoration:underline; } |
| | .msg-role-badge { font-size:.72rem; } |
| | .msg-time { font-size:.65rem; color:var(--muted); letter-spacing:.05em; } |
| | .msg-translated { font-size:.72rem; color:var(--muted); font-style:italic; margin-top:2px; border-left:2px solid rgba(0,212,255,0.2); padding-left:6px; } |
| | .msg-text { font-size:.96rem; line-height:1.5; color:var(--text); word-break:break-word; font-weight:400; } |
| | .msg-text a { color:var(--accent); text-decoration:none; } |
| | .msg-text a:hover { text-decoration:underline; } |
| | .msg-actions { display:none; gap:4px; margin-left:auto; } |
| | .msg:hover .msg-actions { display:flex; } |
| | .msg-action-btn { background:none; border:1px solid var(--border); color:var(--muted); padding:2px 7px; cursor:pointer; font-size:.7rem; border-radius:2px; transition:all .15s; } |
| | .msg-action-btn:hover { color:var(--accent); border-color:rgba(0,212,255,0.4); } |
| | .msg-action-btn.danger:hover { color:var(--danger); border-color:rgba(255,68,102,0.4); } |
| |
|
| | .msg-system { padding:5px 8px; font-size:.76rem; color:var(--muted); font-style:italic; letter-spacing:.04em; text-align:center; } |
| | .msg-automod { padding:5px 8px; font-size:.76rem; color:var(--warn); letter-spacing:.04em; text-align:center; border:1px solid rgba(255,170,0,0.15); background:rgba(255,170,0,0.04); margin:4px 0; border-radius:2px; } |
| |
|
| | .pinned-banner { background:rgba(0,212,255,0.06); border:1px solid rgba(0,212,255,0.15); padding:8px 14px; font-size:.82rem; color:var(--muted); display:flex; gap:8px; align-items:center; } |
| | .pinned-banner span { color:var(--accent); font-weight:700; } |
| |
|
| | .timeout-bar { padding:10px 20px; background:rgba(255,170,0,0.08); border-top:1px solid rgba(255,170,0,0.2); color:var(--warn); font-family:'Orbitron',monospace; font-size:.64rem; text-align:center; } |
| |
|
| | .input-area { padding:12px 20px; border-top:1px solid var(--border); background:rgba(5,10,15,0.8); display:flex; gap:8px; align-items:flex-end; } |
| | .msg-input { flex:1; background:rgba(0,0,0,0.5); border:1px solid var(--border); color:var(--text); padding:10px 14px; font-family:'Rajdhani',sans-serif; font-size:.97rem; font-weight:500; outline:none; resize:none; min-height:42px; max-height:120px; transition:border-color .2s,box-shadow .2s; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); line-height:1.4; } |
| | .msg-input:focus { border-color:rgba(0,212,255,0.4); box-shadow:0 0 20px rgba(0,212,255,0.08); } |
| | .msg-input::placeholder { color:var(--muted); } |
| | .msg-input:disabled { opacity:.4; cursor:not-allowed; } |
| | .send-btn { padding:10px 16px; background:var(--accent); border:none; color:var(--bg); cursor:pointer; font-family:'Orbitron',monospace; font-size:.65rem; font-weight:700; letter-spacing:.15em; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); transition:all .2s; flex-shrink:0; height:42px; } |
| | .send-btn:hover { background:#33ddff; transform:translateY(-1px); } |
| | .send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; } |
| |
|
| | .empty-chat { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); text-align:center; gap:10px; } |
| | .empty-chat-icon { font-size:2.5rem; opacity:.3; } |
| | .empty-chat p { font-family:'Orbitron',monospace; font-size:.64rem; letter-spacing:.1em; } |
| |
|
| | |
| | .voice-panel { display:none; flex-direction:column; border-top:1px solid var(--border); background:var(--surface3); } |
| | .voice-panel.active { display:flex; } |
| | .voice-status-bar { padding:8px 14px; display:flex; align-items:center; gap:8px; font-size:.8rem; } |
| | .voice-active-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; flex-shrink:0; } |
| | @keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} } |
| | .voice-name { flex:1; font-family:'Orbitron',monospace; font-size:.65rem; color:var(--green); } |
| | .voice-controls { display:flex; gap:4px; } |
| | .voice-ctrl { background:none; border:1px solid var(--border); color:var(--muted); padding:4px 8px; cursor:pointer; font-size:.75rem; transition:all .15s; clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%); } |
| | .voice-ctrl:hover { color:var(--accent); border-color:rgba(0,212,255,0.4); } |
| | .voice-ctrl.active { color:var(--danger); border-color:rgba(255,68,102,0.4); } |
| |
|
| | |
| | .ticket-item { padding:8px 14px; border-left:2px solid var(--border); margin:4px 0; transition:border-color .2s; cursor:pointer; } |
| | .ticket-item:hover { border-left-color:var(--accent); background:rgba(0,212,255,0.03); } |
| | .ticket-item.open { border-left-color:var(--green); } |
| | .ticket-item.closed { border-left-color:var(--muted); opacity:.6; } |
| | .ticket-meta { font-size:.7rem; color:var(--muted); font-family:'Orbitron',monospace; } |
| | .ticket-title { font-size:.88rem; font-weight:600; color:var(--text); } |
| |
|
| | |
| | #context-menu { position:fixed; z-index:5000; background:rgba(10,21,32,0.98); border:1px solid rgba(0,212,255,0.2); padding:6px 0; min-width:190px; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); animation:ctxIn .15s ease-out; box-shadow:0 8px 40px rgba(0,0,0,0.5); } |
| | @keyframes ctxIn { from { opacity:0; transform:scale(0.95); } } |
| | .ctx-header { padding:8px 14px 6px; font-family:'Orbitron',monospace; font-size:.63rem; color:var(--accent); letter-spacing:.2em; border-bottom:1px solid var(--border); margin-bottom:4px; } |
| | .ctx-item { padding:8px 14px; cursor:pointer; font-size:.88rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; transition:background .1s; } |
| | .ctx-item:hover { background:rgba(0,212,255,0.08); } |
| | .ctx-item.danger { color:var(--danger); } |
| | .ctx-item.danger:hover { background:rgba(255,68,102,0.08); } |
| | .ctx-item.warn { color:var(--warn); } |
| | .ctx-item.warn:hover { background:rgba(255,170,0,0.08); } |
| | .ctx-item.success { color:var(--green); } |
| | .ctx-item.success:hover { background:rgba(78,255,145,0.08); } |
| | .ctx-divider { height:1px; background:var(--border); margin:4px 0; } |
| |
|
| | |
| | .modal-overlay { position:fixed; inset:0; z-index:6000; background:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); animation:fadeIn .2s ease-out; } |
| | @keyframes fadeIn { from { opacity:0; } } |
| | .modal { background:linear-gradient(135deg,rgba(10,21,32,0.99),rgba(5,10,15,0.99)); border:1px solid rgba(0,212,255,0.2); padding:30px 28px; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px)); animation:boxIn .3s ease-out; } |
| | .modal.wide { max-width:600px; } |
| | .modal-title { font-family:'Orbitron',monospace; font-size:.95rem; font-weight:700; color:var(--accent); margin-bottom:5px; } |
| | .modal-sub { font-size:.84rem; color:var(--muted); margin-bottom:20px; } |
| | .modal-field { margin-bottom:13px; } |
| | .modal-field label { display:block; font-size:.7rem; letter-spacing:.15em; color:var(--muted); text-transform:uppercase; margin-bottom:5px; } |
| | .modal-field input, .modal-field select, .modal-field textarea { width:100%; padding:10px 13px; background:rgba(0,0,0,0.5); border:1px solid var(--border); color:var(--text); font-family:'Rajdhani',sans-serif; font-size:.94rem; font-weight:600; outline:none; transition:border-color .2s; clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%); } |
| | .modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus { border-color:rgba(0,212,255,0.5); } |
| | .modal-field select option { background:#0a1520; } |
| | .modal-field textarea { resize:vertical; min-height:80px; } |
| | .modal-field .hint { font-size:.72rem; color:var(--muted); margin-top:4px; } |
| | .modal-tabs { display:flex; margin-bottom:20px; border-bottom:1px solid var(--border); } |
| | .modal-tab { flex:1; padding:8px; background:none; border:none; color:var(--muted); cursor:pointer; font-family:'Orbitron',monospace; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; transition:color .2s; border-bottom:2px solid transparent; margin-bottom:-1px; } |
| | .modal-tab.active { color:var(--accent); border-bottom-color:var(--accent); } |
| | .modal-btns { display:flex; gap:8px; margin-top:18px; } |
| | .modal-btn { flex:1; padding:11px; border:none; cursor:pointer; font-family:'Orbitron',monospace; font-size:.65rem; font-weight:700; letter-spacing:.15em; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); transition:all .2s; } |
| | .modal-btn.primary { background:var(--accent); color:var(--bg); } |
| | .modal-btn.primary:hover { background:#33ddff; } |
| | .modal-btn.secondary { background:transparent; color:var(--muted); border:1px solid var(--border); } |
| | .modal-btn.secondary:hover { color:var(--text); border-color:rgba(0,212,255,0.3); } |
| | .modal-btn.danger-btn { background:var(--danger); color:#fff; } |
| | .modal-btn.danger-btn:hover { background:#ff6680; } |
| | .modal-btn.warn-btn { background:var(--warn); color:#000; } |
| | .modal-btn.warn-btn:hover { background:#ffcc44; } |
| | .modal-btn.success-btn { background:var(--green); color:#000; } |
| | .modal-btn.success-btn:hover { background:#7fffb2; } |
| | .captcha-modal-question { font-family:'Orbitron',monospace; font-size:2rem; font-weight:900; color:var(--accent); text-align:center; letter-spacing:.1em; margin:16px 0; text-shadow:0 0 20px var(--glow); } |
| |
|
| | |
| | .settings-section { margin-bottom:20px; } |
| | .settings-section h4 { font-family:'Orbitron',monospace; font-size:.65rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid var(--border); } |
| | .toggle-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(0,212,255,0.06); } |
| | .toggle-row label { font-size:.88rem; color:var(--text); } |
| | .toggle { width:40px; height:20px; background:rgba(0,0,0,0.5); border:1px solid var(--border); border-radius:10px; cursor:pointer; position:relative; transition:background .2s; } |
| | .toggle.on { background:rgba(0,212,255,0.3); border-color:rgba(0,212,255,0.5); } |
| | .toggle::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:all .2s; } |
| | .toggle.on::after { left:22px; background:var(--accent); } |
| |
|
| | |
| | .tag { display:inline-flex; align-items:center; gap:5px; background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.2); color:var(--accent); padding:3px 10px; border-radius:2px; font-size:.78rem; margin:3px 2px; } |
| | .tag-remove { background:none; border:none; color:var(--muted); cursor:pointer; font-size:.9rem; line-height:1; padding:0 1px; } |
| | .tag-remove:hover { color:var(--danger); } |
| | .tag-input { background:rgba(0,0,0,0.4); border:1px solid var(--border); color:var(--text); padding:5px 10px; font-family:'Rajdhani',sans-serif; font-size:.88rem; outline:none; margin-top:6px; } |
| | .tag-input:focus { border-color:rgba(0,212,255,0.4); } |
| |
|
| | |
| | .toast { position:fixed; bottom:20px; right:20px; background:rgba(10,21,32,0.98); border:1px solid var(--accent); color:var(--accent); padding:10px 16px; font-family:'Orbitron',monospace; font-size:.65rem; letter-spacing:.12em; z-index:9999; animation:toastIn .3s ease-out; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); max-width:300px; } |
| | @keyframes toastIn { from { opacity:0; transform:translateY(20px); } } |
| |
|
| | |
| | .av-color-0 { border-color:rgba(0,212,255,0.3)!important; color:#00d4ff!important; background:rgba(0,212,255,0.06)!important; } |
| | .av-color-1 { border-color:rgba(255,107,53,0.3)!important; color:#ff6b35!important; background:rgba(255,107,53,0.06)!important; } |
| | .av-color-2 { border-color:rgba(168,85,247,0.3)!important; color:#a855f7!important; background:rgba(168,85,247,0.06)!important; } |
| | .av-color-3 { border-color:rgba(78,255,145,0.3)!important; color:#4eff91!important; background:rgba(78,255,145,0.06)!important; } |
| | .av-color-4 { border-color:rgba(255,214,0,0.3)!important; color:#ffd600!important; background:rgba(255,214,0,0.06)!important; } |
| | .name-color-0 { color:#00d4ff!important; } |
| | .name-color-1 { color:#ff6b35!important; } |
| | .name-color-2 { color:#a855f7!important; } |
| | .name-color-3 { color:#4eff91!important; } |
| | .name-color-4 { color:#ffd600!important; } |
| |
|
| | |
| | .ticket-badge { background:var(--purple); color:#fff; font-size:.6rem; font-weight:700; padding:1px 5px; border-radius:10px; font-family:'Orbitron',monospace; } |
| |
|
| | |
| | .messages::-webkit-scrollbar { width:3px; } |
| | .sidebar-scroll::-webkit-scrollbar { width:3px; } |
| |
|
| | |
| | @media (max-width:768px) { |
| | :root { --sidebar-w: 260px; --topbar-h: 50px; } |
| |
|
| | |
| | #app.visible { |
| | display: flex; |
| | flex-direction: column; |
| | height: 100dvh; |
| | overflow: hidden; |
| | } |
| |
|
| | |
| | .topbar { |
| | order: 0; |
| | padding: 0 10px; |
| | height: var(--topbar-h); |
| | flex-shrink: 0; |
| | gap: 8px; |
| | } |
| | .topbar-logo { font-size: .8rem; } |
| | .topbar-sep { display: none; } |
| | .topbar-channel { font-size: .6rem; flex: 1; text-align: center; } |
| | .topbar-role-badge, #topbar-username { display: none; } |
| | .logout-btn { font-size: .7rem; padding: 4px 7px; } |
| | .icon-btn { padding: 5px 7px; font-size: .8rem; } |
| | #topbar-avatar { width: 28px; height: 28px; font-size: .6rem; } |
| |
|
| | |
| | #mobile-menu-btn { |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | background: none; |
| | border: 1px solid var(--border); |
| | color: var(--muted); |
| | width: 34px; height: 34px; |
| | cursor: pointer; |
| | font-size: 1.2rem; |
| | flex-shrink: 0; |
| | clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); |
| | transition: color .2s, border-color .2s; |
| | } |
| | #mobile-menu-btn:hover { color: var(--accent); border-color: rgba(0,212,255,0.4); } |
| |
|
| | |
| | .sidebar { |
| | position: fixed; |
| | top: var(--topbar-h); |
| | left: 0; |
| | bottom: 0; |
| | width: var(--sidebar-w); |
| | z-index: 500; |
| | transform: translateX(-100%); |
| | transition: transform .28s cubic-bezier(.4,0,.2,1); |
| | flex-direction: column; |
| | display: flex; |
| | } |
| | .sidebar.open { |
| | transform: translateX(0); |
| | box-shadow: 6px 0 30px rgba(0,0,0,0.6); |
| | } |
| |
|
| | |
| | #sidebar-backdrop { |
| | position: fixed; |
| | inset: 0; |
| | top: var(--topbar-h); |
| | z-index: 499; |
| | background: rgba(0,0,0,0.55); |
| | backdrop-filter: blur(2px); |
| | } |
| | #sidebar-backdrop.visible { display: block !important; } |
| |
|
| | |
| | .chat-area { |
| | flex: 1; |
| | min-height: 0; |
| | display: flex; |
| | flex-direction: column; |
| | overflow: hidden; |
| | } |
| |
|
| | |
| | .chat-header { padding: 8px 12px; } |
| | .chat-header-title { font-size: .78rem; } |
| | .chat-header-sub { font-size: .68rem; } |
| |
|
| | |
| | .messages { |
| | flex: 1; |
| | min-height: 0; |
| | padding: 10px 10px 6px; |
| | overflow-y: auto; |
| | -webkit-overflow-scrolling: touch; |
| | } |
| |
|
| | |
| | .input-area { |
| | padding: 8px 10px; |
| | flex-shrink: 0; |
| | |
| | position: sticky; |
| | bottom: 0; |
| | } |
| | .msg-input { |
| | font-size: 1rem; |
| | padding: 9px 12px; |
| | min-height: 40px; |
| | } |
| | .send-btn { |
| | padding: 0 14px; |
| | height: 40px; |
| | font-size: .6rem; |
| | } |
| |
|
| | |
| | .msg { padding: 3px 4px; gap: 8px; } |
| | .msg-avatar { width: 30px; height: 30px; font-size: .62rem; } |
| | .msg-text { font-size: .92rem; } |
| | .msg-actions { display: none !important; } |
| |
|
| | |
| | .auth-box { |
| | padding: 30px 20px; |
| | margin: 12px; |
| | max-width: 100%; |
| | clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); |
| | } |
| | .auth-logo { font-size: 1.6rem; } |
| |
|
| | |
| | .modal { |
| | margin: 12px; |
| | padding: 22px 16px; |
| | max-width: calc(100% - 24px); |
| | max-height: 88vh; |
| | clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); |
| | } |
| |
|
| | |
| | .voice-panel.active { |
| | flex-shrink: 0; |
| | } |
| | .voice-status-bar { flex-wrap: wrap; gap: 6px; } |
| | .voice-ctrl { font-size: .68rem; padding: 4px 6px; } |
| |
|
| | |
| | .toast { |
| | bottom: 12px; |
| | right: 10px; |
| | left: 10px; |
| | max-width: 100%; |
| | font-size: .62rem; |
| | } |
| |
|
| | |
| | .timeout-bar { font-size: .58rem; padding: 8px 12px; } |
| |
|
| | |
| | #context-menu { |
| | min-width: 170px; |
| | |
| | max-width: calc(100vw - 20px); |
| | } |
| | } |
| |
|
| | |
| | .divider { height:1px; background:var(--border); margin:10px 0; } |
| | .txt-accent { color:var(--accent); } |
| | .txt-danger { color:var(--danger); } |
| | .txt-warn { color:var(--warn); } |
| | .txt-green { color:var(--green); } |
| | .txt-muted { color:var(--muted); } |
| | .fw700 { font-weight:700; } |
| | .mono { font-family:'Orbitron',monospace; font-size:.75rem; } |
| |
|
| | |
| | .ping-everyone { |
| | background: rgba(255, 170, 0, 0.2); |
| | color: var(--warn); |
| | padding: 1px 4px; |
| | border-radius: 3px; |
| | font-weight: 700; |
| | } |
| | .ping-user { |
| | background: rgba(0, 212, 255, 0.12); |
| | color: var(--accent); |
| | padding: 1px 4px; |
| | border-radius: 3px; |
| | font-weight: 600; |
| | } |
| | .ping-me { |
| | background: rgba(255, 170, 0, 0.25); |
| | color: var(--warn); |
| | font-weight: 700; |
| | } |
| |
|
| | |
| | .ticket-item { transition: border-color .2s; } |
| | .ticket-item.open { border-left: 3px solid var(--green) !important; } |
| | .ticket-item.closed { border-left: 3px solid var(--muted) !important; opacity: .75; } |
| |
|
| | |
| | .ticket-sidebar-btn { |
| | border: 1px solid rgba(168, 85, 247, 0.3) !important; |
| | background: rgba(168, 85, 247, 0.07) !important; |
| | color: var(--purple) !important; |
| | margin: 2px 6px !important; |
| | border-radius: 4px !important; |
| | } |
| | .ticket-sidebar-btn:hover { |
| | background: rgba(168, 85, 247, 0.15) !important; |
| | border-color: var(--purple) !important; |
| | } |
| | .ticket-sidebar-btn .channel-name { |
| | color: var(--purple) !important; |
| | font-weight: 700 !important; |
| | } |
