AliceDarkest
bf27c9ccdc
Das Overlay nutzt im Dark-Mode dunkle Surface-Toene mit Glow. Im Light-Mode sind diese weiss -> das rechte Panel verschwand (weiss auf weiss). Per [data-theme="light"]-Overrides bekommt es jetzt ein kraeftiges Orange-Panel (accent-2 -> accent) mit weissem Text, Emblem und Ghost-Button. Dark-Mode bleibt unveraendert. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
144 lines
7.6 KiB
CSS
144 lines
7.6 KiB
CSS
/* Auth (Login/Signup) – kombiniertes Dual-Panel mit Neon-Buttons.
|
||
Bewusst als statische CSS-Datei: enthält @property mit '<angle>',
|
||
was im Thymeleaf-Inline-Style als HTML-Tag fehlinterpretiert würde. */
|
||
|
||
/* Rotierender Winkel für den Conic-Gradient-Glow (Bild 1) */
|
||
@property --mf-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
|
||
|
||
.auth-stage { width:100%; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
|
||
|
||
/* ---- Dual-Panel-Container (Bild 2) ---- */
|
||
.auth-container {
|
||
position:relative; width:100%; max-width:840px; min-height:560px;
|
||
background:var(--surface); border:1px solid var(--border-accent);
|
||
border-radius:22px; box-shadow:0 0 44px var(--glow-w); overflow:hidden;
|
||
}
|
||
.form-box {
|
||
position:absolute; top:0; height:100%; width:50%;
|
||
display:flex; align-items:center; justify-content:center;
|
||
padding:2.4rem 2.6rem; transition:transform .65s ease-in-out, opacity .65s ease-in-out;
|
||
}
|
||
.form-box .inner { width:100%; max-width:320px; }
|
||
.form-box.login { left:0; z-index:2; }
|
||
.form-box.signup { left:0; opacity:0; z-index:1; }
|
||
|
||
.auth-container.active .form-box.login { transform:translateX(100%); opacity:0; z-index:1; }
|
||
.auth-container.active .form-box.signup { transform:translateX(100%); opacity:1; z-index:5; }
|
||
|
||
/* ---- Überschiebendes Gradient-Overlay ---- */
|
||
.overlay-container {
|
||
position:absolute; top:0; left:50%; width:50%; height:100%;
|
||
overflow:hidden; z-index:100; transition:transform .65s ease-in-out;
|
||
box-shadow: -1px 0 0 var(--border-accent), -26px 0 55px -30px var(--glow-s);
|
||
}
|
||
.auth-container.active .overlay-container { transform:translateX(-100%); }
|
||
.overlay {
|
||
position:relative; left:-100%; width:200%; height:100%; transform:translateX(0);
|
||
transition:transform .65s ease-in-out;
|
||
background:
|
||
radial-gradient(540px 380px at 70% 22%, var(--glow-s), transparent 60%),
|
||
radial-gradient(420px 300px at 20% 90%, var(--glow-w), transparent 65%),
|
||
linear-gradient(150deg, var(--surface-2), var(--surface));
|
||
}
|
||
.auth-container.active .overlay { transform:translateX(50%); }
|
||
.overlay-panel {
|
||
position:absolute; top:0; height:100%; width:50%;
|
||
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
||
text-align:center; padding:0 2.4rem; color:var(--text);
|
||
transition:transform .65s ease-in-out;
|
||
}
|
||
.overlay-left { transform:translateX(-18%); }
|
||
.auth-container.active .overlay-left { transform:translateX(0); }
|
||
.overlay-right { right:0; transform:translateX(0); }
|
||
.auth-container.active .overlay-right { transform:translateX(18%); }
|
||
|
||
.overlay-panel .o-emblem {
|
||
width:56px; height:56px; background:var(--accent); margin-bottom:1rem;
|
||
-webkit-mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
|
||
mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
|
||
filter:drop-shadow(0 0 12px var(--glow-s));
|
||
}
|
||
.overlay-panel h3 { color:var(--heading); font-size:1.5rem; font-weight:800; margin-bottom:.6rem; letter-spacing:.01em; text-shadow:0 0 18px var(--glow-w); }
|
||
.overlay-panel p { color:var(--text); font-size:.9rem; line-height:1.65; margin-bottom:1.6rem; max-width:280px; }
|
||
|
||
/* ---- Formularkopf ---- */
|
||
.auth-head { text-align:center; margin-bottom:1.4rem; }
|
||
.auth-head .mark {
|
||
width:52px; height:52px; margin:0 auto .55rem; background:var(--accent);
|
||
-webkit-mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
|
||
mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
|
||
filter:drop-shadow(0 0 12px var(--glow-s));
|
||
}
|
||
.auth-head b { display:block; color:var(--accent); font-weight:800; letter-spacing:.16em; font-size:1.05rem; text-shadow:0 0 14px var(--glow-s); }
|
||
.auth-head h2 { color:var(--heading); font-size:1.35rem; font-weight:800; margin-top:.5rem; }
|
||
.auth-head .sub { color:var(--muted); font-size:.82rem; margin-top:.2rem; }
|
||
|
||
.mf-alert { padding:.6rem .8rem; border-radius:10px; font-size:.82rem; margin-bottom:.9rem; text-align:center; }
|
||
.mf-alert.err { color:var(--danger); border:1px solid var(--danger); background:rgba(255,95,107,.08); }
|
||
.mf-alert.ok { color:var(--accent); border:1px solid var(--border-accent); background:var(--surface-2); }
|
||
|
||
/* ---- Neon-Button mit Hover-Expand + rotierendem Conic-Glow (Bild 1) ---- */
|
||
.neon-btn {
|
||
position:relative; z-index:0; width:100%; margin-top:.4rem;
|
||
display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
|
||
padding:.85rem 1.3rem; border:0; border-radius:999px; cursor:pointer;
|
||
font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
|
||
color:var(--accent-ink); background:var(--accent); box-shadow:0 0 18px var(--glow-s);
|
||
transition:transform .3s ease, letter-spacing .3s ease, box-shadow .3s ease;
|
||
}
|
||
.neon-btn::before {
|
||
content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-1;
|
||
background:conic-gradient(from var(--mf-ang),
|
||
var(--accent), var(--accent-2), var(--accent), var(--accent-2), var(--accent));
|
||
filter:blur(9px); opacity:0; transition:opacity .35s ease;
|
||
animation:mf-spin 4s linear infinite;
|
||
}
|
||
.neon-btn:hover { transform:translateY(-2px); letter-spacing:.16em; box-shadow:0 0 28px var(--glow-s); }
|
||
.neon-btn:hover::before { opacity:.9; }
|
||
.neon-btn:focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; }
|
||
.neon-btn .lock { font-size:.95em; }
|
||
@keyframes mf-spin { to { --mf-ang:360deg; } }
|
||
|
||
/* Outline-Variante für die Overlay-Buttons (auf Gradient) */
|
||
.ghost-btn {
|
||
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
|
||
padding:.75rem 1.8rem; border-radius:999px; cursor:pointer; font-weight:800;
|
||
font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
|
||
background:transparent; color:var(--accent); border:2px solid var(--border-accent);
|
||
box-shadow:0 0 16px var(--glow-w);
|
||
transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
|
||
}
|
||
.ghost-btn:hover { transform:translateY(-2px); background:var(--surface-2); box-shadow:0 0 22px var(--glow-s); }
|
||
|
||
/* ---- Light-Mode: Overlay als kräftiges Orange-Panel mit weißem Text ----
|
||
(im Dark-Mode ist das Overlay ein dunkles Panel mit Glow; im Light-Mode
|
||
wären die Surface-Töne weiß -> Panel verschwände. Daher hier farbig.) */
|
||
[data-theme="light"] .overlay {
|
||
background:
|
||
radial-gradient(600px 340px at 28% 6%, rgba(255,255,255,.18), transparent 60%),
|
||
linear-gradient(150deg, var(--accent-2), var(--accent) 48%);
|
||
}
|
||
[data-theme="light"] .overlay-panel { color:#fff; }
|
||
[data-theme="light"] .overlay-panel h3 { color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.22); }
|
||
[data-theme="light"] .overlay-panel p { color:#fff; opacity:.96; }
|
||
[data-theme="light"] .overlay-panel .o-emblem { background:#fff; filter:drop-shadow(0 0 10px rgba(0,0,0,.25)); }
|
||
[data-theme="light"] .ghost-btn { color:#fff; border-color:rgba(255,255,255,.9); box-shadow:none; }
|
||
[data-theme="light"] .ghost-btn:hover { background:rgba(255,255,255,.18); box-shadow:none; }
|
||
|
||
.mobile-switch { display:none; text-align:center; margin-top:1.2rem; color:var(--muted); font-size:.84rem; }
|
||
.mobile-switch a { color:var(--accent); font-weight:700; text-decoration:none; cursor:pointer; }
|
||
|
||
/* ---- Responsiv: gestapelt, ohne Overlay ---- */
|
||
@media (max-width:760px) {
|
||
.auth-container { max-width:420px; min-height:auto; }
|
||
.overlay-container { display:none; }
|
||
.form-box {
|
||
position:relative; width:100%; padding:2rem 1.6rem;
|
||
transform:none !important; opacity:1 !important; transition:none;
|
||
}
|
||
.form-box.signup { display:none; }
|
||
.auth-container.active .form-box.login { display:none; }
|
||
.auth-container.active .form-box.signup { display:flex; }
|
||
.mobile-switch { display:block; }
|
||
}
|