/* oink-classic-touch.css v2 — OINK-CLASSIC-TOUCH-2026-09-08. Geometry + physics for the classic jQuery Mobile theme (Sir 09-08: "proper spacing and physics and geometry"). jQuery Mobile adds .ui-mobile to at init, so every rule is scoped to it (inert on SnoutOS/desktop); cookie-consent rules are scoped to .cc-window. Targets: 44px minimum hit area (padding + negative margin where the layout must not move), 8px vertical rhythm, 16px body / 14px floor, no 300ms tap delay, no iOS zoom on inputs. */ .ui-mobile a, .ui-mobile button, .ui-mobile .ui-btn, .ui-mobile input, .ui-mobile select, .ui-mobile label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,.08); } /* buttons */ .ui-mobile .ui-btn, .ui-mobile a.ui-btn, .ui-mobile button.ui-btn, .ui-mobile .ui-btn-inline, .ui-mobile .ui-btn-up-b, .ui-mobile .ui-btn-up-a, .ui-mobile .ui-btn-up-c { min-height: 44px; box-sizing: border-box; padding-top: .75em; padding-bottom: .75em; line-height: 1.3; } .ui-mobile .ui-mini, .ui-mobile .ui-btn-mini, .ui-mobile .ui-btn.ui-mini { min-height: 44px; font-size: 14px; } .ui-mobile .pigbutton, .ui-mobile a.pigbutton, .ui-mobile input.pigbutton, .ui-mobile button.pigbutton { min-height: 44px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; line-height: 1.3; } /* lists, nav, plain links: enlarge the hit area without moving the layout */ .ui-mobile .ui-listview > li > a.ui-btn, .ui-mobile .ui-listview > li.ui-li-static { min-height: 44px; } .ui-mobile .ui-header a, .ui-mobile .ui-footer a, .ui-mobile .ui-navbar a, .ui-mobile a.bottommenu, .ui-mobile .bottommenu a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 .5em; box-sizing: border-box; } .ui-mobile .ui-content a:not(.ui-btn):not(.pigbutton):not(.bottommenu):not(.cc-link), .ui-mobile a.ui-link:not(.ui-btn) { display: inline-block; padding: 12px 4px; margin: -12px -4px; line-height: 1.3; } .ui-mobile .ui-content a:not(.ui-btn) img { display: block; } /* form controls */ .ui-mobile .ui-input-text input, .ui-mobile .ui-input-search input, .ui-mobile textarea.ui-input-text, .ui-mobile input[type=text], .ui-mobile input[type=email], .ui-mobile input[type=password], .ui-mobile input[type=search], .ui-mobile select { min-height: 44px; font-size: 16px; } .ui-mobile input[type=checkbox]:not(.ui-checkbox), .ui-mobile input[type=radio]:not(.ui-radio), .ui-mobile input.message-checkbox { width: 22px; height: 22px; margin: 11px; vertical-align: middle; } .ui-mobile .ui-checkbox label, .ui-mobile .ui-radio label { min-height: 44px; } /* rhythm + type floor */ .ui-mobile .ui-controlgroup-vertical .ui-btn, .ui-mobile .ui-controlgroup-vertical .ui-checkbox, .ui-mobile .ui-controlgroup-vertical .ui-radio, .ui-mobile .ui-btn + .ui-btn:not(.ui-btn-inline), .ui-mobile .ui-field-contain + .ui-field-contain { margin-top: 8px; } .ui-mobile .ui-content, .ui-mobile .ui-body, .ui-mobile p, .ui-mobile td, .ui-mobile li { font-size: 16px; } .ui-mobile small, .ui-mobile .ui-li-aside, .ui-mobile .ui-li-count, .ui-mobile .ui-li-desc, .ui-mobile .ui-btn-text small, .ui-mobile font[size="1"], .ui-mobile font[size="2"], .ui-mobile .small, .ui-mobile .tiny { font-size: 14px !important; } .ui-mobile img { max-width: 100%; height: auto; } /* cookie consent (its stylesheet is injected at runtime, so specificity + !important) */ html .cc-window .cc-link, html .cc-window .cc-btn, html .cc-window .cc-dismiss, html .cc-window .cc-compliance .cc-btn { min-height: 44px !important; line-height: 44px !important; padding: 0 12px !important; display: inline-block !important; box-sizing: border-box !important; } /* v3 (06:42Z) — second CDP round: a.ui-link measured 42 px → 13 px padding; checkbox rows get a 44 px label hit area */ .ui-mobile .ui-content a:not(.ui-btn):not(.pigbutton):not(.bottommenu):not(.cc-link), .ui-mobile a.ui-link:not(.ui-btn) { padding: 13px 4px !important; margin: -13px -4px !important; } .ui-mobile label:has(> input[type=checkbox]), .ui-mobile label:has(> input[type=radio]) { display: inline-flex; align-items: center; min-height: 44px; } /* v4 (07:10Z) — inbox checkboxes are bare inputs (no label wrapper): give the box itself a 44 px hit area via a transparent padding box */ .ui-mobile input.message-checkbox, .ui-mobile input[type=checkbox]:not(.ui-checkbox) { width: 22px; height: 22px; margin: 11px; box-sizing: content-box; padding: 0; outline-offset: 11px; }