| @tailwind base; |
| @tailwind components; |
| @tailwind utilities; |
|
|
| :root { |
| --foreground-rgb: 0, 0, 0; |
| --background-start-rgb: 255, 255, 255; |
| --background-end-rgb: 255, 255, 255; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| :root { |
| --foreground-rgb: 255, 255, 255; |
| --background-start-rgb: 30, 30, 30; |
| --background-end-rgb: 30, 30, 30; |
| } |
| } |
|
|
| body { |
| color: rgb(var(--foreground-rgb)); |
| background: linear-gradient( |
| to bottom, |
| transparent, |
| rgb(var(--background-end-rgb)) |
| ) |
| rgb(var(--background-start-rgb)); |
| min-height: 100vh; |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
|
|
| |
| .canvas-draw { |
| cursor: crosshair; |
| } |
|
|
| .canvas-eraser { |
| cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 12 12, auto; |
| } |
|
|
| |
| @keyframes float-up { |
| 0% { |
| opacity: 1; |
| transform: translateY(0) scale(1); |
| } |
| 100% { |
| opacity: 0; |
| transform: translateY(-100px) scale(1.5); |
| } |
| } |
|
|
| .reaction-float { |
| animation: float-up 2s ease-out forwards; |
| } |
|
|
| |
| @keyframes slide-in { |
| from { |
| opacity: 0; |
| transform: translateX(-20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
|
|
| .chat-message { |
| animation: slide-in 0.3s ease-out; |
| } |
|
|
| |
| @keyframes grow-bar { |
| from { |
| width: 0; |
| } |
| } |
|
|
| .poll-bar { |
| animation: grow-bar 0.5s ease-out; |
| } |
|
|
| |
| .doubt-new { |
| animation: pulse 2s infinite; |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { |
| box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); |
| } |
| 50% { |
| box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); |
| } |
| } |
|
|
| |
| .status-connected { |
| background-color: #22c55e; |
| box-shadow: 0 0 8px #22c55e; |
| } |
|
|
| .status-disconnected { |
| background-color: #ef4444; |
| box-shadow: 0 0 8px #ef4444; |
| } |
|
|
| .status-connecting { |
| background-color: #f59e0b; |
| box-shadow: 0 0 8px #f59e0b; |
| animation: blink 1s infinite; |
| } |
|
|
| @keyframes blink { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
|
|
