[OCaml] High Intensity Training Online
feat style the cancellation modal to match the UI
Style the confirmation dialog as a raised paper surface: the oxblood top accent, radius, border, and shadow echo the page surface. The actions reuse the primary and secondary submit styling with hover and transition states, and the dialog opens with a short scale-and-fade clamped for reduced motion.
Changed files
ENHANCEMENTS.org
@@ -60,7 +60,7 @@
60
60
Use a grid layout so the exercise name, load input, and reps input appear on one row on mobile.
61
61
** TODO Allow spontaneous logbook feedback
62
62
Allow users to submit subjective feedback at any time from the Logbook. Suggest this feedback flow at the end of each workout, while keeping it available independently.
63
Removed:
** TODO Style the cancellation modal to match the UI
63
Added:
** DONE Style the cancellation modal to match the UI
64
64
Style the modal cancellation menu so it matches the overall UI aesthetic.
65
65
** DONE Preserve and navigate after modal workout cancellation
66
66
When cancellation is confirmed, return the Current Workout tab to the Routine tab, save the workout as a partial logbook entry, and keep it editable later.
lib/web/assets/hito.css
@@ -398,9 +398,15 @@
398
398
399
399
.slot-panel { margin-top: 1.25rem; }
400
400
401
Removed:
/* The cancel confirmation modal. A native dialog centred on the viewport, with
402
Removed:
a dimmed backdrop. Its actions reuse the button-group layout. It is shown by
403
Removed:
the client; without script the cancel form submits directly. */
401
Added:
/* The cancel confirmation modal. A native dialog styled as a raised paper
402
Added:
surface: the oxblood top accent, radius, border, and shadow echo the page
403
Added:
surface, so the modal reads as part of the same interface. The actions reuse
404
Added:
the primary and secondary submit styling, including hover and transition. It
405
Added:
opens with a short scale-and-fade, clamped for reduced motion. */
406
Added:
@keyframes modal-enter {
407
Added:
from { opacity: 0; transform: translateY(0.4rem) scale(0.98); }
408
Added:
to { opacity: 1; transform: translateY(0) scale(1); }
409
Added:
}
404
410
.confirm-dialog {
405
411
width: min(100%, 26rem);
406
412
margin: auto;
@@ -412,10 +418,12 @@
412
418
padding: clamp(1.25rem, 3vw, 1.75rem);
413
419
color: var(--ink);
414
420
}
421
Added:
.confirm-dialog[open] { animation: modal-enter 180ms ease both; }
415
422
.confirm-dialog::backdrop {
416
423
background: rgba(26, 26, 22, 0.45);
417
424
}
418
425
.confirm-dialog h2 { margin-top: 0; }
426
Added:
.confirm-dialog p { color: var(--muted-ink); }
419
427
.confirm-dialog button {
420
428
width: 100%;
421
429
min-height: 3rem;
@@ -427,11 +435,20 @@
427
435
font: 700 var(--font-size-small)/1 var(--sans);
428
436
letter-spacing: 0.055em;
429
437
text-transform: uppercase;
438
Added:
transition: background-color 150ms ease, transform 150ms ease;
430
439
}
440
Added:
.confirm-dialog button:hover {
441
Added:
background: var(--oxblood-dark);
442
Added:
transform: translateY(-2px);
443
Added:
}
431
444
.confirm-dialog button.secondary {
432
445
color: var(--brass);
433
446
background: transparent;
434
447
border-color: var(--brass);
448
Added:
}
449
Added:
.confirm-dialog button.secondary:hover {
450
Added:
color: var(--paper-raised);
451
Added:
background: var(--brass);
435
452
}
436
453
437
454
.recorded-slot { margin: 1rem 0; }