Sysnaptik/mindflux
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ebda37f4088f3f507aa2773674eb3e7452194ae8
mindflux/src/main/resources/static/css/fluxtimer.css
T
AliceDarkest 0b3286af4c AP2 Header-Icons vereinheitlicht (42x42, Radius 10, Glyphe 20x20, Outline) 
- theme.css: .mf-iconbtn und .mf-theme auf 42x42 / Radius 10px (Ellipse weg),
  Glyphen 20x20; .mf-theme behaelt Akzentfarbe+Glow. .mf-search min-height 42px.
- accessibility-placement.css: .mf-a11y-trigger 42x42, svg 20x20, gefuellter
  Gradient -> Outline (Surface-Fill, Akzent ueber color/border-color).
- accessibility.css: Legacy-56px-Kreis-Trigger durch sauberen .mf-iconbtn-Look
  ersetzt (Fokus-Outline erhalten).
- fluxtimer.css: !important am .ft-trigger-icon entfernt, 20x20 / stroke 1.5.
- STYLEGUIDE.md: Icon-Button-Spezifikation ergaenzt; Light-Tokens (AP1) und
  neues --warn nachgezogen.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WFxcjtc9HNP4VECT6Ur1tE
2026-07-21 00:07:19 +02:00

51 lines
5.8 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* FluxTimer – Zeitschaltkreis-Optik, rein clientseitig. */
.ft-trigger { position:relative; color:var(--fluxtimer-secondary); }
.ft-trigger-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; }
.ft-trigger-bolt { fill:color-mix(in srgb,currentColor 24%,transparent); stroke-width:1.5; stroke-linejoin:round; }
.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; }
.ft-popover-head { justify-content:space-between; margin-bottom:.75rem; }
.ft-popover-head b { color:var(--heading); letter-spacing:.08em; }
.ft-close { border:0; background:none; color:var(--muted); cursor:pointer; font-size:1.25rem; }
.ft-circuit { display:grid; gap:.55rem; padding:.8rem; border-radius:12px; background:var(--fluxtimer-display); border:1px solid color-mix(in srgb,var(--fluxtimer-primary) 45%,var(--border)); box-shadow:inset 0 0 22px rgba(0,0,0,.28); }
.ft-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.7rem; }
.ft-row span { font-size:.65rem; letter-spacing:.12em; color:var(--muted); }
.ft-row strong,.ft-preview strong { color:var(--fluxtimer-segment); font-family:"Courier New",monospace; font-variant-numeric:tabular-nums; letter-spacing:.08em; text-shadow:0 0 9px color-mix(in srgb,var(--fluxtimer-segment) 58%,transparent); }
.ft-row.primary strong { font-size:1.3rem; }
.ft-popover-status { color:var(--muted); font-size:.8rem; margin:.7rem 0; }
.ft-popover-actions { justify-content:space-between; flex-wrap:wrap; }
.ft-mini-toggle { border:1px solid var(--border-accent); background:var(--surface-2); color:var(--text); border-radius:9px; padding:.45rem .7rem; cursor:pointer; font-weight:700; }
.ft-settings-head { justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.ft-settings-head p { color:var(--muted); font-size:.88rem; margin-top:.25rem; }
.ft-settings-grid { display:grid; grid-template-columns:1fr 220px; gap:1rem; align-items:stretch; }
.ft-preview { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:.8rem; border-radius:12px; background:var(--fluxtimer-display); border:1px solid color-mix(in srgb,var(--fluxtimer-primary) 42%,var(--border)); }
.ft-preview span { color:var(--muted); font-size:.65rem; letter-spacing:.13em; }
.ft-preview strong { font-size:1.55rem; margin-top:.25rem; }
.ft-switch { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; color:var(--text); }
.ft-switch input { position:absolute; opacity:0; }
.ft-switch span { width:44px; height:24px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); position:relative; transition:.2s; }
.ft-switch span::after { content:""; position:absolute; width:18px; height:18px; left:2px; top:2px; border-radius:50%; background:var(--muted); transition:.2s; }
.ft-switch input:checked + span { background:color-mix(in srgb,var(--fluxtimer-secondary) 34%,var(--surface)); border-color:var(--fluxtimer-secondary); }
.ft-switch input:checked + span::after { transform:translateX(20px); background:var(--fluxtimer-secondary); box-shadow:0 0 8px var(--fluxtimer-secondary); }
.ft-reminders { display:flex; flex-wrap:wrap; gap:.2rem 1rem; border:0; margin:.3rem 0 .8rem; }
.ft-reminders legend { width:100%; margin-bottom:.25rem; }
.ft-options { flex-wrap:wrap; margin:.25rem 0 .8rem; }
.ft-settings-actions { justify-content:space-between; flex-wrap:wrap; }
.ft-overlay { position:fixed; inset:0; z-index:1900; display:none; place-items:center; padding:1rem; background:rgba(5,3,2,.76); backdrop-filter:blur(7px); }
.ft-overlay.open { display:grid; }
.ft-overlay::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.7) 49%,transparent 55%); transform:translateX(-120%); }
.ft-overlay.open::before { animation:ft-flash .7s ease-out; }
.ft-modal { position:relative; width:min(560px,100%); text-align:center; padding:1.5rem; border-radius:20px; background:var(--panel); border:1px solid var(--fluxtimer-secondary); box-shadow:0 0 50px color-mix(in srgb,var(--fluxtimer-secondary) 35%,transparent); }
.ft-modal .ft-kicker { color:var(--fluxtimer-secondary); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:800; }
.ft-modal h2 { color:var(--heading); font-size:1.7rem; margin:.7rem 0 .4rem; }
.ft-modal p { color:var(--muted); line-height:1.55; }
.ft-modal-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; margin-top:1.2rem; }
@keyframes ft-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
@keyframes ft-flash { to{transform:translateX(120%)} }
@media (max-width:620px){ .ft-settings-grid{grid-template-columns:1fr}.ft-settings-head{align-items:stretch;flex-direction:column}.ft-popover{left:12px!important;right:12px!important;top:64px!important;width:auto} }
@media (prefers-reduced-motion:reduce){ .ft-popover.open,.ft-overlay.open::before{animation:none} }
Reference in New Issue View Git Blame Copy Permalink