Spaces:
Sleeping
Sleeping
| @import "tailwindcss"; | |
| /* ═══════════════════════════════════════════ | |
| AnBiMessenger – Liquid Glass Theme | |
| ═══════════════════════════════════════════ */ | |
| /* ── CSS Custom Properties ── */ | |
| :root { | |
| --anbi-cyan: #00f2ff; | |
| --anbi-purple: #bc00ff; | |
| --anbi-bg: #0e1621; | |
| --anbi-glass: rgba(255, 255, 255, 0.04); | |
| --anbi-glass-hover: rgba(255, 255, 255, 0.07); | |
| --anbi-glass-border: rgba(255, 255, 255, 0.08); | |
| --anbi-glass-border-hover: rgba(255, 255, 255, 0.15); | |
| --anbi-text: #e0e8f0; | |
| --anbi-text-muted: #6b7d8e; | |
| --anbi-text-dim: #3a4a5a; | |
| --anbi-blur: 15px; | |
| } | |
| /* ── Body & Root ── */ | |
| html, body, #root { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| background-color: var(--anbi-bg); | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| color: var(--anbi-text); | |
| } | |
| /* ── Animated Liquid Background ── */ | |
| .anbi-liquid-bg { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| background-color: var(--anbi-bg); | |
| overflow: hidden; | |
| } | |
| .anbi-liquid-bg::before, | |
| .anbi-liquid-bg::after { | |
| content: ''; | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(120px); | |
| opacity: 0.25; | |
| animation-timing-function: ease-in-out; | |
| animation-iteration-count: infinite; | |
| animation-direction: alternate; | |
| } | |
| .anbi-liquid-bg::before { | |
| width: 600px; | |
| height: 600px; | |
| top: -150px; | |
| left: -100px; | |
| background: radial-gradient(circle, var(--anbi-cyan) 0%, transparent 70%); | |
| animation: liquidFloat1 12s ease-in-out infinite alternate; | |
| } | |
| .anbi-liquid-bg::after { | |
| width: 500px; | |
| height: 500px; | |
| bottom: -100px; | |
| right: -80px; | |
| background: radial-gradient(circle, var(--anbi-purple) 0%, transparent 70%); | |
| animation: liquidFloat2 14s ease-in-out infinite alternate; | |
| } | |
| /* Third liquid blob via extra element */ | |
| .anbi-liquid-blob { | |
| position: fixed; | |
| width: 400px; | |
| height: 400px; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: radial-gradient(circle, rgba(0, 242, 255, 0.15) 0%, rgba(188, 0, 255, 0.1) 50%, transparent 70%); | |
| border-radius: 50%; | |
| filter: blur(100px); | |
| animation: liquidFloat3 16s ease-in-out infinite alternate; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| @keyframes liquidFloat1 { | |
| 0% { transform: translate(0, 0) scale(1); opacity: 0.2; } | |
| 33% { transform: translate(80px, 60px) scale(1.15); opacity: 0.3; } | |
| 66% { transform: translate(40px, 120px) scale(0.9); opacity: 0.2; } | |
| 100% { transform: translate(120px, 40px) scale(1.1); opacity: 0.28; } | |
| } | |
| @keyframes liquidFloat2 { | |
| 0% { transform: translate(0, 0) scale(1); opacity: 0.2; } | |
| 33% { transform: translate(-60px, -80px) scale(1.2); opacity: 0.3; } | |
| 66% { transform: translate(-100px, -40px) scale(0.95); opacity: 0.22; } | |
| 100% { transform: translate(-40px, -100px) scale(1.05); opacity: 0.25; } | |
| } | |
| @keyframes liquidFloat3 { | |
| 0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); } | |
| 50% { transform: translate(-40%, -60%) scale(1.3) rotate(45deg); } | |
| 100% { transform: translate(-60%, -40%) scale(0.8) rotate(-30deg); } | |
| } | |
| /* ── Glassmorphism Base ── */ | |
| .glass { | |
| background: var(--anbi-glass); | |
| backdrop-filter: blur(var(--anbi-blur)); | |
| -webkit-backdrop-filter: blur(var(--anbi-blur)); | |
| border: 1px solid var(--anbi-glass-border); | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .glass:hover { | |
| background: var(--anbi-glass-hover); | |
| border-color: var(--anbi-glass-border-hover); | |
| } | |
| .glass-strong { | |
| background: rgba(255, 255, 255, 0.06); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .glass-card { | |
| background: rgba(23, 33, 43, 0.7); | |
| backdrop-filter: blur(var(--anbi-blur)); | |
| -webkit-backdrop-filter: blur(var(--anbi-blur)); | |
| border: 1px solid var(--anbi-glass-border); | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .glass-card:hover { | |
| border-color: var(--anbi-glass-border-hover); | |
| } | |
| /* ── Gradient Utilities ── */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--anbi-cyan), var(--anbi-purple)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .gradient-btn { | |
| background: linear-gradient(135deg, var(--anbi-cyan), var(--anbi-purple)); | |
| color: #0e1621; | |
| font-weight: 600; | |
| transition: all 0.3s ease-in-out; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .gradient-btn::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, var(--anbi-purple), var(--anbi-cyan)); | |
| opacity: 0; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| .gradient-btn:hover::before { | |
| opacity: 1; | |
| } | |
| .gradient-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(0, 242, 255, 0.2), 0 4px 15px rgba(188, 0, 255, 0.2); | |
| } | |
| .gradient-btn:disabled { | |
| background: rgba(255, 255, 255, 0.05); | |
| color: #4a5568; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| .gradient-btn:disabled::before { | |
| display: none; | |
| } | |
| .gradient-btn > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* ── Gradient Border (thin glow) ── */ | |
| .gradient-border { | |
| position: relative; | |
| } | |
| .gradient-border::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -1px; | |
| border-radius: inherit; | |
| padding: 1px; | |
| background: linear-gradient(135deg, rgba(0, 242, 255, 0.3), rgba(188, 0, 255, 0.3)); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| .gradient-border:focus-within::after, | |
| .gradient-border:hover::after { | |
| opacity: 1; | |
| } | |
| /* ── Bubble Styles ── */ | |
| .bubble-mine { | |
| background: linear-gradient(135deg, rgba(0, 242, 255, 0.1), rgba(188, 0, 255, 0.08)); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(0, 242, 255, 0.15); | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .bubble-mine:hover { | |
| border-color: rgba(0, 242, 255, 0.25); | |
| background: linear-gradient(135deg, rgba(0, 242, 255, 0.13), rgba(188, 0, 255, 0.1)); | |
| } | |
| .bubble-other { | |
| background: rgba(255, 255, 255, 0.04); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .bubble-other:hover { | |
| border-color: rgba(255, 255, 255, 0.12); | |
| background: rgba(255, 255, 255, 0.06); | |
| } | |
| /* ── Interactive Elements (hover lift) ── */ | |
| .hover-lift { | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-2px); | |
| } | |
| .hover-lift:active { | |
| transform: translateY(0); | |
| } | |
| /* ── Glass Input ── */ | |
| .glass-input { | |
| background: rgba(255, 255, 255, 0.04); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| color: var(--anbi-text); | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .glass-input:focus { | |
| border-color: rgba(0, 242, 255, 0.3); | |
| background: rgba(255, 255, 255, 0.06); | |
| box-shadow: 0 0 20px rgba(0, 242, 255, 0.08); | |
| } | |
| .glass-input::placeholder { | |
| color: var(--anbi-text-dim); | |
| } | |
| /* ── Custom Scrollbar ── */ | |
| ::-webkit-scrollbar { | |
| width: 5px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.08); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |
| textarea { | |
| scrollbar-width: thin; | |
| scrollbar-color: rgba(255, 255, 255, 0.08) transparent; | |
| } | |
| /* ── Audio Element Styling ── */ | |
| audio { | |
| filter: invert(1) hue-rotate(180deg) brightness(0.8); | |
| height: 32px; | |
| } | |
| audio::-webkit-media-controls-panel { | |
| background: transparent; | |
| } | |
| /* ── Selection ── */ | |
| ::selection { | |
| background: rgba(0, 242, 255, 0.3); | |
| color: #fff; | |
| } | |
| /* ── Animations ── */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(12px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideInLeft { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-16px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(16px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes pulseGlow { | |
| 0%, 100% { box-shadow: 0 0 5px rgba(0, 242, 255, 0.3); } | |
| 50% { box-shadow: 0 0 20px rgba(0, 242, 255, 0.6), 0 0 40px rgba(188, 0, 255, 0.3); } | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| .animate-fade-in-up { | |
| animation: fadeInUp 0.4s ease-out forwards; | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.3s ease-out forwards; | |
| } | |
| .animate-slide-left { | |
| animation: slideInLeft 0.3s ease-out forwards; | |
| } | |
| .animate-slide-right { | |
| animation: slideInRight 0.3s ease-out forwards; | |
| } | |
| .animate-pulse-glow { | |
| animation: pulseGlow 2s ease-in-out infinite; | |
| } | |
| .animate-spin { | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| /* ── Dynamic Viewport Height Support ── */ | |
| @supports (height: 100dvh) { | |
| .h-dvh { | |
| height: 100dvh; | |
| } | |
| } | |
| @supports not (height: 100dvh) { | |
| .h-dvh { | |
| height: 100vh; | |
| } | |
| } | |
| /* ── Message action buttons ── */ | |
| .msg-actions { | |
| opacity: 0; | |
| transition: opacity 0.2s ease-in-out; | |
| pointer-events: none; | |
| } | |
| .msg-group:hover .msg-actions { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| /* ── Tooltip ── */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip::after { | |
| content: attr(data-tip); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-4px); | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(8px); | |
| color: #e0e8f0; | |
| font-size: 11px; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.2s ease-in-out; | |
| } | |
| .tooltip:hover::after { | |
| opacity: 1; | |
| } | |
| /* ── Recording pulse ring ── */ | |
| .rec-ring { | |
| box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); | |
| animation: recPulse 1.2s ease-in-out infinite; | |
| } | |
| @keyframes recPulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } | |
| } | |
| /* ── Lang toggle switch ── */ | |
| .lang-toggle { | |
| background: rgba(255, 255, 255, 0.06); | |
| backdrop-filter: blur(8px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| transition: all 0.3s ease-in-out; | |
| cursor: pointer; | |
| } | |
| .lang-toggle:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: rgba(0, 242, 255, 0.3); | |
| } | |
| /* ── Context menu ── */ | |
| .context-menu { | |
| background: rgba(14, 22, 33, 0.9); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .context-menu-item { | |
| transition: all 0.15s ease-in-out; | |
| } | |
| .context-menu-item:hover { | |
| background: rgba(0, 242, 255, 0.08); | |
| } | |