consultoria-as
43021b9c3c
- Backend: FastAPI + Python-SocketIO + SQLAlchemy - Models for categories, questions, game sessions, events - AI services for answer validation and question generation (Claude) - Room management with Redis - Game logic with stealing mechanics - Admin API for question management - Frontend: React + Vite + TypeScript + Tailwind - 5 visual themes (DRRR, Retro, Minimal, RGB, Anime 90s) - Real-time game with Socket.IO - Achievement system - Replay functionality - Sound effects per theme - Docker Compose for deployment - Design documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
121 lines
2.7 KiB
CSS
121 lines
2.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Base styles */
|
|
:root {
|
|
--color-bg: #0a0a0a;
|
|
--color-primary: #FFE135;
|
|
--color-secondary: #00FFFF;
|
|
--color-accent: #FF00FF;
|
|
--color-text: #ffffff;
|
|
--color-text-muted: #888888;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-primary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Theme transitions */
|
|
* {
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
/* Utility classes */
|
|
.text-shadow-neon {
|
|
text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
|
|
}
|
|
|
|
.border-neon {
|
|
box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, inset 0 0 5px currentColor;
|
|
}
|
|
|
|
/* CRT scanline effect for retro theme */
|
|
.crt-scanlines::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
transparent 50%,
|
|
rgba(0, 0, 0, 0.1) 50%
|
|
);
|
|
background-size: 100% 4px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Glitch effect for DRRR theme */
|
|
.glitch-text {
|
|
position: relative;
|
|
}
|
|
|
|
.glitch-text::before,
|
|
.glitch-text::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.glitch-text::before {
|
|
animation: glitch-1 0.3s infinite;
|
|
color: var(--color-secondary);
|
|
z-index: -1;
|
|
}
|
|
|
|
.glitch-text::after {
|
|
animation: glitch-2 0.3s infinite;
|
|
color: var(--color-accent);
|
|
z-index: -2;
|
|
}
|
|
|
|
@keyframes glitch-1 {
|
|
0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
|
|
20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, -2px); }
|
|
40% { clip-path: inset(40% 0 40% 0); transform: translate(2px, 2px); }
|
|
60% { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 2px); }
|
|
80% { clip-path: inset(80% 0 0% 0); transform: translate(2px, -2px); }
|
|
}
|
|
|
|
@keyframes glitch-2 {
|
|
0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
|
|
20% { clip-path: inset(60% 0 20% 0); transform: translate(2px, 2px); }
|
|
40% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, -2px); }
|
|
60% { clip-path: inset(80% 0 0% 0); transform: translate(2px, -2px); }
|
|
80% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); }
|
|
}
|
|
|
|
/* Sparkle effect for anime theme */
|
|
.sparkle::before {
|
|
content: '✦';
|
|
position: absolute;
|
|
animation: sparkle-float 2s infinite;
|
|
}
|
|
|
|
@keyframes sparkle-float {
|
|
0%, 100% { opacity: 0; transform: translateY(0) scale(0); }
|
|
50% { opacity: 1; transform: translateY(-20px) scale(1); }
|
|
}
|