Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(setup): dedicated dev icon + richer reveal for the dev-mode strip

Browse Source 
Swap the strip's shared 🛠️ emoji for the inline "tool" SVG used by the
topbar Developer-mode banner — a real, dedicated icon that ties the two
dev-mode surfaces together and no longer doubles the Advanced card's
glyph.

Enrich the entrance: the box grows in and settles, a one-shot accent
glow pulses for the "unlocked" beat, a subtle shine sweeps across, the
icon pops with a slight overshoot/wiggle, and the text slides in just
behind it. All gated behind prefers-reduced-motion.

Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 14:19:03 +01:00
parent 1c5ee82a31
commit 7ff21621d9
2 changed files with 60 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
containers/libreportal/frontend/css/setup-wizard.css
View File

@ -1122,6 +1122,7 @@ body.setup-wizard-open {
from the parent flex column) until JS clears the attribute, at which
point the entrance keyframes play. */
.setup-dev-strip {
position: relative;
display: flex;
align-items: center;
gap: 12px;
@ -1131,19 +1132,68 @@ body.setup-wizard-open {
border: 1px solid rgba(var(--accent-rgb), 0.5);
box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.16);
overflow: hidden;
animation: swDevStripIn .4s cubic-bezier(.2, .7, .3, 1) both;
/* Grow-in settles the box; the glow pulse gives the "unlocked!" beat. */
animation:
swDevStripIn .45s cubic-bezier(.2, .8, .25, 1) both,
swDevStripGlow 1.1s ease-out .12s both;
}
/* Author display:flex above outranks the UA [hidden] rule, so re-hide. */
.setup-dev-strip[hidden] { display: none; }
.setup-dev-strip-icon { font-size: 1.5rem; line-height: 1; }
/* One-shot shine sweep across the strip on reveal. */
.setup-dev-strip::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.18) 50%, transparent 65%);
transform: translateX(-120%);
pointer-events: none;
}
.setup-dev-strip:not([hidden])::after { animation: swDevShine .9s ease .28s both; }
.setup-dev-strip-icon {
display: inline-flex;
color: rgb(var(--accent-rgb));
flex: 0 0 auto;
}
.setup-dev-strip-icon svg { width: 22px; height: 22px; display: block; }
.setup-dev-strip:not([hidden]) .setup-dev-strip-icon {
animation: swDevIconPop .55s cubic-bezier(.2, 1.4, .4, 1) .12s both;
}
.setup-dev-strip-text { display: flex; flex-direction: column; gap: 2px; }
.setup-dev-strip-text strong { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.setup-dev-strip-text span { font-size: 0.8rem; color: rgba(var(--text-rgb), 0.65); }
.setup-dev-strip:not([hidden]) .setup-dev-strip-text {
animation: swDevTextIn .4s ease .18s both;
}
@keyframes swDevStripIn {
from { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; }
to { opacity: 1; transform: translateY(0); max-height: 160px; padding-top: 12px; padding-bottom: 12px; }
from { opacity: 0; transform: translateY(-8px) scale(.98); max-height: 0; padding-top: 0; padding-bottom: 0; }
60% { opacity: 1; }
to { opacity: 1; transform: translateY(0) scale(1); max-height: 160px; padding-top: 12px; padding-bottom: 12px; }
}
@keyframes swDevStripGlow {
0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
35% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.22), 0 8px 26px rgba(var(--accent-rgb), 0.30); }
100% { box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.16); }
}
@keyframes swDevShine {
from { transform: translateX(-120%); }
to { transform: translateX(120%); }
}
@keyframes swDevIconPop {
0% { transform: scale(0) rotate(-25deg); opacity: 0; }
60% { transform: scale(1.15) rotate(8deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes swDevTextIn {
from { opacity: 0; transform: translateX(-6px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.setup-dev-strip { animation-duration: .01ms; }
.setup-dev-strip,
.setup-dev-strip::after,
.setup-dev-strip .setup-dev-strip-icon,
.setup-dev-strip .setup-dev-strip-text { animation-duration: .01ms; }
}

6
containers/libreportal/frontend/js/system/setup-wizard.js
View File

@ -120,7 +120,11 @@ class SetupWizard {
</label>
</div>
<div class="setup-dev-strip" id="sw-dev-strip" role="status" hidden>
<span class="setup-dev-strip-icon" aria-hidden="true">🛠️</span>
<span class="setup-dev-strip-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
</svg>
</span>
<div class="setup-dev-strip-text">
<strong>Dev mode activated</strong>
<span>Developer fields will be unlocked after install.</span>