Switch/Checkbox Styling:
- Exclude switches and checkboxes from larger-targets CSS
- Fix checkbox square aspect ratio when ADHD mode enabled
- Prevent padding from being applied to form controls
Quick Wins Count:
- Use settings.quickWinThreshold instead of hardcoded 15
- Match same filtering logic as QuickWinList component
Back Button Navigation:
- Use window.history.back() instead of setLocation('/')
- Works correctly when navigating from ADHD dashboard to sub-pages
Time Tracking (Break Reminder):
- Track only active browser time using Page Visibility API
- Reset accumulated time after 8 hours of inactivity
- Store/restore active time in localStorage properly
- No more 1500+ hour counts from leaving browser open
Sources:
- https://ui.shadcn.com/docs/theming (shadcn theming)
- https://ui.shadcn.com/docs/tailwind-v4 (Tailwind v4 updates)
This commit is contained in:
+27
-7
@@ -380,22 +380,23 @@
|
||||
|
||||
/* Larger Touch Targets for ADHD Mode */
|
||||
/* Only increase height, not width - width breaks flex layouts and icon buttons */
|
||||
.larger-targets button:not([data-size="icon"]),
|
||||
.larger-targets [role="button"]:not([data-size="icon"]) {
|
||||
/* Exclude switches, checkboxes, and sliders from larger targets - they have specific sizing */
|
||||
.larger-targets button:not([data-size="icon"]):not([role="switch"]):not([role="checkbox"]),
|
||||
.larger-targets [role="button"]:not([data-size="icon"]):not([role="switch"]):not([role="checkbox"]) {
|
||||
min-height: 44px;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
/* Icon buttons get increased size as square */
|
||||
.larger-targets button[data-size="icon"],
|
||||
.larger-targets [role="button"][data-size="icon"] {
|
||||
/* Icon buttons get increased size as square - but not switches */
|
||||
.larger-targets button[data-size="icon"]:not([role="switch"]),
|
||||
.larger-targets [role="button"][data-size="icon"]:not([role="switch"]) {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
/* Form inputs and selects */
|
||||
.larger-targets input,
|
||||
/* Form inputs and selects - exclude checkbox and switch */
|
||||
.larger-targets input:not([type="checkbox"]):not([role="switch"]),
|
||||
.larger-targets select,
|
||||
.larger-targets textarea {
|
||||
min-height: 44px;
|
||||
@@ -410,6 +411,25 @@
|
||||
min-height: 52px;
|
||||
}
|
||||
|
||||
/* Checkboxes and switches should maintain their aspect ratio */
|
||||
.larger-targets [role="switch"],
|
||||
.larger-targets [role="checkbox"],
|
||||
.larger-targets input[type="checkbox"] {
|
||||
min-height: auto !important;
|
||||
min-width: auto !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Specific fix for Radix checkbox buttons - ensure square aspect ratio */
|
||||
.larger-targets button[role="checkbox"] {
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
min-height: 1rem !important;
|
||||
min-width: 1rem !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Visual Timer Color Classes */
|
||||
.timer-green {
|
||||
color: hsl(var(--adhd-timer-green));
|
||||
|
||||
Reference in New Issue
Block a user