mirror of
https://github.com/R0m1k3/Menu.git
synced 2026-10-11 17:28:28 +02:00
89 lines
2.9 KiB
CSS
89 lines
2.9 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
:root {
|
|
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Dark (default) */
|
|
--bg-from: #2c0a30;
|
|
--bg-mid: #5a0f28;
|
|
--bg-to: #8c1525;
|
|
|
|
--fg: #ffffff;
|
|
--fg-secondary: rgba(255, 255, 255, 0.5);
|
|
|
|
--card-bg: rgba(255, 255, 255, 0.09);
|
|
--card-border: rgba(255, 255, 255, 0.13);
|
|
--card-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.06) inset;
|
|
--card-hover-bg: rgba(255, 255, 255, 0.14);
|
|
--card-hover-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.10) inset;
|
|
}
|
|
|
|
[data-theme='light'] {
|
|
--bg-from: #e0c4ef;
|
|
--bg-mid: #e8b8cc;
|
|
--bg-to: #f0b8be;
|
|
|
|
--fg: #1c0a22;
|
|
--fg-secondary: rgba(28, 10, 34, 0.5);
|
|
|
|
--card-bg: rgba(255, 255, 255, 0.50);
|
|
--card-border: rgba(255, 255, 255, 0.85);
|
|
--card-shadow: 0 2px 12px rgba(120,30,60,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
|
|
--card-hover-bg: rgba(255, 255, 255, 0.70);
|
|
--card-hover-shadow: 0 16px 48px rgba(120,30,60,0.15), 0 1px 0 rgba(255,255,255,0.9) inset;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body { height: 100%; }
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
font-family: var(--font);
|
|
color: var(--fg);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow-x: hidden;
|
|
/* Multi-stop radial mesh gradient pour plus de profondeur */
|
|
background:
|
|
radial-gradient(ellipse at 10% 10%, rgba(120, 30, 180, 0.35) 0%, transparent 55%),
|
|
radial-gradient(ellipse at 90% 85%, rgba(160, 20, 40, 0.4) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 50% 50%, rgba(80, 10, 50, 0.6) 0%, transparent 80%),
|
|
linear-gradient(160deg, var(--bg-from) 0%, var(--bg-mid) 50%, var(--bg-to) 100%);
|
|
background-attachment: fixed;
|
|
transition: background var(--ease) 260ms;
|
|
}
|
|
|
|
a { text-decoration: none; color: inherit; }
|
|
button { cursor: pointer; border: none; outline: none; font-family: var(--font); }
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 10px; }
|
|
|
|
/* Inputs */
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="url"],
|
|
input[type="email"] {
|
|
width: 100%;
|
|
padding: 0.82rem 1rem;
|
|
background: rgba(255,255,255,0.07);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255,255,255,0.13);
|
|
border-radius: 12px;
|
|
color: var(--fg);
|
|
font-family: var(--font);
|
|
font-size: 0.92rem;
|
|
outline: none;
|
|
transition: all 240ms var(--ease);
|
|
}
|
|
input:focus {
|
|
border-color: rgba(255,255,255,0.45);
|
|
box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
|
|
background: rgba(255,255,255,0.11);
|
|
}
|
|
input::placeholder { color: var(--fg-secondary); }
|