Rechtstexte, FinalFlux-Überarbeitung, neue Login-Optik, Konto-Löschung-Fix, BTTF-Farbrelaunch
- Rechtsseiten: Impressum-Platzhalter + echte Nutzungsbedingungen/AGB, Datenschutz (DSGVO) und Richtlinien; LegalController/ImpressumController, Footer app-weit verlinkt, Seiten als permitAll freigegeben. - FinalFlux: 28 Themen / ~742 Fragen überarbeitet (plausible Distraktoren statt Dummy-Antworten, echte Erklärungen) + echte Lehrtexte je Seite; Netzwerktopologien mit Inline-SVG-Diagrammen (Stern/Bus/Ring/Mesh/Baum). - Login/Registrierung als kombiniertes Dual-Panel (Slide-Overlay + Neon-Hover- Button), ausgelagert nach auth.css; Register-Duplikat -> /?registerError. - Konto löschen repariert: @Transactional + Löschen von Spielständen, Achievements und Profilbild-Datei (DSGVO Art. 17). Impressum-Zurück-Link login-abhängig. - App-weiter Farb-Relaunch auf "Back to the Future"-Palette: Feuer-Amber primär + Flux-Blau sekundär, warmer Glow; Dark/Light bleiben. Spiele-Feedback ohne Grün: richtig = Blau + Haken, falsch = Rot + Kreuz (neue Tokens --success/--danger/--secondary). Legacy-Cyan in style.css auf Variablen. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
AliceDarkest
@@ -0,0 +1,128 @@
|
||||
/* 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); }
|
||||
|
||||
.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; }
|
||||
}
|
||||
@@ -84,6 +84,62 @@ body.finalflux-page {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.finalflux-page .merksatz {
|
||||
margin: 1rem 0 0;
|
||||
padding: 0.85rem 1rem;
|
||||
background: var(--surface-2);
|
||||
border-left: 4px solid var(--accent-2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.finalflux-page .merksatz strong {
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
/* ---- Topologie-Diagramme (Inline-SVG, theme-adaptiv) ---- */
|
||||
.topo-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin: 1.1rem 0 0.2rem;
|
||||
}
|
||||
.topo-figure {
|
||||
flex: 1 1 240px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 0.9rem 0.9rem 0.7rem;
|
||||
}
|
||||
.topo-figure svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
|
||||
.topo-figure figcaption { color: var(--muted); font-size: 0.82rem; margin-top: 0.5rem; line-height: 1.4; }
|
||||
.topo .link { stroke: var(--border-accent); stroke-width: 2; fill: none; }
|
||||
.topo .bus { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
|
||||
.topo .node { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
|
||||
.topo .hub { fill: var(--accent); stroke: none; }
|
||||
.topo .term { fill: var(--muted); }
|
||||
.topo .hlbl { fill: var(--accent-ink); font: 700 9px 'Segoe UI', Tahoma, sans-serif; text-anchor: middle; dominant-baseline: central; }
|
||||
|
||||
.finalflux-page table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.finalflux-page th,
|
||||
.finalflux-page td {
|
||||
text-align: left;
|
||||
padding: 0.55rem 0.7rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.finalflux-page th {
|
||||
color: var(--heading);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.finalflux-hero h2 {
|
||||
font-size: 2rem;
|
||||
margin: 0.4rem 0 1rem;
|
||||
@@ -163,12 +219,14 @@ body.finalflux-page {
|
||||
}
|
||||
|
||||
.fluxcheck-result.correct {
|
||||
color: #00ff88;
|
||||
color: var(--success);
|
||||
}
|
||||
.fluxcheck-result.correct::before { content: "\2713 "; font-weight: 800; }
|
||||
|
||||
.fluxcheck-result.wrong {
|
||||
color: #ff6b6b;
|
||||
color: var(--danger);
|
||||
}
|
||||
.fluxcheck-result.wrong::before { content: "\2717 "; font-weight: 800; }
|
||||
|
||||
.finalflux-test {
|
||||
background: var(--surface);
|
||||
|
||||
@@ -283,8 +283,8 @@ body.mm-body {
|
||||
.mm-card.matched { cursor: default; }
|
||||
|
||||
.mm-card.matched .mm-card-back {
|
||||
border-color: #00ff88;
|
||||
box-shadow: 0 0 14px rgba(0, 255, 136, 0.3);
|
||||
border-color: var(--success);
|
||||
box-shadow: 0 0 14px var(--success);
|
||||
animation: mm-pop 0.4s ease;
|
||||
}
|
||||
|
||||
@@ -295,8 +295,8 @@ body.mm-body {
|
||||
}
|
||||
|
||||
.mm-card.wrong .mm-card-back {
|
||||
border-color: #ff6b6b;
|
||||
box-shadow: 0 0 14px rgba(255, 107, 107, 0.3);
|
||||
border-color: var(--danger);
|
||||
box-shadow: 0 0 14px var(--danger);
|
||||
}
|
||||
|
||||
/* --- Ergebnis-Overlay --- */
|
||||
@@ -330,7 +330,7 @@ body.mm-body {
|
||||
.mm-result-score { font-size: 1.3rem; margin-bottom: 0.3rem; color: var(--text); }
|
||||
.mm-result-score strong { color: var(--accent); }
|
||||
.mm-result-detail { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.6rem; }
|
||||
.mm-result-highscore { color: #00ff88; font-weight: 800; margin-bottom: 1rem; }
|
||||
.mm-result-highscore { color: var(--accent); font-weight: 800; margin-bottom: 1rem; }
|
||||
.mm-result-highscore[hidden] { display: none; }
|
||||
|
||||
.mm-result-actions {
|
||||
|
||||
@@ -41,8 +41,8 @@
|
||||
/* === Body Hintergrund === */
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(145deg, #1f1f2e, #2c2c3d);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(145deg, var(--surface), var(--surface-2));
|
||||
color: var(--heading);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -55,10 +55,10 @@ header {
|
||||
margin: 2rem auto 1rem;
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
background-color: #000916;
|
||||
background-color: var(--panel);
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 8px 20px rgba(0, 229, 255, 0.15),
|
||||
0 8px 20px var(--glow-w),
|
||||
0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
transition: all 0.3s ease-in-out;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
@@ -66,7 +66,7 @@ header {
|
||||
|
||||
header:hover {
|
||||
box-shadow:
|
||||
0 10px 30px rgba(0, 229, 255, 0.25),
|
||||
0 10px 30px var(--glow-s),
|
||||
0 6px 16px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@@ -83,10 +83,10 @@ header img {
|
||||
|
||||
header p.slogan {
|
||||
font-style: italic;
|
||||
color: #00e5ff;
|
||||
color: var(--accent);
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
|
||||
text-shadow: 0 0 5px var(--glow-s);
|
||||
}
|
||||
|
||||
/* === Main Bereich === */
|
||||
@@ -111,7 +111,7 @@ main {
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 229, 255, 0.05),
|
||||
0 0 15px var(--glow-w),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
animation: fadeInUp 0.9s ease-out;
|
||||
@@ -125,7 +125,7 @@ main {
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 229, 255, 0.07),
|
||||
0 0 15px var(--glow-w),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
animation: fadeInUp 1s ease-out;
|
||||
@@ -133,7 +133,7 @@ main {
|
||||
|
||||
.login-box h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: #66d9ef;
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.login-box form {
|
||||
@@ -152,20 +152,20 @@ main {
|
||||
|
||||
/* === Input === */
|
||||
.login-box input {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--heading);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* === Button mit Glanz- und Licht-Effekt === */
|
||||
.login-box button {
|
||||
background-color: #00e5ff;
|
||||
background-color: var(--accent);
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.3s ease-in-out, transform 0.2s ease;
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.login-box button::before {
|
||||
@@ -186,22 +186,22 @@ main {
|
||||
}
|
||||
|
||||
.login-box button:hover {
|
||||
background-color: #4cc3dd;
|
||||
background-color: var(--accent-2);
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 15px rgba(0, 229, 255, 0.4), 0 0 30px rgba(0, 229, 255, 0.1) inset;
|
||||
box-shadow: 0 0 15px var(--glow-s), 0 0 30px var(--glow-w) inset;
|
||||
}
|
||||
|
||||
/* === Footer === */
|
||||
footer {
|
||||
background-color: #111122;
|
||||
background-color: var(--panel);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #aaa;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #66d9ef;
|
||||
color: var(--accent-2);
|
||||
text-decoration: none;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
@@ -235,10 +235,10 @@ footer a:hover {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: #888;
|
||||
background-color: var(--muted);
|
||||
transition: 0.4s;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
|
||||
box-shadow: 0 0 6px var(--glow-s);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -254,15 +254,15 @@ footer a:hover {
|
||||
width: 16px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: #fff;
|
||||
background-color: var(--heading);
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Bei aktiviertem Switch */
|
||||
input:checked + .slider {
|
||||
background-color: #00e5ff;
|
||||
color: #fff;
|
||||
background-color: var(--accent);
|
||||
color: var(--heading);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
@@ -285,26 +285,26 @@ input:checked + .slider:before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: #00e5ff;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
box-shadow:
|
||||
0 0 10px rgba(0, 229, 255, 0.1),
|
||||
0 0 10px var(--glow-w),
|
||||
0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.dashboard-tile:hover {
|
||||
background-color: rgba(0, 229, 255, 0.1);
|
||||
background-color: var(--glow-w);
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 6px 16px rgba(0, 229, 255, 0.2),
|
||||
0 0 20px rgba(0, 229, 255, 0.1) inset;
|
||||
0 6px 16px var(--glow-s),
|
||||
0 0 20px var(--glow-w) inset;
|
||||
}
|
||||
|
||||
.dashboard-tile span {
|
||||
color: #00e5ff;
|
||||
text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 5px var(--glow-s);
|
||||
}
|
||||
|
||||
/* === Profilbereich === */
|
||||
@@ -314,7 +314,7 @@ input:checked + .slider:before {
|
||||
background: rgba(0, 9, 22, 0.95);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);
|
||||
box-shadow: 0 0 20px var(--glow-w);
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
@@ -327,13 +327,13 @@ input:checked + .slider:before {
|
||||
|
||||
.profile-form label {
|
||||
font-weight: bold;
|
||||
color: #00e5ff;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.profile-form input {
|
||||
padding: 0.75rem;
|
||||
background-color: #1a1a2e;
|
||||
color: #fff;
|
||||
background-color: var(--surface-2);
|
||||
color: var(--heading);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
@@ -349,21 +349,21 @@ input:checked + .slider:before {
|
||||
}
|
||||
|
||||
.btn.save {
|
||||
background-color: #00e5ff;
|
||||
color: #00172e;
|
||||
background-color: var(--accent);
|
||||
color: var(--surface-2);
|
||||
}
|
||||
|
||||
.btn.save:hover {
|
||||
background-color: #4cc3dd;
|
||||
background-color: var(--accent-2);
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
background-color: #ff4d4d;
|
||||
background-color: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.danger:hover {
|
||||
background-color: #cc0000;
|
||||
background-color: var(--danger);
|
||||
}
|
||||
|
||||
/* Profilbild */
|
||||
@@ -383,48 +383,48 @@ input:checked + .slider:before {
|
||||
|
||||
.tab-nav .tab {
|
||||
padding: 0.6rem 1.2rem;
|
||||
background-color: rgba(0, 229, 255, 0.1);
|
||||
color: #00e5ff;
|
||||
background-color: var(--glow-w);
|
||||
color: var(--accent);
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 2px 6px rgba(0, 229, 255, 0.1);
|
||||
box-shadow: 0 2px 6px var(--glow-w);
|
||||
}
|
||||
|
||||
.tab-nav .tab:hover {
|
||||
background-color: rgba(0, 229, 255, 0.25);
|
||||
background-color: var(--glow-s);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(0, 229, 255, 0.2);
|
||||
box-shadow: 0 4px 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.tab-nav .tab.active {
|
||||
background-color: #00e5ff;
|
||||
background-color: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 1rem;
|
||||
margin: 1rem auto;
|
||||
max-width: 600px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 1rem;
|
||||
margin: 1rem auto;
|
||||
max-width: 600px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
opacity: 1;
|
||||
transition: opacity 1.5s ease-out;
|
||||
}
|
||||
@@ -433,13 +433,13 @@ input:checked + .slider:before {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: #00e5ff;
|
||||
color: #0d1117;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
@@ -449,20 +449,20 @@ input:checked + .slider:before {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #00aacc;
|
||||
background-color: var(--accent-2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@@ -478,21 +478,21 @@ input:checked + .slider:before {
|
||||
<style>
|
||||
/* Admin-Button Stil */
|
||||
.admin-btn {
|
||||
background-color: #00e5ff;
|
||||
color: #0d1117;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.admin-btn:hover {
|
||||
background-color: #4cc3dd;
|
||||
box-shadow: 0 0 15px rgba(0, 229, 255, 0.6), 0 0 25px rgba(0, 229, 255, 0.4);
|
||||
background-color: var(--accent-2);
|
||||
box-shadow: 0 0 15px var(--glow-s), 0 0 25px var(--glow-s);
|
||||
transform: scale(1.05);
|
||||
color: #00172e;
|
||||
color: var(--surface-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -505,20 +505,20 @@ input:checked + .slider:before {
|
||||
|
||||
.admin-card {
|
||||
display: block;
|
||||
background-color: rgba(0, 229, 255, 0.1);
|
||||
background-color: var(--glow-w);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
color: #00e5ff;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 229, 255, 0.05);
|
||||
box-shadow: 0 4px 12px var(--glow-w);
|
||||
}
|
||||
|
||||
.admin-card:hover {
|
||||
background-color: rgba(0, 229, 255, 0.25);
|
||||
background-color: var(--glow-s);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px rgba(0, 229, 255, 0.15);
|
||||
box-shadow: 0 6px 18px var(--glow-w);
|
||||
}
|
||||
|
||||
.admin-card.disabled {
|
||||
@@ -535,17 +535,17 @@ input:checked + .slider:before {
|
||||
display: inline-block;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
background-color: #00e5ff;
|
||||
color: #0d1117;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 4px 10px rgba(0, 229, 255, 0.2);
|
||||
box-shadow: 0 4px 10px var(--glow-s);
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-create:hover {
|
||||
background-color: #00bcd4;
|
||||
background-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@@ -178,8 +178,8 @@ body.tt-body {
|
||||
cursor: default;
|
||||
font-size: clamp(1.2rem, 3vw, 2rem);
|
||||
}
|
||||
.tt-tile.answered.correct { border-color: #00ff88; color: #00ff88; background: rgba(0, 255, 136, 0.08); }
|
||||
.tt-tile.answered.wrong { border-color: #ff6b6b; color: #ff6b6b; background: rgba(255, 107, 107, 0.08); }
|
||||
.tt-tile.answered.correct { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
|
||||
.tt-tile.answered.wrong { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
|
||||
|
||||
/* --- Overlays --- */
|
||||
.tt-overlay {
|
||||
@@ -237,12 +237,14 @@ body.tt-body {
|
||||
}
|
||||
.tt-answer:hover:not(:disabled) { border-color: var(--accent); background: var(--surface); }
|
||||
.tt-answer:disabled { cursor: default; }
|
||||
.tt-answer.correct { border-color: #00ff88; background: rgba(0, 255, 136, 0.12); color: #b8ffdc; }
|
||||
.tt-answer.wrong { border-color: #ff6b6b; background: rgba(255, 107, 107, 0.12); color: #ffd0d0; }
|
||||
.tt-answer.correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
|
||||
.tt-answer.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
|
||||
|
||||
.tt-q-feedback { margin-top: 0.9rem; font-weight: 700; min-height: 1.2rem; }
|
||||
.tt-q-feedback.correct { color: #00ff88; }
|
||||
.tt-q-feedback.wrong { color: #ff6b6b; }
|
||||
.tt-q-feedback.correct { color: var(--success); }
|
||||
.tt-q-feedback.correct::before { content: "\2713 "; font-weight: 800; }
|
||||
.tt-q-feedback.wrong { color: var(--danger); }
|
||||
.tt-q-feedback.wrong::before { content: "\2717 "; font-weight: 800; }
|
||||
|
||||
.tt-q-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
|
||||
|
||||
@@ -251,7 +253,7 @@ body.tt-body {
|
||||
.tt-result-score { font-size: 1.4rem; margin-bottom: 0.4rem; color: var(--text); }
|
||||
.tt-result-score strong { color: var(--accent); }
|
||||
.tt-result-detail { color: var(--muted); margin-bottom: 0.6rem; }
|
||||
.tt-result-high { color: #00ff88; font-weight: 800; margin-bottom: 1rem; }
|
||||
.tt-result-high { color: var(--accent); font-weight: 800; margin-bottom: 1rem; }
|
||||
.tt-result-high[hidden] { display: none; }
|
||||
.tt-result-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1rem; }
|
||||
|
||||
|
||||
@@ -1,25 +1,31 @@
|
||||
/* ============================================================
|
||||
MINDFLUX THEME – zentrale Design-Tokens + Komponenten
|
||||
Dark = Grün-Neon | Light = heller Grund + Magenta-Glow
|
||||
"Back to the Future"-Palette
|
||||
Dark = Feuer-Amber + Bernstein-Glow | Light = warmes Weiß + Orange
|
||||
Zweitakzent: Flux-Blau (#2D9CCE) | richtig = Blau, falsch = Rot
|
||||
Umschaltung über <html data-theme="dark|light"> (siehe theme.js)
|
||||
============================================================ */
|
||||
|
||||
:root, [data-theme="dark"] {
|
||||
--bg:#06090a; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(43,217,106,.10), transparent 60%);
|
||||
--panel:#0c1110; --panel-2:#0e1513; --surface:#0b100e; --surface-2:#101713;
|
||||
--border:#1a2520; --line:#16201b;
|
||||
--border-accent:rgba(43,217,106,.45); --accent:#2bd96a; --accent-2:#6ef58f; --accent-ink:#04140a;
|
||||
--text:#d7e0d9; --muted:#717c74; --heading:#ffffff; --danger:#ff5f6b;
|
||||
--glow-s:rgba(43,217,106,.55); --glow-w:rgba(43,217,106,.16);
|
||||
--bg:#0a0806; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(240,168,26,.10), transparent 60%);
|
||||
--panel:#13100b; --panel-2:#171209; --surface:#120f0a; --surface-2:#1b1610;
|
||||
--border:#2a2117; --line:#221b12;
|
||||
--border-accent:rgba(240,168,26,.45); --accent:#f0a81a; --accent-2:#f7dc11; --accent-ink:#1c1100;
|
||||
--secondary:#2d9cce; --secondary-2:#5cc4e8;
|
||||
--text:#ece3d2; --muted:#8c8170; --heading:#ffffff;
|
||||
--success:#2d9cce; --danger:#ff5a5f;
|
||||
--glow-s:rgba(240,168,26,.55); --glow-w:rgba(240,168,26,.16);
|
||||
--g-soft:0 0 18px var(--glow-w);
|
||||
}
|
||||
[data-theme="light"] {
|
||||
--bg:#f4eef3; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(209,29,146,.10), transparent 60%);
|
||||
--panel:#ffffff; --panel-2:#fbf6fa; --surface:#ffffff; --surface-2:#faf4f9;
|
||||
--border:#e9dee8; --line:#efe6ee;
|
||||
--border-accent:rgba(209,29,146,.40); --accent:#d11d92; --accent-2:#ff5bc0; --accent-ink:#ffffff;
|
||||
--text:#3c2c39; --muted:#8a7d88; --heading:#1b1019; --danger:#d12942;
|
||||
--glow-s:rgba(209,29,146,.40); --glow-w:rgba(209,29,146,.12);
|
||||
--bg:#fbf6ec; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(214,81,22,.10), transparent 60%);
|
||||
--panel:#ffffff; --panel-2:#fdf7ea; --surface:#ffffff; --surface-2:#fbf4e6;
|
||||
--border:#ece1cf; --line:#f1e8d8;
|
||||
--border-accent:rgba(214,81,22,.40); --accent:#d65116; --accent-2:#e4801d; --accent-ink:#ffffff;
|
||||
--secondary:#1f86b8; --secondary-2:#2d9cce;
|
||||
--text:#33271c; --muted:#8a7d6c; --heading:#241a12;
|
||||
--success:#1f86b8; --danger:#c61f2b;
|
||||
--glow-s:rgba(214,81,22,.40); --glow-w:rgba(214,81,22,.12);
|
||||
--g-soft:0 6px 18px var(--glow-w);
|
||||
}
|
||||
|
||||
@@ -30,7 +36,7 @@ body {
|
||||
background:var(--bg-glow), var(--bg); color:var(--text);
|
||||
min-height:100vh; transition:background-color .35s ease,color .35s ease;
|
||||
}
|
||||
a { color:var(--accent); }
|
||||
a { color:var(--secondary); }
|
||||
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
|
||||
|
||||
/* ===== App-Shell (Sidebar | Mitte | rechte Spalte) ===== */
|
||||
@@ -142,7 +148,7 @@ a { color:var(--accent); }
|
||||
.mf-table tr:hover td { background:var(--surface-2); }
|
||||
|
||||
/* ===== Badges ===== */
|
||||
.mf-badge { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; padding:.18rem .5rem; border-radius:7px; background:var(--accent-dim,rgba(43,217,106,.12)); color:var(--accent); border:1px solid var(--border-accent); }
|
||||
.mf-badge { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; padding:.18rem .5rem; border-radius:7px; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); border:1px solid var(--border-accent); }
|
||||
|
||||
/* ===== Standalone-Karte (Login/Auth, einzelne Inhaltsseiten) ===== */
|
||||
.mf-center { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem; }
|
||||
|
||||
Reference in New Issue
Block a user