feat: profile avatar upload + share_conv_keys rpc + favicon + smtp tweaks
This commit is contained in:
@@ -0,0 +1,459 @@
|
||||
/* ================= BASE ================= */
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body, 'Inter', system-ui, sans-serif);
|
||||
background: var(--bg, #0e0e12);
|
||||
color: var(--fg, #eaeaea);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
|
||||
input, textarea { font-family: inherit; }
|
||||
|
||||
/* Variant switcher — top fixed */
|
||||
.variant-switcher {
|
||||
position: fixed;
|
||||
top: 12px; left: 50%; transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
display: flex; gap: 6px;
|
||||
padding: 6px;
|
||||
background: rgba(20,20,24,0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
|
||||
}
|
||||
.variant-switcher button {
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.6);
|
||||
border-radius: 9px;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
.variant-switcher button:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.variant-switcher button.active {
|
||||
color: #fff;
|
||||
background: rgba(255,255,255,0.12);
|
||||
}
|
||||
|
||||
.variant-container {
|
||||
padding-top: 72px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Variant wrapper */
|
||||
.variant {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
.variant.active { display: block; }
|
||||
|
||||
/* Device frame — desktop window */
|
||||
.app-window {
|
||||
width: min(1320px, 96vw);
|
||||
margin: 0 auto 60px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
|
||||
height: 820px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.window-bar {
|
||||
height: 38px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 14px;
|
||||
gap: 8px;
|
||||
}
|
||||
.window-bar .dots { display: flex; gap: 7px; }
|
||||
.window-bar .dot { width: 12px; height: 12px; border-radius: 50%; }
|
||||
.window-bar .title {
|
||||
flex: 1; text-align: center; font-size: 12px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
gap: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.nav-tab {
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.nav-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 4px 10px 4px 4px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.main-area {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Chat list */
|
||||
.chat-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-list-header {
|
||||
padding: 16px 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.chat-list-title { font-weight: 600; font-size: 14px; letter-spacing: 0.01em; }
|
||||
.chat-search {
|
||||
margin: 0 14px 10px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.chat-items { flex: 1; overflow-y: auto; padding: 4px 10px; }
|
||||
.chat-item {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 2px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.chat-item-body { flex: 1; min-width: 0; }
|
||||
.chat-item-name { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.chat-item-preview {
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.chat-item-time { font-size: 10px; opacity: 0.5; font-weight: 400; }
|
||||
.unread-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
margin-left: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Avatar */
|
||||
.avatar {
|
||||
width: 38px; height: 38px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
|
||||
.avatar.lg { width: 44px; height: 44px; font-size: 16px; }
|
||||
|
||||
.presence {
|
||||
position: absolute;
|
||||
bottom: -1px; right: -1px;
|
||||
width: 12px; height: 12px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bg, #0e0e12);
|
||||
}
|
||||
.presence.online { background: #22c55e; }
|
||||
.presence.idle { background: #f59e0b; }
|
||||
.presence.dnd { background: #ef4444; }
|
||||
.presence.offline { background: #71717a; }
|
||||
|
||||
/* Chat area */
|
||||
.chat-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
height: 64px;
|
||||
padding: 0 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chat-header-info { flex: 1; min-width: 0; }
|
||||
.chat-header-name { font-weight: 600; font-size: 15px; }
|
||||
.chat-header-status { font-size: 11px; opacity: 0.6; margin-top: 2px; }
|
||||
.chat-header-actions { display: flex; gap: 4px; }
|
||||
.icon-btn {
|
||||
width: 34px; height: 34px;
|
||||
border-radius: 9px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 26px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.message-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
.message-row.me { justify-content: flex-end; }
|
||||
.message-row.them { justify-content: flex-start; }
|
||||
.message-avatar-slot {
|
||||
width: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.message-row .message-group {
|
||||
margin-bottom: 0;
|
||||
min-width: 0;
|
||||
max-width: calc(100% - 40px);
|
||||
flex: 1 1 auto;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.message-row.me .message-group { align-items: flex-end; }
|
||||
|
||||
.message-row .bubble { max-width: 100%; width: fit-content; }
|
||||
.message-row.me .bubble { margin-left: auto; }
|
||||
|
||||
.message-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
|
||||
.message-group.me { align-items: flex-end; }
|
||||
.message-group.them { align-items: flex-start; }
|
||||
.message-sender {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
opacity: 0.7;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
max-width: 70%;
|
||||
min-width: 60px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 18px;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
.bubble .ts {
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reactions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.reaction {
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.reaction .count { font-weight: 600; opacity: 0.8; }
|
||||
|
||||
/* System events (calls etc) */
|
||||
.event-row { display: flex; justify-content: center; margin: 10px 0; }
|
||||
.event-pill {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.event-pill svg { width: 12px; height: 12px; }
|
||||
|
||||
/* Media preview */
|
||||
.media-preview {
|
||||
width: 240px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.media-preview .media-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgba(255,255,255,0.04),
|
||||
rgba(255,255,255,0.04) 10px,
|
||||
rgba(255,255,255,0.07) 10px,
|
||||
rgba(255,255,255,0.07) 20px
|
||||
);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 10px; font-family: 'JetBrains Mono', monospace; opacity: 0.5;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.media-preview .media-meta {
|
||||
padding: 10px 12px;
|
||||
font-size: 11px;
|
||||
display: flex; justify-content: space-between;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Composer */
|
||||
.composer {
|
||||
padding: 14px 20px 18px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.composer-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 4px 4px 12px;
|
||||
border-radius: 12px;
|
||||
min-height: 44px;
|
||||
}
|
||||
.composer-box input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-size: 14px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.composer-btn {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 9px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Incoming call overlay */
|
||||
.call-overlay {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 100px;
|
||||
width: 300px;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
||||
animation: slideInCall 0.4s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
@keyframes slideInCall {
|
||||
from { transform: translateX(120%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
.call-info { flex: 1; min-width: 0; }
|
||||
.call-name { font-weight: 600; font-size: 14px; }
|
||||
.call-sub { font-size: 11px; opacity: 0.7; margin-top: 2px; }
|
||||
.call-actions { display: flex; gap: 6px; }
|
||||
.call-btn {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
.call-btn.accept { background: #22c55e; }
|
||||
.call-btn.decline { background: #ef4444; }
|
||||
|
||||
/* Profile hover card */
|
||||
.profile-card {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
width: 280px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
|
||||
}
|
||||
.profile-card-banner { height: 64px; }
|
||||
.profile-card-body { padding: 14px; margin-top: -20px; position: relative; }
|
||||
.profile-card-avatar {
|
||||
width: 60px; height: 60px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid var(--bg);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
}
|
||||
.profile-card-name { font-weight: 700; font-size: 16px; margin-top: 10px; }
|
||||
.profile-card-handle { font-size: 12px; opacity: 0.6; }
|
||||
.profile-card-meta {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
font-size: 11px;
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
|
||||
@@ -0,0 +1,529 @@
|
||||
/* ============ CALL UI — Clean Rail matched ============ */
|
||||
|
||||
/* Discord-style call dock: call takes top portion, chat continues below */
|
||||
.call-dock {
|
||||
flex-shrink: 0;
|
||||
height: 50%;
|
||||
max-height: 420px;
|
||||
min-height: 280px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--bg-2);
|
||||
}
|
||||
.call-dock > .active-call {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.call-dock .call-topbar { padding: 8px 14px; }
|
||||
.call-dock .call-stage { padding: 10px; }
|
||||
.call-dock .grid { gap: 8px; }
|
||||
.call-dock .participant-tile { border-radius: 10px; }
|
||||
.call-dock .audio-ring .avatar.lg { width: 52px; height: 52px; font-size: 20px; }
|
||||
.call-dock .participant-meta { padding: 4px 8px; font-size: 11px; bottom: 6px; left: 6px; right: 6px; }
|
||||
.call-dock .participant-name { font-size: 11px; }
|
||||
.call-dock .pi { width: 18px; height: 18px; }
|
||||
/* When docked, compact the controls */
|
||||
.call-dock .call-controls { padding: 8px; gap: 8px; }
|
||||
.call-dock .cc-btn { width: 36px; height: 36px; border-radius: 10px; }
|
||||
.call-dock .cc-btn.hangup { width: 54px; }
|
||||
.call-dock .ss-content { padding: 8px; gap: 4px; }
|
||||
.call-dock .ss-line { height: 4px; }
|
||||
.call-dock .ss-block { height: 20px; }
|
||||
.call-dock .ss-badge { font-size: 9px; padding: 3px 7px; }
|
||||
|
||||
/* Screen switcher pill (top-right of window) */
|
||||
.screen-switcher {
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
right: 20px;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.screen-switcher button {
|
||||
padding: 6px 10px;
|
||||
border-radius: 7px;
|
||||
color: var(--fg-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
.screen-switcher button.active { background: var(--accent); color: #fff; }
|
||||
|
||||
/* Call stage overlay */
|
||||
.call-screen {
|
||||
position: absolute;
|
||||
inset: 38px 0 0 0; /* below window bar */
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* === Incoming Call === */
|
||||
.incoming-call {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background:
|
||||
radial-gradient(circle at 30% 20%, rgba(79,70,229,0.15), transparent 50%),
|
||||
radial-gradient(circle at 70% 80%, rgba(109,115,255,0.1), transparent 50%),
|
||||
var(--bg);
|
||||
}
|
||||
.incoming-card {
|
||||
width: 420px;
|
||||
padding: 40px 32px 28px;
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 24px;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
|
||||
}
|
||||
.variant-clean.dark .incoming-card { box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
|
||||
.incoming-ringing {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--fg-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.incoming-avatar {
|
||||
margin: 22px auto 18px;
|
||||
width: 112px; height: 112px;
|
||||
position: relative;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.incoming-avatar .avatar.lg {
|
||||
width: 96px; height: 96px;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
border: 3px solid var(--bg-3);
|
||||
}
|
||||
.pulse-ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 2px solid var(--accent);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: pulseRing 2s ease-out infinite;
|
||||
}
|
||||
.pulse-ring.d2 { animation-delay: 1s; }
|
||||
@keyframes pulseRing {
|
||||
0% { transform: scale(0.85); opacity: 0.6; }
|
||||
100% { transform: scale(1.25); opacity: 0; }
|
||||
}
|
||||
.incoming-name {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-family: 'Outfit', 'Inter', sans-serif;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.incoming-sub {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--fg-muted);
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
}
|
||||
.incoming-actions {
|
||||
margin-top: 28px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
.incoming-btn {
|
||||
flex: 1;
|
||||
padding: 14px 20px;
|
||||
border-radius: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.incoming-btn.decline {
|
||||
background: transparent;
|
||||
color: #dc2626;
|
||||
border: 1px solid rgba(220,38,38,0.3);
|
||||
}
|
||||
.variant-clean.dark .incoming-btn.decline { color: #fb7185; border-color: rgba(251,113,133,0.3); }
|
||||
.incoming-btn.decline:hover { background: rgba(220,38,38,0.08); }
|
||||
.incoming-btn.accept {
|
||||
background: #16a34a;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 14px rgba(22,163,74,0.3);
|
||||
}
|
||||
.incoming-btn.accept:hover { background: #15803d; }
|
||||
|
||||
/* === Active Call === */
|
||||
.active-call {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, var(--bg-2), var(--bg));
|
||||
}
|
||||
.call-topbar {
|
||||
padding: 14px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--bg-3);
|
||||
}
|
||||
.call-topbar-left { display: flex; flex-direction: column; gap: 2px; }
|
||||
.call-title {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-weight: 600; font-size: 14px;
|
||||
}
|
||||
.call-dot { opacity: 0.4; }
|
||||
.call-duration { font-variant-numeric: tabular-nums; color: var(--fg-muted); font-size: 13px; }
|
||||
.call-e2ee {
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
font-size: 11px; color: #16a34a; font-weight: 500;
|
||||
}
|
||||
.variant-clean.dark .call-e2ee { color: #4ade80; }
|
||||
.call-topbar-right { display: flex; gap: 4px; }
|
||||
|
||||
.call-stage {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Participant tiles */
|
||||
.participant-tile {
|
||||
position: relative;
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.participant-tile:hover { border-color: var(--accent); }
|
||||
.participant-tile.speaking { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.25); }
|
||||
.participant-tile.focused { border-color: var(--accent); }
|
||||
.participant-tile.small { min-width: 140px; }
|
||||
|
||||
.participant-audio, .participant-video {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.audio-ring {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.audio-ring .avatar.lg {
|
||||
width: 72px; height: 72px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.participant-tile.small .audio-ring .avatar.lg { width: 44px; height: 44px; font-size: 18px; }
|
||||
.audio-ring.pulse::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -6px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #22c55e;
|
||||
animation: audioPulse 1.3s ease-out infinite;
|
||||
}
|
||||
@keyframes audioPulse {
|
||||
0% { transform: scale(1); opacity: 0.8; }
|
||||
100% { transform: scale(1.3); opacity: 0; }
|
||||
}
|
||||
|
||||
.video-stub {
|
||||
width: 100%; height: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 30% 40%, rgba(109,115,255,0.2), transparent 60%),
|
||||
linear-gradient(135deg, #1a1a24, #0A0A0F);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.variant-clean:not(.dark) .video-stub { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
|
||||
|
||||
/* Screenshare stub */
|
||||
.screenshare-stub {
|
||||
width: 100%; height: 100%;
|
||||
position: relative;
|
||||
background: #0A0A0F;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.variant-clean:not(.dark) .screenshare-stub { background: #111118; }
|
||||
.ss-window {
|
||||
width: 90%; height: 85%;
|
||||
background: #1a1a24;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.ss-chrome {
|
||||
height: 20px;
|
||||
background: #252533;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
gap: 4px;
|
||||
}
|
||||
.ss-chrome span { width: 6px; height: 6px; border-radius: 50%; background: #3A3A4D; }
|
||||
.ss-content { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
|
||||
.ss-line { height: 6px; background: #3A3A4D; border-radius: 3px; }
|
||||
.ss-block { height: 40px; background: rgba(109,115,255,0.25); border-radius: 4px; margin: 4px 0; }
|
||||
.participant-tile.small .ss-content { padding: 6px; gap: 3px; }
|
||||
.participant-tile.small .ss-line { height: 3px; }
|
||||
.participant-tile.small .ss-block { height: 14px; }
|
||||
.ss-badge {
|
||||
position: absolute;
|
||||
top: 12px; left: 12px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
backdrop-filter: blur(8px);
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
}
|
||||
.participant-tile.small .ss-badge { display: none; }
|
||||
|
||||
.participant-meta {
|
||||
position: absolute;
|
||||
bottom: 8px; left: 8px; right: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
background: rgba(0,0,0,0.55);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
.participant-tile.small .participant-meta { padding: 4px 8px; font-size: 10px; }
|
||||
.participant-name {
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.e2ee-dot { opacity: 0.7; display: flex; }
|
||||
.participant-icons { display: flex; gap: 4px; }
|
||||
.pi {
|
||||
width: 20px; height: 20px;
|
||||
border-radius: 6px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.pi.muted { background: rgba(220,38,38,0.8); }
|
||||
.pi.sharing { background: rgba(34,197,94,0.8); }
|
||||
|
||||
/* Grid layouts */
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
.grid-1 { grid-template-columns: 1fr; }
|
||||
.grid-2 { grid-template-columns: 1fr 1fr; }
|
||||
.grid-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
|
||||
.grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
|
||||
|
||||
/* Focus layout */
|
||||
.focus-layout {
|
||||
width: 100%; height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.focus-main { flex: 1; min-height: 0; }
|
||||
.focus-main .participant-tile { height: 100%; }
|
||||
.focus-strip {
|
||||
height: 110px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.focus-strip .participant-tile { min-width: 160px; height: 100%; }
|
||||
|
||||
/* Fullscreen layout (hides topbar, pure cinema) */
|
||||
.active-call.mode-fullscreen .call-topbar { display: none; }
|
||||
.active-call.mode-fullscreen .call-stage { padding: 0; position: relative; }
|
||||
.fullscreen-layout {
|
||||
width: 100%; height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.fullscreen-layout > .participant-tile { width: 100%; height: 100%; border-radius: 0; border: none; }
|
||||
.fs-strip {
|
||||
position: absolute;
|
||||
bottom: 90px;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 180px;
|
||||
}
|
||||
.fs-strip .participant-tile { height: 100px; backdrop-filter: blur(20px); background: rgba(0,0,0,0.4); }
|
||||
|
||||
/* Call controls bar */
|
||||
.call-controls {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
background: var(--bg-3);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.active-call.mode-fullscreen .call-controls {
|
||||
position: absolute;
|
||||
bottom: 16px; left: 50%; transform: translateX(-50%);
|
||||
background: rgba(10,10,15,0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 18px;
|
||||
padding: 10px;
|
||||
}
|
||||
.cc-btn {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 14px;
|
||||
background: var(--bg-2);
|
||||
color: var(--fg);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: all 0.15s;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.cc-btn:hover { background: var(--bg); transform: translateY(-1px); }
|
||||
.cc-btn.sm { width: 32px; height: 32px; border-radius: 8px; }
|
||||
.cc-btn.active-brand { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
.cc-btn.active-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
|
||||
.cc-btn.hangup { background: #dc2626; color: #fff; border-color: #dc2626; width: 72px; }
|
||||
.cc-btn.hangup:hover { background: #b91c1c; }
|
||||
|
||||
.active-call.mode-fullscreen .cc-btn { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.1); }
|
||||
.active-call.mode-fullscreen .cc-btn.active-brand { background: var(--accent); border-color: var(--accent); }
|
||||
.active-call.mode-fullscreen .cc-btn.active-danger { background: #dc2626; border-color: #dc2626; }
|
||||
.active-call.mode-fullscreen .cc-btn.hangup { background: #dc2626; border-color: #dc2626; }
|
||||
|
||||
/* Exit fullscreen button */
|
||||
.fs-exit {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 10;
|
||||
padding: 8px 14px;
|
||||
background: rgba(10,10,15,0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.fs-exit:hover { background: rgba(10,10,15,0.9); transform: translateY(-1px); }
|
||||
|
||||
/* Fullscreen hint — subtle, fades in then out */
|
||||
.fs-hint {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 6px 14px;
|
||||
background: rgba(10,10,15,0.6);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
z-index: 10;
|
||||
animation: fsHintFade 3.5s ease-out forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes fsHintFade {
|
||||
0% { opacity: 0; transform: translate(-50%, -6px); }
|
||||
15%, 75% { opacity: 1; transform: translate(-50%, 0); }
|
||||
100% { opacity: 0; transform: translate(-50%, -6px); }
|
||||
}
|
||||
|
||||
/* PiP in chat view */
|
||||
.pip-call {
|
||||
position: absolute;
|
||||
bottom: 82px; right: 20px;
|
||||
width: 260px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 0 3px rgba(79,70,229,0.15);
|
||||
cursor: pointer;
|
||||
z-index: 30;
|
||||
animation: slideInCall 0.4s cubic-bezier(0.22,1,0.36,1);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.pip-call:hover { transform: translateY(-2px); }
|
||||
.pip-preview {
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 10px;
|
||||
background: var(--bg-2);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pip-preview .ss-window.mini {
|
||||
width: 36px; height: 28px;
|
||||
background: #1a1a24;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.pip-info { flex: 1; min-width: 0; }
|
||||
.pip-title { font-weight: 600; font-size: 13px; }
|
||||
.pip-sub {
|
||||
font-size: 11px; color: var(--fg-muted);
|
||||
margin-top: 2px;
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
}
|
||||
.live-dot {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: #ef4444;
|
||||
animation: liveDotPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes liveDotPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
.pip-hangup {
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #dc2626;
|
||||
color: #fff;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* Rail layout — Discord-style icon sidebar */
|
||||
.rail-layout {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 64px 280px 1fr;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
.icon-rail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
gap: 6px;
|
||||
}
|
||||
.rail-brand {
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: var(--accent, #4F46E5);
|
||||
color: #fff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.rail-divider { width: 32px; height: 2px; background: rgba(128,128,128,0.2); border-radius: 1px; margin: 4px 0; }
|
||||
.rail-btn {
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--fg-muted);
|
||||
position: relative;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.rail-btn:hover { background: rgba(128,128,128,0.1); color: var(--fg); border-radius: 12px; }
|
||||
.rail-btn.active { background: var(--accent); color: #fff; border-radius: 12px; }
|
||||
.rail-pill {
|
||||
position: absolute;
|
||||
left: -12px; top: 50%; transform: translateY(-50%);
|
||||
width: 4px; height: 24px;
|
||||
background: var(--fg);
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.rail-chatlist { display: flex; flex-direction: column; }
|
||||
.rail-chatlist .chat-items { flex: 1; }
|
||||
.rail-user {
|
||||
padding: 10px 12px;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.variant-clean.layout-rail .icon-rail { background: var(--bg-2); border-right: 1px solid var(--line); }
|
||||
.variant-clean.layout-rail .rail-chatlist { background: var(--bg-3); border-right: 1px solid var(--line); }
|
||||
.variant-clean.layout-rail .rail-user { background: var(--bg-2); border-top: 1px solid var(--line); }
|
||||
.variant-clean.layout-rail .rail-brand { background: var(--accent); color: #fff; }
|
||||
@@ -0,0 +1,461 @@
|
||||
/* ================= VARIANT 1: CLEAN MINIMAL (Light) ================= */
|
||||
.variant-clean {
|
||||
--bg: #fafaf9;
|
||||
--bg-2: #f4f4f2;
|
||||
--bg-3: #ffffff;
|
||||
--fg: #0a0a0f;
|
||||
--fg-muted: #737380;
|
||||
--line: rgba(10,10,15,0.08);
|
||||
--accent: #4F46E5;
|
||||
--accent-fg: #ffffff;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
.variant-clean .nav-brand { font-family: 'Outfit', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.02em; }
|
||||
|
||||
/* Dark mode for Clean */
|
||||
.variant-clean.dark {
|
||||
--bg: #050507;
|
||||
--bg-2: #111118;
|
||||
--bg-3: #0A0A0F;
|
||||
--fg: #f4f4f5;
|
||||
--fg-muted: #8a8a99;
|
||||
--line: rgba(255,255,255,0.07);
|
||||
--accent: #6D73FF;
|
||||
--accent-fg: #ffffff;
|
||||
}
|
||||
.variant-clean.dark .app-window { background: var(--bg-3); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--line); }
|
||||
.variant-clean.dark .avatar { background: #1A1A24; color: #DDE0FF; }
|
||||
.variant-clean.dark .avatar[data-color="violet"] { background: #312E81; color: #C4B5FD; }
|
||||
.variant-clean.dark .avatar[data-color="amber"] { background: #422e05; color: #fde68a; }
|
||||
.variant-clean.dark .avatar[data-color="rose"] { background: #4a1d29; color: #fecdd3; }
|
||||
.variant-clean.dark .avatar[data-color="teal"] { background: #134e4a; color: #99f6e4; }
|
||||
.variant-clean.dark .bubble.them { border-color: rgba(255,255,255,0.1); }
|
||||
.variant-clean.dark .bubble.me { background: var(--accent); color: #fff; }
|
||||
.variant-clean.dark .nav-tab.active { background: var(--accent); }
|
||||
.variant-clean.dark .reaction.mine { background: var(--accent); }
|
||||
.variant-clean.dark .composer-btn { background: var(--accent); }
|
||||
.variant-clean .app-window { background: var(--bg-3); box-shadow: 0 30px 80px rgba(0,0,0,0.08), 0 0 0 1px var(--line); }
|
||||
.variant-clean .window-bar { background: var(--bg-2); border-bottom: 1px solid var(--line); }
|
||||
.variant-clean .window-bar .title { color: var(--fg-muted); font-weight: 500; }
|
||||
.variant-clean .top-nav { border-bottom: 1px solid var(--line); background: var(--bg-3); }
|
||||
.variant-clean .nav-brand svg { color: #0a0a0a; }
|
||||
.variant-clean .nav-tab { color: var(--fg-muted); }
|
||||
.variant-clean .nav-tab:hover { background: var(--bg-2); color: var(--fg); }
|
||||
.variant-clean .nav-tab.active { background: var(--accent); color: var(--accent-fg); }
|
||||
.variant-clean .nav-user { border: 1px solid var(--line); }
|
||||
.variant-clean .chat-list { border-right: 1px solid var(--line); background: var(--bg-3); }
|
||||
.variant-clean .chat-list-header { border-bottom: 1px solid var(--line); }
|
||||
.variant-clean .chat-search { background: var(--bg-2); color: var(--fg); }
|
||||
.variant-clean .chat-item:hover { background: var(--bg-2); }
|
||||
.variant-clean .chat-item.active { background: var(--bg-2); }
|
||||
.variant-clean .avatar { background: #e5e5e5; color: #0a0a0a; }
|
||||
.variant-clean .avatar[data-color="violet"] { background: #ddd6fe; color: #5b21b6; }
|
||||
.variant-clean .avatar[data-color="amber"] { background: #fde68a; color: #78350f; }
|
||||
.variant-clean .avatar[data-color="rose"] { background: #fecdd3; color: #881337; }
|
||||
.variant-clean .avatar[data-color="teal"] { background: #99f6e4; color: #134e4a; }
|
||||
.variant-clean .chat-header { border-bottom: 1px solid var(--line); }
|
||||
.variant-clean .icon-btn { color: var(--fg-muted); }
|
||||
.variant-clean .icon-btn:hover { background: var(--bg-2); color: var(--fg); }
|
||||
.variant-clean .bubble.me { background: var(--accent); color: var(--accent-fg); border-radius: 18px 18px 4px 18px; }
|
||||
.variant-clean .bubble.them { background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; }
|
||||
.variant-clean .reaction { background: var(--bg-2); border: 1px solid var(--line); }
|
||||
.variant-clean .reaction.mine { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
|
||||
.variant-clean .event-pill { background: var(--bg-2); color: var(--fg-muted); }
|
||||
.variant-clean .composer { border-top: 1px solid var(--line); }
|
||||
.variant-clean .composer-box { background: var(--bg-2); }
|
||||
.variant-clean .composer-btn { background: var(--accent); color: var(--accent-fg); }
|
||||
.variant-clean .presence { border-color: var(--bg-3); }
|
||||
|
||||
|
||||
/* ================= VARIANT 2: PLAYFUL DISCORD-VIBES ================= */
|
||||
.variant-playful {
|
||||
--bg: #1a1625;
|
||||
--bg-2: #2a2338;
|
||||
--bg-3: #221b30;
|
||||
--fg: #f5f3ff;
|
||||
--fg-muted: #9691b3;
|
||||
--accent: #a78bfa;
|
||||
--accent-2: #f472b6;
|
||||
--accent-3: #60a5fa;
|
||||
background: radial-gradient(ellipse at top left, #3d1a54 0%, #1a1625 50%);
|
||||
color: var(--fg);
|
||||
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
|
||||
}
|
||||
.variant-playful .app-window { background: var(--bg-3); }
|
||||
.variant-playful .window-bar { background: rgba(0,0,0,0.25); }
|
||||
.variant-playful .window-bar .title { color: #fff; font-weight: 700; font-size: 13px; }
|
||||
.variant-playful .top-nav { background: linear-gradient(90deg, #2a1a48 0%, #1a1625 100%); border-bottom: 1px solid rgba(255,255,255,0.05); }
|
||||
.variant-playful .nav-brand { font-size: 18px; background: linear-gradient(135deg, #f472b6, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.variant-playful .nav-tab { color: var(--fg-muted); font-weight: 600; }
|
||||
.variant-playful .nav-tab:hover { background: rgba(255,255,255,0.06); color: #fff; }
|
||||
.variant-playful .nav-tab.active { background: linear-gradient(135deg, #a78bfa, #f472b6); color: #fff; box-shadow: 0 4px 14px rgba(167,139,250,0.4); }
|
||||
.variant-playful .nav-user { background: rgba(255,255,255,0.05); }
|
||||
.variant-playful .chat-list { background: rgba(0,0,0,0.15); border-right: 1px solid rgba(255,255,255,0.04); }
|
||||
.variant-playful .chat-search { background: rgba(0,0,0,0.3); color: #fff; }
|
||||
.variant-playful .chat-item:hover { background: rgba(255,255,255,0.04); }
|
||||
.variant-playful .chat-item.active { background: linear-gradient(90deg, rgba(167,139,250,0.2), rgba(244,114,182,0.1)); }
|
||||
.variant-playful .avatar { background: linear-gradient(135deg, #a78bfa, #f472b6); color: #fff; font-weight: 800; }
|
||||
.variant-playful .avatar[data-color="teal"] { background: linear-gradient(135deg, #34d399, #60a5fa); }
|
||||
.variant-playful .avatar[data-color="amber"] { background: linear-gradient(135deg, #fbbf24, #f472b6); }
|
||||
.variant-playful .avatar[data-color="rose"] { background: linear-gradient(135deg, #fb7185, #a78bfa); }
|
||||
.variant-playful .avatar[data-color="violet"] { background: linear-gradient(135deg, #a78bfa, #60a5fa); }
|
||||
.variant-playful .chat-header { background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.05); }
|
||||
.variant-playful .icon-btn:hover { background: rgba(255,255,255,0.08); }
|
||||
.variant-playful .messages { background: radial-gradient(ellipse at bottom right, rgba(244,114,182,0.06), transparent 50%); }
|
||||
.variant-playful .bubble.me { background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: #fff; border-radius: 20px 20px 4px 20px; box-shadow: 0 4px 14px rgba(167,139,250,0.25); }
|
||||
.variant-playful .bubble.them { background: rgba(255,255,255,0.06); color: #fff; border-radius: 20px 20px 20px 4px; backdrop-filter: blur(10px); }
|
||||
.variant-playful .reaction { background: rgba(255,255,255,0.08); }
|
||||
.variant-playful .reaction.mine { background: rgba(167,139,250,0.3); border: 1px solid #a78bfa; }
|
||||
.variant-playful .event-pill { background: rgba(52,211,153,0.15); color: #34d399; }
|
||||
.variant-playful .event-pill.rejected { background: rgba(251,113,133,0.15); color: #fb7185; }
|
||||
.variant-playful .composer { background: rgba(0,0,0,0.2); }
|
||||
.variant-playful .composer-box { background: rgba(255,255,255,0.06); }
|
||||
.variant-playful .composer-btn { background: linear-gradient(135deg, #a78bfa, #f472b6); color: #fff; box-shadow: 0 4px 14px rgba(167,139,250,0.4); }
|
||||
.variant-playful .presence { border-color: var(--bg-3); }
|
||||
|
||||
|
||||
/* ================= VARIANT 3: Y2K GLASSMORPHISM ================= */
|
||||
.variant-y2k {
|
||||
--bg: #0a0a1f;
|
||||
--fg: #f8fafc;
|
||||
--fg-muted: rgba(248,250,252,0.6);
|
||||
--accent: #c7d2fe;
|
||||
color: var(--fg);
|
||||
font-family: 'Space Grotesk', 'Inter', sans-serif;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 50% at 20% 20%, rgba(168,85,247,0.4), transparent),
|
||||
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(59,130,246,0.35), transparent),
|
||||
radial-gradient(ellipse 70% 60% at 50% 50%, rgba(236,72,153,0.2), transparent),
|
||||
#0a0a1f;
|
||||
}
|
||||
.variant-y2k .app-window {
|
||||
background: rgba(255,255,255,0.04);
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
box-shadow: 0 30px 80px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||
}
|
||||
.variant-y2k .window-bar { background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.variant-y2k .window-bar .title { color: rgba(255,255,255,0.7); font-weight: 500; letter-spacing: 0.08em; font-size: 11px; text-transform: uppercase; }
|
||||
.variant-y2k .top-nav { background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.variant-y2k .nav-brand { font-weight: 700; letter-spacing: -0.03em; font-size: 18px; }
|
||||
.variant-y2k .nav-tab {
|
||||
color: var(--fg-muted);
|
||||
font-weight: 500;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.variant-y2k .nav-tab:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.1); }
|
||||
.variant-y2k .nav-tab.active {
|
||||
background: rgba(255,255,255,0.15);
|
||||
color: #fff;
|
||||
border-color: rgba(255,255,255,0.25);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
|
||||
}
|
||||
.variant-y2k .nav-user { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
|
||||
.variant-y2k .chat-list { background: rgba(255,255,255,0.02); border-right: 1px solid rgba(255,255,255,0.08); }
|
||||
.variant-y2k .chat-search { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.08); }
|
||||
.variant-y2k .chat-item:hover { background: rgba(255,255,255,0.05); }
|
||||
.variant-y2k .chat-item.active {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
.variant-y2k .avatar {
|
||||
background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
|
||||
color: #312e81;
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
.variant-y2k .avatar[data-color="violet"] { background: linear-gradient(135deg, #e9d5ff, #c4b5fd); color: #4c1d95; }
|
||||
.variant-y2k .avatar[data-color="rose"] { background: linear-gradient(135deg, #fecdd3, #f9a8d4); color: #831843; }
|
||||
.variant-y2k .avatar[data-color="teal"] { background: linear-gradient(135deg, #a7f3d0, #7dd3fc); color: #064e3b; }
|
||||
.variant-y2k .avatar[data-color="amber"] { background: linear-gradient(135deg, #fde68a, #fdba74); color: #7c2d12; }
|
||||
.variant-y2k .chat-header { background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.variant-y2k .icon-btn:hover { background: rgba(255,255,255,0.08); }
|
||||
.variant-y2k .bubble.me {
|
||||
background: linear-gradient(135deg, rgba(199,210,254,0.9), rgba(196,181,253,0.8));
|
||||
color: #1e1b4b;
|
||||
border-radius: 20px 20px 6px 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 14px rgba(124,58,237,0.2);
|
||||
}
|
||||
.variant-y2k .bubble.them {
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: 20px 20px 20px 6px;
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
.variant-y2k .reaction { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
|
||||
.variant-y2k .reaction.mine { background: rgba(199,210,254,0.25); border-color: rgba(199,210,254,0.5); }
|
||||
.variant-y2k .event-pill { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
|
||||
.variant-y2k .event-pill.rejected { background: rgba(251,113,133,0.15); color: #fda4af; border-color: rgba(251,113,133,0.3); }
|
||||
.variant-y2k .composer { background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.variant-y2k .composer-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
|
||||
.variant-y2k .composer-btn { background: linear-gradient(135deg, #e0e7ff, #c4b5fd); color: #312e81; border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
|
||||
.variant-y2k .presence { border-color: #0a0a1f; }
|
||||
|
||||
|
||||
/* ================= VARIANT 4: CYBERPUNK NEON ================= */
|
||||
.variant-cyber {
|
||||
--bg: #05050a;
|
||||
--fg: #e0e0e8;
|
||||
--fg-muted: #6b7280;
|
||||
--neon-cyan: #00f0ff;
|
||||
--neon-magenta: #ff00aa;
|
||||
--neon-lime: #b6ff3d;
|
||||
color: var(--fg);
|
||||
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
||||
background:
|
||||
repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,240,255,0.015) 2px, rgba(0,240,255,0.015) 4px),
|
||||
radial-gradient(ellipse at center, #0c0c18 0%, #05050a 70%);
|
||||
}
|
||||
.variant-cyber .app-window {
|
||||
background: #08080f;
|
||||
border: 1px solid rgba(0,240,255,0.2);
|
||||
box-shadow: 0 0 40px rgba(255,0,170,0.15), 0 0 80px rgba(0,240,255,0.08);
|
||||
}
|
||||
.variant-cyber .window-bar { background: #05050a; border-bottom: 1px solid rgba(0,240,255,0.15); }
|
||||
.variant-cyber .window-bar .title { color: var(--neon-cyan); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
|
||||
.variant-cyber .window-bar .title::before { content: "// "; opacity: 0.5; }
|
||||
.variant-cyber .top-nav { background: #05050a; border-bottom: 1px solid rgba(0,240,255,0.15); }
|
||||
.variant-cyber .nav-brand { color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; text-shadow: 0 0 10px rgba(0,240,255,0.5); }
|
||||
.variant-cyber .nav-tab { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 500; border: 1px solid transparent; }
|
||||
.variant-cyber .nav-tab:hover { color: var(--neon-cyan); border-color: rgba(0,240,255,0.2); }
|
||||
.variant-cyber .nav-tab.active { color: var(--neon-lime); border-color: var(--neon-lime); background: rgba(182,255,61,0.05); box-shadow: 0 0 10px rgba(182,255,61,0.2); }
|
||||
.variant-cyber .nav-tab.active::before { content: "> "; }
|
||||
.variant-cyber .nav-user { border: 1px solid rgba(0,240,255,0.15); }
|
||||
.variant-cyber .chat-list { background: #05050a; border-right: 1px solid rgba(0,240,255,0.15); }
|
||||
.variant-cyber .chat-list-title { color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.15em; font-size: 11px; }
|
||||
.variant-cyber .chat-list-title::before { content: "[ "; opacity: 0.5; }
|
||||
.variant-cyber .chat-list-title::after { content: " ]"; opacity: 0.5; }
|
||||
.variant-cyber .chat-search { background: #0c0c18; border: 1px solid rgba(0,240,255,0.15); color: var(--fg); }
|
||||
.variant-cyber .chat-item:hover { background: rgba(0,240,255,0.04); }
|
||||
.variant-cyber .chat-item.active { background: rgba(0,240,255,0.06); border-left: 2px solid var(--neon-cyan); padding-left: 10px; }
|
||||
.variant-cyber .chat-item-name { color: var(--fg); }
|
||||
.variant-cyber .avatar {
|
||||
background: #0c0c18;
|
||||
border: 1px solid var(--neon-cyan);
|
||||
color: var(--neon-cyan);
|
||||
border-radius: 4px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
text-shadow: 0 0 8px rgba(0,240,255,0.5);
|
||||
}
|
||||
.variant-cyber .avatar[data-color="violet"] { border-color: var(--neon-magenta); color: var(--neon-magenta); text-shadow: 0 0 8px rgba(255,0,170,0.5); }
|
||||
.variant-cyber .avatar[data-color="amber"] { border-color: var(--neon-lime); color: var(--neon-lime); text-shadow: 0 0 8px rgba(182,255,61,0.5); }
|
||||
.variant-cyber .avatar[data-color="rose"] { border-color: #ff5500; color: #ff5500; text-shadow: 0 0 8px rgba(255,85,0,0.5); }
|
||||
.variant-cyber .avatar[data-color="teal"] { border-color: var(--neon-cyan); color: var(--neon-cyan); }
|
||||
.variant-cyber .chat-header { background: #05050a; border-bottom: 1px solid rgba(0,240,255,0.15); }
|
||||
.variant-cyber .chat-header-name { color: var(--neon-cyan); font-family: 'JetBrains Mono', monospace; }
|
||||
.variant-cyber .chat-header-name::before { content: "@"; opacity: 0.5; }
|
||||
.variant-cyber .icon-btn { color: var(--neon-cyan); }
|
||||
.variant-cyber .icon-btn:hover { background: rgba(0,240,255,0.1); }
|
||||
.variant-cyber .bubble.me {
|
||||
background: transparent;
|
||||
color: var(--neon-magenta);
|
||||
border: 1px solid var(--neon-magenta);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 15px rgba(255,0,170,0.15), inset 0 0 15px rgba(255,0,170,0.05);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
.variant-cyber .bubble.them {
|
||||
background: transparent;
|
||||
color: var(--neon-cyan);
|
||||
border: 1px solid var(--neon-cyan);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 15px rgba(0,240,255,0.15), inset 0 0 15px rgba(0,240,255,0.05);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
.variant-cyber .bubble .ts { color: rgba(255,255,255,0.4); font-size: 9px; letter-spacing: 0.1em; }
|
||||
.variant-cyber .reaction { background: #0c0c18; border: 1px solid rgba(0,240,255,0.2); border-radius: 2px; color: var(--neon-lime); }
|
||||
.variant-cyber .reaction.mine { border-color: var(--neon-lime); box-shadow: 0 0 10px rgba(182,255,61,0.2); }
|
||||
.variant-cyber .event-pill { background: transparent; border: 1px dashed var(--neon-lime); color: var(--neon-lime); border-radius: 2px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
|
||||
.variant-cyber .event-pill.rejected { border-color: var(--neon-magenta); color: var(--neon-magenta); }
|
||||
.variant-cyber .composer { background: #05050a; border-top: 1px solid rgba(0,240,255,0.15); }
|
||||
.variant-cyber .composer-box { background: #0c0c18; border: 1px solid rgba(0,240,255,0.2); border-radius: 4px; }
|
||||
.variant-cyber .composer-box::before { content: ">"; color: var(--neon-lime); margin-right: 6px; font-weight: bold; }
|
||||
.variant-cyber .composer-btn { background: var(--neon-lime); color: #05050a; border-radius: 4px; box-shadow: 0 0 15px rgba(182,255,61,0.3); }
|
||||
.variant-cyber .presence { border-color: #08080f; }
|
||||
|
||||
|
||||
/* ================= VARIANT 5: WARM SOFT ================= */
|
||||
.variant-warm {
|
||||
--bg: #f7f2e9;
|
||||
--bg-2: #efe6d4;
|
||||
--bg-3: #fdfaf3;
|
||||
--fg: #3d2e1f;
|
||||
--fg-muted: #8a7560;
|
||||
--accent: #c75d3a;
|
||||
--accent-2: #e8a87c;
|
||||
--line: rgba(61,46,31,0.1);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.variant-warm .nav-brand { font-family: 'Fraunces', 'Playfair Display', serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
|
||||
.variant-warm .chat-header-name { font-family: 'Fraunces', 'Playfair Display', serif; font-size: 17px; }
|
||||
.variant-warm .chat-list-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; }
|
||||
.variant-warm .app-window { background: var(--bg-3); box-shadow: 0 20px 60px rgba(61,46,31,0.12); border: 1px solid var(--line); }
|
||||
.variant-warm .window-bar { background: var(--bg-2); border-bottom: 1px solid var(--line); }
|
||||
.variant-warm .window-bar .title { color: var(--fg-muted); font-weight: 500; }
|
||||
.variant-warm .top-nav { background: var(--bg-3); border-bottom: 1px solid var(--line); }
|
||||
.variant-warm .nav-tab { color: var(--fg-muted); font-weight: 500; border-radius: 999px; }
|
||||
.variant-warm .nav-tab:hover { background: var(--bg-2); color: var(--fg); }
|
||||
.variant-warm .nav-tab.active { background: var(--accent); color: #fff; }
|
||||
.variant-warm .nav-user { background: var(--bg-2); border-radius: 999px; }
|
||||
.variant-warm .chat-list { background: var(--bg-2); }
|
||||
.variant-warm .chat-search { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); border-radius: 999px; }
|
||||
.variant-warm .chat-item { border-radius: 14px; }
|
||||
.variant-warm .chat-item:hover { background: rgba(255,255,255,0.5); }
|
||||
.variant-warm .chat-item.active { background: var(--bg-3); box-shadow: 0 2px 8px rgba(61,46,31,0.06); }
|
||||
.variant-warm .avatar { background: #e8a87c; color: #7c3a1e; font-family: 'Fraunces', serif; font-weight: 700; }
|
||||
.variant-warm .avatar[data-color="violet"] { background: #bfa4c9; color: #4a2a5c; }
|
||||
.variant-warm .avatar[data-color="amber"] { background: #e8c87c; color: #5c3e1a; }
|
||||
.variant-warm .avatar[data-color="rose"] { background: #e8a4a4; color: #5c1e1e; }
|
||||
.variant-warm .avatar[data-color="teal"] { background: #a4c9bf; color: #1e4a3e; }
|
||||
.variant-warm .chat-header { background: var(--bg-3); border-bottom: 1px solid var(--line); }
|
||||
.variant-warm .icon-btn:hover { background: var(--bg-2); }
|
||||
.variant-warm .messages { background: var(--bg-3); }
|
||||
.variant-warm .bubble.me { background: var(--accent); color: #fff; border-radius: 20px 20px 6px 20px; }
|
||||
.variant-warm .bubble.them { background: var(--bg-2); color: var(--fg); border-radius: 20px 20px 20px 6px; }
|
||||
.variant-warm .reaction { background: var(--bg-2); border: 1px solid var(--line); }
|
||||
.variant-warm .reaction.mine { background: var(--accent); color: #fff; }
|
||||
.variant-warm .event-pill { background: var(--bg-2); color: var(--fg-muted); border: 1px solid var(--line); }
|
||||
.variant-warm .event-pill.rejected { background: rgba(199,93,58,0.1); color: var(--accent); }
|
||||
.variant-warm .composer { background: var(--bg-3); border-top: 1px solid var(--line); }
|
||||
.variant-warm .composer-box { background: var(--bg-2); border-radius: 999px; padding-left: 16px; }
|
||||
.variant-warm .composer-btn { background: var(--accent); color: #fff; border-radius: 50%; }
|
||||
.variant-warm .presence { border-color: var(--bg-3); }
|
||||
|
||||
|
||||
/* ================= VARIANT 6: BRUTAL GAMING ================= */
|
||||
.variant-brutal {
|
||||
--bg: #0d0d0d;
|
||||
--bg-2: #161616;
|
||||
--bg-3: #1a1a1a;
|
||||
--fg: #ffffff;
|
||||
--fg-muted: #808080;
|
||||
--lime: #d4ff3d;
|
||||
--line: #2a2a2a;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.variant-brutal .nav-brand {
|
||||
font-family: 'Archivo Black', 'Inter', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 22px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.variant-brutal .chat-header-name { font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: -0.01em; }
|
||||
.variant-brutal .chat-list-title { font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: -0.02em; }
|
||||
.variant-brutal .app-window { background: var(--bg); border: 2px solid var(--lime); border-radius: 0; box-shadow: 12px 12px 0 var(--lime); }
|
||||
.variant-brutal .window-bar { background: var(--bg); border-bottom: 2px solid var(--lime); }
|
||||
.variant-brutal .window-bar .title { color: var(--lime); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
|
||||
.variant-brutal .top-nav { background: var(--bg); border-bottom: 2px solid var(--line); }
|
||||
.variant-brutal .nav-tab { color: var(--fg-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; border-radius: 0; border: 2px solid transparent; }
|
||||
.variant-brutal .nav-tab:hover { color: var(--fg); background: var(--bg-2); }
|
||||
.variant-brutal .nav-tab.active { background: var(--lime); color: #000; }
|
||||
.variant-brutal .nav-user { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; }
|
||||
.variant-brutal .chat-list { background: var(--bg); border-right: 2px solid var(--line); }
|
||||
.variant-brutal .chat-search { background: var(--bg-2); border: 2px solid var(--line); color: var(--fg); border-radius: 0; font-weight: 500; }
|
||||
.variant-brutal .chat-item { border-radius: 0; border-left: 4px solid transparent; }
|
||||
.variant-brutal .chat-item:hover { background: var(--bg-2); }
|
||||
.variant-brutal .chat-item.active { background: var(--bg-2); border-left-color: var(--lime); }
|
||||
.variant-brutal .chat-item-name { font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: -0.01em; }
|
||||
.variant-brutal .avatar { background: var(--lime); color: #000; border-radius: 0; font-weight: 900; font-family: 'Archivo Black', sans-serif; }
|
||||
.variant-brutal .avatar[data-color="violet"] { background: #a78bfa; }
|
||||
.variant-brutal .avatar[data-color="amber"] { background: #fbbf24; }
|
||||
.variant-brutal .avatar[data-color="rose"] { background: #fb7185; }
|
||||
.variant-brutal .avatar[data-color="teal"] { background: #2dd4bf; }
|
||||
.variant-brutal .chat-header { background: var(--bg); border-bottom: 2px solid var(--line); }
|
||||
.variant-brutal .icon-btn { border-radius: 0; border: 2px solid var(--line); }
|
||||
.variant-brutal .icon-btn:hover { background: var(--lime); color: #000; border-color: var(--lime); }
|
||||
.variant-brutal .bubble.me { background: var(--lime); color: #000; border-radius: 0; font-weight: 600; border: 2px solid #000; box-shadow: 4px 4px 0 #fff; }
|
||||
.variant-brutal .bubble.them { background: var(--fg); color: #000; border-radius: 0; font-weight: 600; border: 2px solid var(--fg); box-shadow: 4px 4px 0 var(--lime); }
|
||||
.variant-brutal .bubble .ts { color: rgba(0,0,0,0.6); font-weight: 700; font-size: 10px; text-transform: uppercase; }
|
||||
.variant-brutal .reaction { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; font-weight: 700; }
|
||||
.variant-brutal .reaction.mine { background: var(--lime); color: #000; border-color: var(--lime); }
|
||||
.variant-brutal .event-pill { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; font-size: 11px; }
|
||||
.variant-brutal .event-pill.rejected { border-color: #fb7185; color: #fb7185; }
|
||||
.variant-brutal .composer { background: var(--bg); border-top: 2px solid var(--line); }
|
||||
.variant-brutal .composer-box { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; }
|
||||
.variant-brutal .composer-btn { background: var(--lime); color: #000; border-radius: 0; font-weight: 900; }
|
||||
.variant-brutal .presence { border-color: var(--bg); border-width: 3px; }
|
||||
|
||||
/* Profile card & call overlay — inherit from variant */
|
||||
.variant-clean .profile-card { background: #fff; border: 1px solid var(--line); }
|
||||
.variant-clean .profile-card-banner { background: linear-gradient(135deg, #e5e5e5, #d4d4d4); }
|
||||
.variant-clean .profile-card-avatar { border-color: #fff; }
|
||||
.variant-clean .profile-card-meta { border-top-color: var(--line); color: var(--fg-muted); }
|
||||
.variant-clean .call-overlay { background: #fff; border: 1px solid var(--line); color: var(--fg); }
|
||||
|
||||
.variant-playful .profile-card { background: linear-gradient(180deg, #2a1a48, #1a1625); border: 1px solid rgba(255,255,255,0.08); }
|
||||
.variant-playful .profile-card-banner { background: linear-gradient(135deg, #a78bfa, #f472b6); }
|
||||
.variant-playful .profile-card-avatar { border-color: #2a1a48; }
|
||||
.variant-playful .call-overlay { background: linear-gradient(135deg, #2a1a48, #1a1625); border: 1px solid rgba(167,139,250,0.3); }
|
||||
|
||||
.variant-y2k .profile-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.15); }
|
||||
.variant-y2k .profile-card-banner { background: linear-gradient(135deg, #c4b5fd, #f9a8d4); }
|
||||
.variant-y2k .profile-card-avatar { border-color: #1a1a2e; }
|
||||
.variant-y2k .call-overlay { background: rgba(255,255,255,0.08); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.15); }
|
||||
|
||||
.variant-cyber .profile-card { background: #0c0c18; border: 1px solid var(--neon-cyan); box-shadow: 0 0 30px rgba(0,240,255,0.2); }
|
||||
.variant-cyber .profile-card-banner { background: repeating-linear-gradient(90deg, #00f0ff, #00f0ff 2px, transparent 2px, transparent 8px), linear-gradient(135deg, #ff00aa 0%, #00f0ff 100%); }
|
||||
.variant-cyber .profile-card-avatar { border-color: #0c0c18; border-radius: 4px; }
|
||||
.variant-cyber .call-overlay { background: #0c0c18; border: 1px solid var(--neon-lime); box-shadow: 0 0 30px rgba(182,255,61,0.2); }
|
||||
|
||||
.variant-warm .profile-card { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); }
|
||||
.variant-warm .profile-card-banner { background: linear-gradient(135deg, #e8a87c, #c75d3a); }
|
||||
.variant-warm .profile-card-avatar { border-color: var(--bg-3); }
|
||||
.variant-warm .profile-card-meta { border-top-color: var(--line); }
|
||||
.variant-warm .call-overlay { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); }
|
||||
|
||||
.variant-brutal .profile-card { background: var(--bg); border: 2px solid var(--lime); border-radius: 0; box-shadow: 8px 8px 0 var(--lime); }
|
||||
.variant-brutal .profile-card-banner { background: var(--lime); }
|
||||
.variant-brutal .profile-card-avatar { border-color: var(--bg); border-radius: 0; border-width: 3px; }
|
||||
.variant-brutal .profile-card-meta { border-top-color: var(--line); }
|
||||
.variant-brutal .call-overlay { background: var(--bg); border: 2px solid var(--lime); border-radius: 0; box-shadow: 6px 6px 0 var(--lime); }
|
||||
|
||||
|
||||
/* Typing indicator */
|
||||
.typing { display: inline-flex; gap: 3px; padding: 4px 2px; }
|
||||
.typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: typingDot 1.3s infinite; }
|
||||
.typing span:nth-child(2) { animation-delay: 0.15s; }
|
||||
.typing span:nth-child(3) { animation-delay: 0.3s; }
|
||||
@keyframes typingDot {
|
||||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
30% { transform: translateY(-4px); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Tweaks panel */
|
||||
.tweaks-panel {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 280px;
|
||||
background: rgba(20,20,24,0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
z-index: 200;
|
||||
color: #fff;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
|
||||
display: none;
|
||||
}
|
||||
.tweaks-panel.open { display: block; }
|
||||
.tweaks-panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 14px; font-weight: 600; }
|
||||
.tweaks-row { margin-bottom: 12px; }
|
||||
.tweaks-row label { display: block; font-size: 11px; opacity: 0.6; margin-bottom: 6px; }
|
||||
.tweaks-row input[type="color"] { width: 100%; height: 34px; border-radius: 8px; background: transparent; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; }
|
||||
.tweaks-row input[type="range"] { width: 100%; }
|
||||
.tweaks-row select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 8px; border-radius: 8px; font-size: 12px; }
|
||||
Reference in New Issue
Block a user