Oronemu/game-marathon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix UI

Browse Source
This commit is contained in:
Oronemu
2025-12-17 14:53:56 +07:00
parent 332491454d
commit debdd66458
22 changed files with 853 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
frontend/src/index.css
View File

@@ -6,36 +6,36 @@
CSS Variables
======================================== */
:root {
/* Base colors */
--color-dark-950: #050508;
--color-dark-900: #0a0a0f;
--color-dark-800: #12121a;
--color-dark-700: #1a1a24;
--color-dark-600: #1e1e2e;
--color-dark-500: #2a2a3a;
/* Base colors - slightly warmer dark tones */
--color-dark-950: #08090d;
--color-dark-900: #0d0e14;
--color-dark-800: #14161e;
--color-dark-700: #1c1e28;
--color-dark-600: #252732;
--color-dark-500: #2e313d;
/* Neon cyan (primary) */
--color-neon-500: #00f0ff;
--color-neon-400: #22d3ee;
--color-neon-600: #00d4e4;
/* Soft cyan (primary) - gentler on eyes */
--color-neon-500: #22d3ee;
--color-neon-400: #67e8f9;
--color-neon-600: #06b6d4;
/* Purple accent */
--color-accent-500: #a855f7;
--color-accent-600: #9333ea;
--color-accent-700: #7c3aed;
/* Soft violet accent */
--color-accent-500: #8b5cf6;
--color-accent-600: #7c3aed;
--color-accent-700: #6d28d9;
/* Pink highlight */
--color-pink-500: #ec4899;
/* Soft pink highlight - used sparingly */
--color-pink-500: #f472b6;
/* Glow colors */
--glow-neon: 0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff;
--glow-neon-lg: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00f0ff, 0 0 60px #00f0ff;
--glow-purple: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 20px #a855f7;
--glow-pink: 0 0 5px #ec4899, 0 0 10px #ec4899, 0 0 20px #ec4899;
/* Glow colors - reduced intensity */
--glow-neon: 0 0 8px rgba(34, 211, 238, 0.4), 0 0 16px rgba(34, 211, 238, 0.2);
--glow-neon-lg: 0 0 12px rgba(34, 211, 238, 0.5), 0 0 24px rgba(34, 211, 238, 0.3);
--glow-purple: 0 0 8px rgba(139, 92, 246, 0.4), 0 0 16px rgba(139, 92, 246, 0.2);
--glow-pink: 0 0 8px rgba(244, 114, 182, 0.4), 0 0 16px rgba(244, 114, 182, 0.2);
/* Text glow */
--text-glow-neon: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #00f0ff;
--text-glow-purple: 0 0 10px #a855f7, 0 0 20px #a855f7, 0 0 30px #a855f7;
/* Text glow - subtle */
--text-glow-neon: 0 0 8px rgba(34, 211, 238, 0.5), 0 0 16px rgba(34, 211, 238, 0.25);
--text-glow-purple: 0 0 8px rgba(139, 92, 246, 0.5), 0 0 16px rgba(139, 92, 246, 0.25);
}
/* ========================================
@@ -49,8 +49,8 @@ body {
@apply bg-dark-900 text-gray-100 min-h-screen antialiased;
font-family: 'Inter', system-ui, sans-serif;
background-image:
linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
linear-gradient(rgba(34, 211, 238, 0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(34, 211, 238, 0.015) 1px, transparent 1px);
background-size: 50px 50px;
background-attachment: fixed;
}
@@ -69,16 +69,27 @@ body {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
/* Autofill styles - override browser defaults */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px #14161e inset !important;
-webkit-text-fill-color: #fff !important;
caret-color: #fff;
transition: background-color 5000s ease-in-out 0s;
}
/* ========================================
Selection Styles
======================================== */
::selection {
background: rgba(0, 240, 255, 0.3);
background: rgba(34, 211, 238, 0.25);
color: #fff;
}
::-moz-selection {
background: rgba(0, 240, 255, 0.3);
background: rgba(34, 211, 238, 0.25);
color: #fff;
}
@@ -151,14 +162,14 @@ body {
.glitch::before {
left: 2px;
text-shadow: -2px 0 #ff00ff;
text-shadow: -2px 0 rgba(139, 92, 246, 0.7);
clip: rect(44px, 450px, 56px, 0);
animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -2px 0 #00ffff, 2px 2px #ff00ff;
text-shadow: -2px 0 rgba(34, 211, 238, 0.7), 2px 2px rgba(139, 92, 246, 0.7);
clip: rect(44px, 450px, 56px, 0);
animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@@ -272,10 +283,10 @@ body {
@keyframes neon-pulse {
0%, 100% {
box-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff;
box-shadow: 0 0 6px rgba(34, 211, 238, 0.4), 0 0 12px rgba(34, 211, 238, 0.2);
}
50% {
box-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00f0ff, 0 0 60px #00f0ff;
box-shadow: 0 0 10px rgba(34, 211, 238, 0.5), 0 0 20px rgba(34, 211, 238, 0.3);
}
}
@@ -297,29 +308,29 @@ body {
}
.glass-neon {
background: rgba(18, 18, 26, 0.6);
background: rgba(20, 22, 30, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0, 240, 255, 0.2);
box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.05);
border: 1px solid rgba(34, 211, 238, 0.15);
box-shadow: inset 0 0 20px rgba(34, 211, 238, 0.03);
}
/* ========================================
Gradient Utilities
======================================== */
.gradient-neon {
background: linear-gradient(135deg, #00f0ff, #a855f7);
background: linear-gradient(135deg, #22d3ee, #8b5cf6);
}
.gradient-neon-text {
background: linear-gradient(135deg, #00f0ff, #a855f7);
background: linear-gradient(135deg, #22d3ee, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-pink-purple {
background: linear-gradient(135deg, #ec4899, #a855f7);
background: linear-gradient(135deg, #f472b6, #8b5cf6);
}
.gradient-dark {
@@ -337,7 +348,7 @@ body {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(90deg, #00f0ff, #a855f7, #ec4899, #00f0ff);
background: linear-gradient(90deg, #22d3ee, #8b5cf6, #f472b6, #22d3ee);
background-size: 300% 300%;
border-radius: 14px;
z-index: -1;
@@ -389,11 +400,11 @@ body {
.btn-primary {
@apply bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold;
box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
box-shadow: 0 0 8px rgba(34, 211, 238, 0.25);
}
.btn-primary:hover {
box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
box-shadow: 0 0 14px rgba(34, 211, 238, 0.4);
}
.btn-secondary {
@@ -416,7 +427,7 @@ body {
.btn-neon:hover {
@apply text-dark-900;
background: var(--color-neon-500);
box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
box-shadow: 0 0 14px rgba(34, 211, 238, 0.4);
}
/* Inputs */
@@ -426,7 +437,7 @@ body {
.input:focus {
@apply outline-none border-neon-500;
box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1), 0 0 10px rgba(0, 240, 255, 0.2);
box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1), 0 0 8px rgba(34, 211, 238, 0.15);
}
/* Cards */
@@ -436,7 +447,7 @@ body {
.card-glass {
@apply rounded-xl p-6;
background: rgba(18, 18, 26, 0.7);
background: rgba(20, 22, 30, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
@@ -448,8 +459,8 @@ body {
.card-hover:hover {
@apply -translate-y-1;
box-shadow: 0 10px 40px rgba(0, 240, 255, 0.1);
border-color: rgba(0, 240, 255, 0.3);
box-shadow: 0 10px 40px rgba(34, 211, 238, 0.08);
border-color: rgba(34, 211, 238, 0.25);
}
/* Links */
@@ -481,7 +492,7 @@ body {
.divider-glow {
@apply border-t border-neon-500/30;
box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
box-shadow: 0 0 8px rgba(34, 211, 238, 0.15);
}
}
@@ -501,7 +512,7 @@ body {
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
box-shadow: 0 0 14px rgba(34, 211, 238, 0.25);
}
.hover-border-glow {
@@ -509,8 +520,8 @@ body {
}
.hover-border-glow:hover {
border-color: rgba(0, 240, 255, 0.5);
box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
border-color: rgba(34, 211, 238, 0.4);
box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
}
/* Stagger children animations */