muehe/onefinity-firmware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: unify jog button sizing across tablet and kiosk

Browse Source 
Big jog labels were only set inside the kiosk-mode override block,
which made the 1920x1080 tablet preview look small and inconsistent
with the Pi kiosk. Move the larger sizes to the base .jbtn rule
(font 1.6rem, ico 2.4rem, lbl 1.5rem) and drop the kiosk-mode
.jbtn override so both viewports use the same single source of
truth.
This commit is contained in:
muehe
2026-05-01 14:24:33 +02:00
parent 50839718e2
commit 19e6cc6c93
1 changed files with 15 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/stylus/style.styl
View File

@@ -1333,12 +1333,16 @@ tt.save
flex-direction column flex-direction column
align-items center align-items center
justify-content center justify-content center
gap 4px gap 6px
user-select none user-select none
-webkit-tap-highlight-color transparent -webkit-tap-highlight-color transparent
cursor pointer cursor pointer
font-weight 700 font-weight 700
font-size 1.05rem // Single sizing used by both the 1920x1080 portable touchscreen and
// the Pi 1366x768 kiosk — large enough to be readable at arm's
// length on the smaller display, still proportionate on the bigger
// one. No mode-specific override.
font-size 1.6rem
border none border none
background $jog-bg background $jog-bg
color $jog-ink color $jog-ink
@@ -1347,13 +1351,13 @@ tt.save
min-width 0 min-width 0
.ico .ico
font-size 1.6rem font-size 2.4rem
.lbl .lbl
font-size 0.8rem font-size 1.5rem
color inherit color inherit
opacity 0.85 opacity 0.95
font-weight 600 font-weight 700
&:hover:not([disabled]) &:hover:not([disabled])
background $jog-hover background $jog-hover
@@ -2366,16 +2370,6 @@ html.kiosk-mode
.control-page .jog-grid .control-page .jog-grid
gap 6px gap 6px
.jbtn
border-radius 10px
font-size 0.85rem
.ico
font-size 1.15rem
.lbl
font-size 0.65rem
.control-page .dro-head, .control-page .dro-row .control-page .dro-head, .control-page .dro-row
grid-template-columns 56px 1fr 0.85fr 0.85fr 90px 90px 1fr grid-template-columns 56px 1fr 0.85fr 0.85fr 90px 90px 1fr
column-gap 0.4rem column-gap 0.4rem
@@ -2387,12 +2381,12 @@ html.kiosk-mode
.control-page .dro-row .control-page .dro-row
font-size 0.95rem font-size 0.95rem
// Smaller axis-action buttons in DRO rows. // Axis-action buttons in DRO rows (settings/zero/home).
.control-page .dro-row .icon-btn .control-page .dro-row .icon-btn
width 44px width 56px
height 44px height 56px
font-size 1rem font-size 1.25rem
border-radius 9px border-radius 11px
.control-page .status-strip .control-page .status-strip
grid-template-columns repeat(2, 1fr) grid-template-columns repeat(2, 1fr)