byarielm.fyi / ioma
a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(ui): tab indicator full-width, focus ring keyboard-only

Ariel M. Lighty 39a9a588 4eb17838

+19 -20
+19 -20
ui/components/buttons.slint
··· 171 171 172 172 ta := TouchArea { 173 173 clicked => { 174 - fs.focus(); 175 174 root.clicked(); 176 175 } 177 176 } ··· 184 183 animate background { duration: 120ms; } 185 184 animate border-color { duration: 120ms; } 186 185 187 - VerticalLayout { 188 - padding-left: 6px * Theme.font-scale; 189 - padding-right: 6px * Theme.font-scale; 190 - padding-top: 4px * Theme.font-scale; 191 - padding-bottom: 0px; 186 + Text { 187 + x: 0; 188 + y: 0; 189 + width: parent.width; 190 + height: parent.height - 2px * Theme.font-scale; 191 + text: root.text; 192 + font-size: Theme.font_body; 193 + font-weight: root.active ? 600 : 400; 194 + color: root.active ? Theme.ink : Theme.ink-mid; 195 + horizontal-alignment: center; 196 + vertical-alignment: center; 197 + } 192 198 193 - Text { 194 - text: root.text; 195 - font-size: Theme.font_body; 196 - font-weight: root.active ? 600 : 400; 197 - color: root.active ? Theme.ink : Theme.ink-mid; 198 - horizontal-alignment: left; 199 - vertical-alignment: center; 200 - } 201 - 202 - // Active indicator 203 - Rectangle { 204 - height: 2px * Theme.font-scale; 205 - background: root.active ? Theme.accent : transparent; 206 - } 199 + // Active indicator — pinned to bottom, full width 200 + Rectangle { 201 + x: 0; 202 + y: parent.height - 2px * Theme.font-scale; 203 + width: parent.width; 204 + height: 2px * Theme.font-scale; 205 + background: root.active ? Theme.accent : transparent; 207 206 } 208 207 } 209 208 }