diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css index d94a25e..fe77182 100644 --- a/frontend/src/styles/globals.css +++ b/frontend/src/styles/globals.css @@ -2,11 +2,12 @@ color-scheme: dark; --bg: #080b1a; --bg-panel: #111633; - --accent: #6c5ce7; - --accent-light: #a29bfe; + --accent: #00AEEF; + --accent-light: #6ACFF6; + --accent-dark: #005dac; --text: #f5f6fa; --text-muted: #b2bec3; - --success: #00b894; + --success: #00B894; --error: #ff7675; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } @@ -14,9 +15,11 @@ body { margin: 0; padding: 0; - background: radial-gradient(circle at 20% 20%, rgba(108, 92, 231, 0.2), transparent), - radial-gradient(circle at 80% 0%, rgba(0, 184, 148, 0.2), transparent), - var(--bg); + background: radial-gradient(circle at 20% 30%, rgba(106, 207, 246, 0.15), transparent 40%), + radial-gradient(circle at 80% 20%, rgba(0, 174, 239, 0.1), transparent 30%), + radial-gradient(circle at 40% 80%, rgba(0, 93, 172, 0.08), transparent 35%), + linear-gradient(135deg, #1a2a75 0%, #004a8c 50%, #1a2a75 100%), + var(--bg); color: var(--text); min-height: 100vh; position: relative; @@ -50,7 +53,7 @@ main { .card { background: rgba(17, 22, 51, 0.85); - border: 1px solid rgba(162, 155, 254, 0.2); + border: 1px solid rgba(106, 207, 246, 0.2); border-radius: 16px; padding: 1.5rem; backdrop-filter: blur(10px); @@ -59,7 +62,7 @@ main { .admin-form { display: grid; - gap: 1rem; + gap: 1.5rem; } .admin-form label { @@ -67,17 +70,28 @@ main { flex-direction: column; gap: 0.5rem; font-size: 0.9rem; + color: var(--accent-light); } .admin-form input, .admin-form textarea, .admin-form select { border-radius: 12px; - border: 1px solid rgba(162, 155, 254, 0.3); + border: 1px solid rgba(106, 207, 246, 0.3); background: rgba(8, 11, 26, 0.6); padding: 0.75rem; color: var(--text); width: 100%; + font-family: inherit; + transition: all 0.3s ease; +} + +.admin-form input:focus, +.admin-form textarea:focus, +.admin-form select:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2); } .admin-form textarea { @@ -89,6 +103,16 @@ main { flex-direction: row; align-items: center; gap: 0.5rem; + cursor: pointer; +} + +.admin-form .checkbox input[type="checkbox"] { + width: auto; + accent-color: var(--accent); +} + +.admin-form .checkbox span { + color: var(--text); } .grid { @@ -98,36 +122,86 @@ main { } .badge { - background: rgba(162, 155, 254, 0.15); + background: rgba(106, 207, 246, 0.15); border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; color: var(--accent-light); text-transform: uppercase; letter-spacing: 0.08em; + display: inline-block; + border: 1px solid rgba(106, 207, 246, 0.2); +} + +.badge.success { + background: rgba(0, 184, 148, 0.15); + color: var(--success); + border-color: rgba(0, 184, 148, 0.3); +} + +.badge.error { + background: rgba(255, 118, 117, 0.15); + color: var(--error); + border-color: rgba(255, 118, 117, 0.3); } .primary { padding: 0.75rem 1.5rem; border-radius: 12px; border: none; - background: linear-gradient(135deg, var(--accent), #00b894); + background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: white; font-weight: 600; cursor: pointer; + font-family: inherit; + transition: all 0.3s ease; +} + +.primary:hover:not(:disabled) { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(0, 174, 239, 0.3); } .primary:disabled { opacity: 0.4; cursor: not-allowed; + transform: none !important; + box-shadow: none !important; } .secondary { padding: 0.75rem 1.5rem; border-radius: 12px; - border: 1px solid rgba(162, 155, 254, 0.4); + border: 1px solid rgba(106, 207, 246, 0.4); background: transparent; color: var(--text-muted); font-weight: 500; cursor: pointer; + font-family: inherit; + transition: all 0.3s ease; +} + +.secondary:hover { + border-color: var(--accent-light); + color: var(--accent-light); + background: rgba(106, 207, 246, 0.1); +} + +.alert { + padding: 1rem; + border-radius: 12px; + margin: 1rem 0; + border: 1px solid; +} + +.alert.success { + background: rgba(0, 184, 148, 0.1); + border-color: rgba(0, 184, 148, 0.3); + color: var(--success); +} + +.alert.error { + background: rgba(255, 118, 117, 0.1); + border-color: rgba(255, 118, 117, 0.3); + color: var(--error); }