AliceDarkest
e26a0c059c
--danger lag farblich zu nah am orangen Akzent (v.a. Light-Mode: accent #d65116 vs danger #c61f2b). Jetzt kuehleres Crimson-Rose: dunkel #ff4d6d, hell #be123c -> klare Abgrenzung von Orange, weiterhin eindeutig Alarm-Rot. Erbt automatisch in alle Spiele-/Alert-States. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
206 lines
14 KiB
CSS
206 lines
14 KiB
CSS
/* ============================================================
|
||
MINDFLUX THEME – zentrale Design-Tokens + Komponenten
|
||
"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:#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:#ff4d6d;
|
||
--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:#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:#be123c;
|
||
--glow-s:rgba(214,81,22,.40); --glow-w:rgba(214,81,22,.12);
|
||
--g-soft:0 6px 18px var(--glow-w);
|
||
}
|
||
|
||
* { box-sizing:border-box; margin:0; padding:0; }
|
||
html,body { height:100%; }
|
||
body {
|
||
font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
|
||
background:var(--bg-glow), var(--bg); color:var(--text);
|
||
min-height:100vh; transition:background-color .35s ease,color .35s ease;
|
||
}
|
||
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) ===== */
|
||
.mf-shell { display:grid; grid-template-columns:264px 1fr 332px; grid-template-rows:auto 1fr; min-height:100vh; }
|
||
.mf-shell.no-right { grid-template-columns:264px 1fr; }
|
||
.mf-sidebar { grid-column:1; grid-row:1 / 3; background:var(--panel); border-right:1px solid var(--border); padding:1.2rem 1rem; display:flex; flex-direction:column; gap:1.1rem; }
|
||
.mf-topbar { grid-column:2 / 4; grid-row:1; display:flex; align-items:flex-start; gap:1rem; padding:1.4rem 1.6rem 0; }
|
||
.mf-shell.no-right .mf-topbar { grid-column:2; }
|
||
.mf-main { grid-column:2; grid-row:2; padding:1.3rem 1.2rem 1.6rem 1.6rem; min-width:0; }
|
||
.mf-rightbar { grid-column:3; grid-row:2; padding:1.3rem 1.6rem 1.6rem 0; display:flex; flex-direction:column; gap:1rem; }
|
||
|
||
/* ===== Logo ===== */
|
||
.mf-logo { display:flex; align-items:center; gap:.6rem; padding:.2rem .3rem .4rem; text-decoration:none; }
|
||
.mf-logo .mark { width:38px; height:38px; flex:0 0 auto; 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 8px var(--glow-s)); }
|
||
.mf-logo .txt b { color:var(--accent); font-weight:800; letter-spacing:.13em; font-size:1.02rem; display:block; text-shadow:0 0 12px var(--glow-s); }
|
||
.mf-logo .txt span { color:var(--muted); font-size:.56rem; letter-spacing:.22em; }
|
||
|
||
/* ===== Sidebar-Navigation ===== */
|
||
.mf-nav { display:flex; flex-direction:column; gap:.25rem; }
|
||
.mf-nav a { display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; border-radius:11px; color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600; border:1px solid transparent; transition:all .18s ease; }
|
||
.mf-nav a:hover { color:var(--text); background:var(--surface-2); }
|
||
.mf-nav a.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:0 0 20px var(--glow-s); }
|
||
.mf-nav a.active svg { color:var(--accent-ink); }
|
||
.mf-nav svg { width:18px; height:18px; color:var(--accent); flex:0 0 auto; }
|
||
|
||
/* ===== Profil / Level / Streak ===== */
|
||
.mf-profile { border:1px solid var(--border); border-radius:13px; padding:.7rem; background:var(--surface); }
|
||
.mf-profile .row { display:flex; align-items:center; gap:.6rem; }
|
||
.mf-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink); font-weight:800; box-shadow:0 0 14px var(--glow-s); overflow:hidden; }
|
||
.mf-avatar img { width:100%; height:100%; object-fit:cover; }
|
||
.mf-profile b { color:var(--heading); font-size:.86rem; display:block; }
|
||
.mf-profile .role { color:var(--accent); font-size:.72rem; }
|
||
.mf-meta { font-size:.74rem; }
|
||
.mf-meta .lvl { color:var(--muted); letter-spacing:.04em; } .mf-meta .lvl b { color:var(--heading); }
|
||
.mf-meta .xp { color:var(--muted); margin:.2rem 0 .35rem; }
|
||
.mf-streak { display:flex; align-items:center; gap:.55rem; margin-top:.2rem; }
|
||
.mf-streak .fire { font-size:1.1rem; filter:drop-shadow(0 0 6px var(--glow-s)); }
|
||
.mf-streak b { color:var(--heading); font-size:.82rem; display:block; } .mf-streak small { color:var(--muted); }
|
||
.mf-brain { margin-top:auto; opacity:.55; display:flex; justify-content:center; filter:drop-shadow(0 0 10px var(--glow-s)); }
|
||
.mf-brain svg { width:150px; height:auto; }
|
||
|
||
/* ===== Topbar ===== */
|
||
.mf-hello h1 { color:var(--heading); font-size:1.85rem; font-weight:800; letter-spacing:-.01em; }
|
||
.mf-hello h1 .nm { color:var(--accent); text-shadow:0 0 16px var(--glow-s); }
|
||
.mf-hello p { color:var(--muted); margin-top:.35rem; font-size:.95rem; }
|
||
.mf-pulse { flex:1; min-width:0; display:flex; justify-content:center; align-items:center; }
|
||
.mf-pulse svg { width:200px; max-width:100%; filter:drop-shadow(0 0 7px var(--glow-s)); }
|
||
.mf-tools { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
|
||
.mf-iconbtn { width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:all .18s; }
|
||
.mf-iconbtn:hover { color:var(--accent); border-color:var(--border-accent); box-shadow:0 0 14px var(--glow-w); }
|
||
.mf-iconbtn svg { width:18px; height:18px; }
|
||
.mf-search { display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.5rem .8rem; color:var(--muted); }
|
||
.mf-search input { background:none; border:0; outline:none; color:var(--text); font-size:.86rem; width:130px; }
|
||
.mf-search svg { width:15px; height:15px; }
|
||
|
||
/* ===== Theme-Umschalter ===== */
|
||
.mf-theme { width:42px; height:38px; border-radius:50%; border:1px solid var(--border-accent); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); box-shadow:0 0 14px var(--glow-w); }
|
||
.mf-theme svg { width:18px; height:18px; }
|
||
|
||
/* ===== HUD-Spielkarten ===== */
|
||
.mf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
|
||
.mf-card { position:relative; display:flex; flex-direction:column; padding:1.15rem 1.2rem 1.1rem; background:var(--surface);
|
||
border:1px solid var(--border-accent); --n:18px;
|
||
clip-path:polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, 0 100%);
|
||
text-decoration:none; color:inherit; filter:drop-shadow(0 0 7px var(--glow-w)); transition:transform .16s ease, filter .25s ease, background-color .2s; }
|
||
.mf-card::before { content:""; position:absolute; left:10px; top:10px; width:14px; height:14px; border-left:2px solid var(--accent); border-top:2px solid var(--accent); opacity:.7; }
|
||
.mf-card:hover { transform:translateY(-4px); background:var(--surface-2); filter:drop-shadow(0 0 16px var(--glow-s)); }
|
||
.mf-card .ico { width:58px; height:58px; color:var(--accent); margin-bottom:.7rem; filter:drop-shadow(0 0 6px var(--glow-s)); }
|
||
.mf-card .ico svg { width:100%; height:100%; }
|
||
.mf-card h3 { color:var(--heading); font-size:1.06rem; font-weight:700; margin-bottom:.4rem; }
|
||
.mf-card p { color:var(--muted); font-size:.83rem; line-height:1.5; flex:1; }
|
||
.mf-play { margin-top:.9rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:800; letter-spacing:.08em; color:var(--accent); border:1px solid var(--border-accent); border-radius:8px; padding:.5rem .85rem; text-decoration:none; transition:all .18s; }
|
||
.mf-card:hover .mf-play { background:var(--accent); color:var(--accent-ink); box-shadow:0 0 16px var(--glow-s); }
|
||
.mf-play svg { width:14px; height:14px; }
|
||
|
||
/* ===== Panels / Widgets ===== */
|
||
.mf-panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.1rem; box-shadow:var(--g-soft); }
|
||
.mf-panel.accent { border-color:var(--border-accent); box-shadow:0 0 20px var(--glow-w); }
|
||
.mf-panel h4 { display:flex; align-items:center; gap:.5rem; color:var(--accent); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem; }
|
||
.mf-panel h4 svg { width:15px; height:15px; }
|
||
.mf-eyebrow { color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
|
||
.mf-bar { height:7px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
|
||
.mf-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px var(--glow-s); }
|
||
|
||
/* ===== Buttons ===== */
|
||
.mf-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-weight:800; font-size:.82rem; letter-spacing:.04em; border:0; border-radius:9px; padding:.6rem 1.1rem; cursor:pointer; text-decoration:none; background:var(--accent); color:var(--accent-ink); box-shadow:0 0 18px var(--glow-s); transition:all .18s; }
|
||
.mf-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
|
||
.mf-btn svg { width:15px; height:15px; }
|
||
.mf-btn.outline { background:transparent; color:var(--accent); border:1px solid var(--border-accent); box-shadow:none; }
|
||
.mf-btn.outline:hover { background:var(--surface-2); }
|
||
.mf-btn.ghost { background:var(--surface-2); color:var(--text); border:1px solid var(--border); box-shadow:none; }
|
||
.mf-btn.danger { background:var(--danger); color:#fff; box-shadow:none; }
|
||
|
||
/* ===== Formulare ===== */
|
||
.mf-field { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }
|
||
.mf-label { color:var(--accent); font-weight:700; font-size:.82rem; }
|
||
.mf-input, .mf-select, input.mf-input, select.mf-select, textarea.mf-input {
|
||
width:100%; padding:.65rem .8rem; border-radius:10px; border:1px solid var(--border);
|
||
background:var(--surface-2); color:var(--text); font-size:.95rem; font-family:inherit; }
|
||
.mf-input:focus, .mf-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--glow-w); }
|
||
.mf-input::placeholder { color:var(--muted); }
|
||
|
||
/* ===== Tabellen ===== */
|
||
.mf-table { width:100%; border-collapse:collapse; }
|
||
.mf-table th, .mf-table td { text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--border); font-size:.9rem; }
|
||
.mf-table th { color:var(--accent); text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; }
|
||
.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: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; }
|
||
.mf-cardbox { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border-accent); border-radius:18px; padding:2rem; box-shadow:0 0 30px var(--glow-w); }
|
||
.mf-container { max-width:1000px; margin:0 auto; padding:1.5rem; }
|
||
.mf-page-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
|
||
.mf-back { color:var(--accent); text-decoration:none; font-weight:700; font-size:.88rem; }
|
||
|
||
/* schwebender Theme-Umschalter für Seiten ohne Topbar */
|
||
.mf-theme-float { position:fixed; top:16px; right:16px; z-index:1000; }
|
||
|
||
/* ===== Fußzeile (Support / AGB / Impressum …) ===== */
|
||
.mf-footer {
|
||
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
|
||
gap:.35rem 1rem; padding:1.1rem 1.5rem;
|
||
border-top:1px solid var(--border); background:var(--panel);
|
||
font-size:.82rem; color:var(--muted);
|
||
}
|
||
.mf-footer a { color:var(--muted); text-decoration:none; position:relative; }
|
||
.mf-footer a:hover { color:var(--accent); }
|
||
.mf-footer a + a::before { content:"·"; position:absolute; left:-.6rem; color:var(--border); }
|
||
|
||
/* ===== Mobile-Nav (Off-Canvas-Drawer; Button/Backdrop per theme.js injiziert) ===== */
|
||
.mf-burger { display:none; position:fixed; top:.7rem; left:.7rem; z-index:1300; width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); color:var(--accent); align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 14px var(--glow-w); }
|
||
.mf-burger svg { width:20px; height:20px; }
|
||
.mf-nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:1100; }
|
||
body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
|
||
|
||
@media (max-width:1180px){ .mf-shell{grid-template-columns:240px 1fr;} .mf-rightbar{display:none;} .mf-topbar{grid-column:2;} .mf-main{grid-column:2;} }
|
||
|
||
@media (max-width:820px){
|
||
/* Shell stapelt; Sidebar wird zum Off-Canvas-Drawer */
|
||
.mf-shell, .mf-shell.no-right { display:block; }
|
||
.mf-topbar { padding:1.05rem 1rem 0 3.7rem; flex-wrap:wrap; gap:.7rem; }
|
||
.mf-main { padding:1.1rem 1rem 1.4rem; }
|
||
.mf-rightbar { padding:0 1rem 1.4rem; }
|
||
.mf-grid { grid-template-columns:repeat(2,1fr); }
|
||
.mf-pulse, .mf-search { display:none; }
|
||
.mf-hello h1 { font-size:1.4rem; }
|
||
.mf-tools { margin-left:auto; }
|
||
|
||
.mf-sidebar {
|
||
position:fixed; top:0; left:0; height:100dvh; width:min(284px,82vw); z-index:1200;
|
||
transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto;
|
||
box-shadow:0 18px 50px rgba(0,0,0,.55);
|
||
}
|
||
body.mf-nav-open .mf-sidebar { transform:translateX(0); }
|
||
.mf-burger { display:inline-flex; }
|
||
|
||
/* breite Tabellen horizontal scrollbar statt überlaufend */
|
||
.mf-table { display:block; overflow-x:auto; white-space:nowrap; }
|
||
}
|
||
|
||
@media (max-width:560px){ .mf-grid{grid-template-columns:1fr;} }
|