Fire HD 8 tablet mode: auto-detect Silk UA, optimised layout + touch targets

2026-06-30 17:50:23 -05:00 · 2026-06-19 16:17:48 +00:00
parent ab1aa16ac8
commit 52ddee3e78
2 changed files with 182 additions and 18 deletions
@@ -1208,3 +1208,159 @@ body::after{
 /* ── AGENT TOPOLOGY ────────────────────────────────────────────────── */
 #agentTopoCanvas{background:transparent;border-top:1px solid rgba(0,212,255,0.08);display:block}
 #agent-topo-btn.active{background:rgba(0,212,255,0.15);border-color:rgba(0,212,255,0.5)}
+
+/* ════════════════════════════════════════════════════════════════════════
+   FIRE HD 8 (12th Gen) TABLET MODE
+   Applied via body.tablet-mode — set automatically on Silk UA detection
+   Target: 1280×800 landscape, 189 PPI, touch-only input
+   ════════════════════════════════════════════════════════════════════════ */
+
+/* Prevent accidental text selection on touch; restore for inputs */
+body.tablet-mode { -webkit-user-select:none; user-select:none; }
+body.tablet-mode input,
+body.tablet-mode textarea { -webkit-user-select:auto; user-select:auto; }
+
+/* ── TOPBAR — taller row, bigger tap zones ─────────────────────── */
+body.tablet-mode #topBar {
+  height:54px;
+  padding:0 12px;
+}
+body.tablet-mode #clock { font-size:1.1rem; letter-spacing:3px; }
+body.tablet-mode .tb-logo { font-size:0.95rem; }
+
+/* Toolbar buttons — min 40px touch target */
+body.tablet-mode .btn-panels,
+body.tablet-mode .btn-camera {
+  font-size:0.62rem;
+  letter-spacing:1.5px;
+  padding:9px 13px;
+  min-height:40px;
+  margin-right:4px;
+}
+
+/* Theme color dots — bigger tap area */
+body.tablet-mode #themeBar { gap:6px; }
+body.tablet-mode .theme-btn {
+  width:20px; height:20px;
+  font-size:0.75rem;
+}
+
+/* Swap + logout */
+body.tablet-mode #btn-swap-panels {
+  font-size:0.65rem;
+  padding:7px 11px;
+}
+body.tablet-mode .btn-logout {
+  font-size:0.72rem;
+  padding:7px 12px;
+}
+
+/* ── MAIN LAYOUT — narrower side panels → wider center ──────────── */
+/* 220+220 side cols → center gets ~808px instead of ~660px */
+body.tablet-mode #mainLayout {
+  grid-template-columns:220px 1fr 220px;
+  padding:8px;
+  gap:8px;
+}
+
+/* ── PANELS — tighter padding, larger text ──────────────────────── */
+body.tablet-mode .panel { padding:11px; }
+body.tablet-mode .panel-title {
+  font-size:0.67rem;
+  letter-spacing:2.5px;
+  margin-bottom:9px;
+}
+
+/* Metric rows */
+body.tablet-mode .metric-label { font-size:0.75rem; }
+body.tablet-mode .service-row  { font-size:0.75rem; padding:6px 0; }
+body.tablet-mode .val-row      { font-size:0.75rem; padding:4px 0; }
+body.tablet-mode .device-item  { font-size:0.75rem; padding:7px 0; }
+body.tablet-mode .device-name  { font-size:0.75rem; }
+body.tablet-mode .device-ip    { font-size:0.68rem; }
+body.tablet-mode .vm-card      { font-size:0.75rem; padding:9px 10px; }
+
+/* Scrollable side panels — smooth touch inertia */
+body.tablet-mode #leftPanel,
+body.tablet-mode #rightPanel {
+  -webkit-overflow-scrolling:touch;
+  overscroll-behavior:contain;
+}
+
+/* ── CENTER — arc reactor + chat ────────────────────────────────── */
+/* Scale reactor down so chat gets more vertical room */
+body.tablet-mode #arcReactor { width:180px; height:180px; }
+body.tablet-mode .arc-ring.r1 { width:180px; height:180px; }
+body.tablet-mode .arc-ring.r2 { width:159px; height:159px; }
+body.tablet-mode .arc-ring.r3 { width:139px; height:139px; }
+body.tablet-mode .arc-ring.r4 { width:118px; height:118px; }
+body.tablet-mode .arc-ring.r5 { width:94px;  height:94px;  }
+body.tablet-mode .arc-ring.r6 { width:72px;  height:72px;  }
+body.tablet-mode .arc-ring.r7 { width:51px;  height:51px;  }
+body.tablet-mode .arc-core    { width:30px;  height:30px;  }
+
+/* Chat messages — comfortable reading size */
+body.tablet-mode .msg {
+  font-size:0.95rem;
+  line-height:1.55;
+  padding:11px 14px;
+}
+body.tablet-mode .msg.user   { font-size:0.88rem; }
+body.tablet-mode .msg.system { font-size:0.78rem; }
+
+/* Touch-scroll chat log */
+body.tablet-mode #chatLog {
+  -webkit-overflow-scrolling:touch;
+  overscroll-behavior:contain;
+}
+
+/* Input row — 16px prevents Silk from zooming on focus */
+body.tablet-mode #textInput {
+  font-size:1rem;
+  min-height:46px;
+  padding:12px 14px;
+}
+body.tablet-mode #sendBtn {
+  font-size:0.68rem;
+  min-height:46px;
+  padding:0 18px;
+}
+body.tablet-mode #micBtn {
+  width:52px; height:52px;
+  flex-shrink:0;
+}
+body.tablet-mode #searchBtn {
+  min-height:46px !important;
+  padding:0 13px !important;
+  font-size:1.1rem !important;
+}
+
+/* ── TABS — bigger tap targets ──────────────────────────────────── */
+body.tablet-mode .tab {
+  font-size:0.58rem;
+  letter-spacing:1.5px;
+  padding:9px 12px;
+}
+
+/* ── HA TABLE — more readable on 8" ────────────────────────────── */
+body.tablet-mode .ha-thead th { font-size:0.55rem; padding:6px 3px 8px; }
+body.tablet-mode .ha-row td   { font-size:0.74rem; padding:6px 3px; }
+
+/* Toggle slider — bigger for fat fingers */
+body.tablet-mode .ha-toggle { width:36px; height:18px; }
+body.tablet-mode .ha-slider::before { width:12px; height:12px; left:2px; top:2px; }
+body.tablet-mode .ha-toggle input:checked + .ha-slider::before { transform:translateX(18px); }
+
+/* ── DISABLE HOVER-RISE — not meaningful on touch ───────────────── */
+body.tablet-mode .panel:hover {
+  transform:translateY(var(--pty,0px)) !important;
+  border-color:var(--panel-border) !important;
+  box-shadow:none !important;
+  transition:none !important;
+}
+
+/* ── ALERTS ──────────────────────────────────────────────────────── */
+body.tablet-mode .alert-item { font-size:0.75rem; padding:9px 11px; }
+
+/* ── BOTTOM BAR ─────────────────────────────────────────────────── */
+body.tablet-mode #bottomBar { font-size:0.7rem; height:34px; }