/* * Anchor Live mobile viewer styles. * * Every rule is scoped under `.noVNC_touch` (added to only on touch devices), so a * non-touch client loads this file but nothing here ever applies — the desktop viewer is unchanged. */ /* On touch, the clunky desktop control bar is replaced by the mobile toolbar below. (Production * inspector.html already hides it for everyone; this also covers the local full-UI page on a phone.) */ .noVNC_touch #noVNC_control_bar_anchor, .noVNC_touch #noVNC_control_bar { display: none !important; } .noVNC_touch #noVNC_mobile_toolbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); padding-left: calc(10px + env(safe-area-inset-left)); padding-right: calc(10px + env(safe-area-inset-right)); background: linear-gradient(to top, rgba(20, 22, 26, 0.92), rgba(20, 22, 26, 0.72) 70%, rgba(20, 22, 26, 0)); /* Let the canvas underneath receive touches everywhere the toolbar itself isn't. */ pointer-events: none; } .noVNC_touch .noVNC_mobile_row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; } .noVNC_touch .noVNC_mobile_btn { pointer-events: auto; box-sizing: border-box; min-width: 48px; height: 48px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: #fff; font: 600 15px/1 sans-serif; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent; transition: background 0.12s ease, transform 0.06s ease; } .noVNC_touch .noVNC_mobile_btn:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.2); } .noVNC_touch .noVNC_mobile_btn > img { width: 22px; height: 22px; display: block; pointer-events: none; } .noVNC_touch .noVNC_mobile_btn.noVNC_selected { background: var(--novnc-lightblue); border-color: var(--novnc-lightblue); } .noVNC_touch .noVNC_mobile_btn_stub { opacity: 0.35; } .noVNC_touch .noVNC_mobile_btn_text { font-size: 16px; font-weight: 700; } /* The secondary quick-keys row sits above the primary row and slides away when closed. */ .noVNC_touch #noVNC_mobile_extra_keys.noVNC_hidden { display: none; } /* Gesture cheat-sheet overlay. */ .noVNC_touch #noVNC_gesture_help { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .noVNC_touch #noVNC_gesture_help.noVNC_hidden { display: none; } .noVNC_touch .noVNC_gesture_help_card { width: 100%; max-width: 360px; box-sizing: border-box; padding: 20px 22px calc(16px + env(safe-area-inset-bottom)); border-radius: 16px; background: #1b1e24; color: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } .noVNC_touch .noVNC_gesture_help_card h2 { margin: 0 0 12px; font: 700 18px/1.2 sans-serif; } .noVNC_touch .noVNC_gesture_help_card ul { margin: 0 0 18px; padding: 0; list-style: none; } .noVNC_touch .noVNC_gesture_help_card li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font: 15px/1.3 sans-serif; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .noVNC_touch .noVNC_gesture_help_card li:last-child { border-bottom: none; } .noVNC_touch .noVNC_gesture_help_card b { font-weight: 700; white-space: nowrap; } .noVNC_touch .noVNC_gesture_help_card button { width: 100%; height: 48px; border: none; border-radius: 12px; background: var(--novnc-lightblue); color: #fff; }