calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

l0qp1n5qr: Give the disabled sparkle button a solid readable face

Browse Source
This commit is contained in:
calcazar
2026-10-19 21:58:41 -06:00
parent 82dfe7308b
commit fcbaa174b6
3 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/buttons.css
+17
View File
@@ -490,3 +490,20 @@
.btn-spark:focus-visible .btn-spark-hex { fill: var(--on-accent); }
.btn-gloss::after { display: none; }
}
/* Sparkle glow, disabled: a solid readable face, no glow, no sparks, no fade. */
.btn-spark:disabled {
opacity: 1;
cursor: not-allowed;
background: var(--tile-3);
color: var(--ink-2);
box-shadow: inset 0 0 0 1px var(--line-2);
transform: none;
}
.btn-spark:disabled .btn-spark-inner,
.btn-spark:disabled .btn-spark-hex { color: var(--ink-2); }
.btn-spark:disabled .btn-spark-hex { stroke: var(--ink-2); animation: none; }
.btn-spark:disabled::before,
.btn-spark:disabled::after,
.btn-spark:disabled .btn-spark-fold,
.btn-spark:disabled .btn-spark-pts { display: none; }
src/styles/legacy.css
-1
View File
@@ -8,7 +8,6 @@ label { font-size: 14px; font-weight: 500; margin-top: 8px; }
input { font: inherit; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--tile-2); color: var(--ink); }
input:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button { font: inherit; font-weight: 500; margin-top: 16px; padding: 12px; border: 0; border-radius: 8px; background: var(--accent); color: white; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
.error { margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; color: var(--danger); background: var(--accent-soft); font-size: 14px; }
.shell header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--tile); border-bottom: 1px solid var(--line); }
.shell header div { display: flex; flex-direction: column; font-size: 14px; }