Sysnaptik/mindflux
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard-Topbar und FluxTimer-Icon verfeinern
mindflux-ci / build (push) Successful in 21s
Details

Browse Source
This commit is contained in:
AliceDarkest
2026-07-12 22:09:18 +02:00
parent 02975ebb25
commit 6195a11501
5 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/fluxtimer.css
+6 -3
View File
@@ -1,7 +1,10 @@
/* FluxTimer – Zeitschaltkreis-Optik, rein clientseitig. */
.ft-bell { position:relative; }
.ft-bell-dot { position:absolute; right:5px; top:5px; width:7px; height:7px; border-radius:50%; background:var(--muted); border:1px solid var(--surface); }
.ft-bell.ft-active .ft-bell-dot { background:var(--fluxtimer-primary); box-shadow:0 0 8px var(--fluxtimer-primary); }
.ft-trigger { position:relative; color:var(--fluxtimer-secondary); }
.ft-trigger-icon { width:22px!important; height:22px!important; fill:none; stroke:currentColor; stroke-width:1.35; }
.ft-trigger-icon text { fill:currentColor; stroke:none; font:800 8.5px/1 "Courier New",monospace; letter-spacing:-.5px; }
.ft-trigger-dot { position:absolute; right:4px; top:4px; width:6px; height:6px; border-radius:50%; background:var(--muted); border:1px solid var(--surface); opacity:.5; }
.ft-trigger.ft-active { color:var(--fluxtimer-primary); border-color:color-mix(in srgb,var(--fluxtimer-primary) 65%,var(--border)); box-shadow:0 0 14px color-mix(in srgb,var(--fluxtimer-primary) 35%,transparent); }
.ft-trigger.ft-active .ft-trigger-dot { background:var(--fluxtimer-primary); box-shadow:0 0 8px var(--fluxtimer-primary); opacity:1; }
.ft-popover { position:fixed; z-index:1600; width:min(340px,calc(100vw - 24px)); padding:1rem; border:1px solid color-mix(in srgb,var(--fluxtimer-secondary) 55%,var(--border)); border-radius:16px; background:var(--panel); box-shadow:0 18px 55px rgba(0,0,0,.38),0 0 24px color-mix(in srgb,var(--fluxtimer-secondary) 22%,transparent); display:none; }
.ft-popover.open { display:block; animation:ft-in .18s ease-out; }
.ft-popover-head,.ft-popover-actions,.ft-settings-head,.ft-settings-actions,.ft-options { display:flex; align-items:center; gap:.7rem; }
src/main/resources/static/css/theme.css
+1 -3
View File
@@ -96,8 +96,6 @@ a { color:var(--secondary); }
.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); }
@@ -198,7 +196,7 @@ body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
.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-search { display:none; }
.mf-hello h1 { font-size:1.4rem; }
.mf-tools { margin-left:auto; }
src/main/resources/static/js/theme.js
+1 -1
View File
@@ -13,7 +13,7 @@
if (!document.querySelector('link[data-fluxtimer]')) {
var timerCss = document.createElement('link');
timerCss.rel = 'stylesheet';
timerCss.href = '/css/fluxtimer.css?v=1';
timerCss.href = '/css/fluxtimer.css?v=2';
timerCss.setAttribute('data-fluxtimer', '');
document.head.appendChild(timerCss);
}
src/main/resources/templates/dashboard.html
+10 -5
View File
@@ -41,14 +41,19 @@
<!-- ===== Topbar ===== -->
<header class="mf-topbar">
<div class="mf-hello">
<h1>Willkommen zurück, <span class="nm" sec:authentication="name">Alice</span>! 👋</h1>
<h1>Willkommen zurück, <span class="nm" sec:authentication="name">Alice</span>!</h1>
<p>Wähle ein Spielmodus, um dein Wissen auf die Probe zu stellen.</p>
</div>
<div class="mf-pulse">
<svg viewBox="0 0 200 50" fill="none" stroke="var(--accent)" stroke-width="2"><path d="M2 26h40l8-18 10 34 9-26 7 14h26l6-12 9 22 7-24h59"/></svg>
</div>
<div class="mf-tools">
<button class="mf-iconbtn ft-bell" type="button" data-fluxtimer-toggle aria-label="FluxTimer öffnen" aria-expanded="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg><span class="ft-bell-dot" aria-hidden="true"></span></button>
<button class="mf-iconbtn ft-trigger" type="button" data-fluxtimer-toggle aria-label="FluxTimer öffnen" aria-expanded="false">
<svg class="ft-trigger-icon" viewBox="0 0 24 24" aria-hidden="true">
<rect x="2.5" y="5" width="19" height="14" rx="3"/>
<text x="12" y="15.1" text-anchor="middle">88</text>
<path d="M6 2.5v2M18 2.5v2M6 19.5v2M18 19.5v2"/>
</svg>
<span class="ft-trigger-dot" aria-hidden="true"></span>
</button>
<button class="mf-iconbtn" type="button" aria-label="Benachrichtigungen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg></button>
<div class="mf-search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg><input placeholder="Suche..."></div>
<button class="mf-theme"></button>
<form th:action="@{/logout}" method="post" style="display:inline">