troogs/duempelkas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): constrain decimal input and add stacked timed toasts with uniform actions

Browse Source
This commit is contained in:
troogs
2026-11-02 19:19:07 +01:00
parent 22e509d982
commit 86a73b862a
24 changed files with 315 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Duempelkas.Desktop/wwwroot/css/app.css
+18
View File
@@ -612,3 +612,21 @@ fieldset { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
.entry-recent > td { animation: none; border-bottom: 2px solid var(--color-accent); }
}
/* One icon row plus two reserved text rows on every page. */
.action-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 0; align-items: flex-start; }
.action-toolbar .btn-nav { box-sizing: border-box; width: 10.5rem; min-width: 10.5rem; max-width: 10.5rem; height: 6.25rem; min-height: 6.25rem; padding: .45rem .6rem; font-size: .9rem !important; line-height: 1.15rem; gap: .2rem; border-radius: .5rem; border: 1px solid transparent; overflow-wrap: normal; }
.action-toolbar .btn-nav i { display: block; font-size: 1.65rem; line-height: 1.85rem; }
.action-toolbar .btn-nav span { display: block; min-height: 2.3rem; }
.action-toolbar .more-actions { align-self: flex-start; position: relative; }
.action-toolbar .more-actions[open] { padding: 0; border: 0; }
.more-actions > button { position: absolute; z-index: 20; right: 0; min-width: 15rem; box-shadow: 0 4px 16px #0004; }
.toast-stack { position: fixed; z-index: 3000; inset: .75rem .75rem auto auto; width: min(28rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); overflow-y: auto; display: flex; flex-direction: column; gap: .65rem; pointer-events: none; }
.app-toast { pointer-events: auto; padding: 1rem 2.5rem 1rem 1rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-left: .35rem solid var(--color-accent); border-radius: .65rem; box-shadow: 0 5px 22px #0004; position: relative; animation: toast-enter .2s ease-out; overflow-wrap: anywhere; }
.toast-success { border-left-color: var(--color-income); }
.toast-error { border-left-color: var(--color-expense); }
.app-toast p { margin: 0 0 .5rem; }
.toast-close { position: absolute; right: .3rem; top: .3rem; background: transparent; border: 0; color: inherit; width: 2rem; height: 2rem; font-size: 1.5rem; }
@keyframes toast-enter { from { transform: translateY(-2rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app-toast { animation: none; } }
.input-rejection:empty { display: none; }