[OCaml] High Intensity Training Online
feat style form dropdowns to match the UI
Give select elements themed styling: native chrome removed, a quiet chevron drawn on the right in the rule colour, and padding so the text never overlaps it. Dropdowns now read as part of the same interface as the text inputs.
Changed files
ENHANCEMENTS.org
@@ -64,7 +64,7 @@
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.
67
Removed:
** TODO Style form dropdowns to match the UI
67
Added:
** DONE Style form dropdowns to match the UI
68
68
Style form dropdown menus so they match the overall UI aesthetic.
69
69
** TODO Standardize Logbook navigation and add a mobile profile button
70
70
Always label the logbook tab `Logbook`. Add a dedicated profile button for the user name in the mobile top navigation bar.
lib/web/assets/hito.css
@@ -253,6 +253,21 @@
253
253
padding: 0.65rem 0.75rem;
254
254
}
255
255
256
Added:
/* Dropdowns match the UI: no native chrome, a themed chevron drawn on the
257
Added:
right, and room for it so the text never overlaps. The chevron uses the rule
258
Added:
colour to stay quiet next to the text. */
259
Added:
select {
260
Added:
appearance: none;
261
Added:
-webkit-appearance: none;
262
Added:
padding-right: 2.25rem;
263
Added:
background-image: linear-gradient(45deg, transparent 50%, var(--rule-strong) 50%),
264
Added:
linear-gradient(135deg, var(--rule-strong) 50%, transparent 50%);
265
Added:
background-position: right 1rem center, right 0.75rem center;
266
Added:
background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
267
Added:
background-repeat: no-repeat;
268
Added:
}
269
Added:
select:hover { border-color: var(--rule-strong); }
270
Added:
256
271
input:invalid,
257
272
input[aria-invalid="true"],
258
273
select[aria-invalid="true"] {