/* TBC Teleprompter — tbc-mobile.css Copyright (C) 2026 TBC Global Holdings. Added for the Android/Capacitor + Chrome web build of Imaginary Teleprompter. Licensed under the GNU General Public License v3.0-or-later, same terms as upstream (see ../../LICENSE and ../../TBC-MODIFICATIONS.md). PURPOSE: responsive layer for phones/small screens. Fixes the desktop editor chrome so on a phone (portrait or landscape) the primary actions are fully visible and thumb-reachable: 1. Top bar (Prompt It! / Update / settings gear) never clipped — full-width flex layout + safe-area insets so nothing hides under the status bar or the phone's nav pills. 2. CKEditor toolbar collapses to a single horizontally-scrollable row (essentials first: font size, bold, format …), instead of overflowing into dense wrapped rows. 3. Compact chrome so the prompter display + speed control + Prompt It! are the priority. Desktop / large-screen Chrome is left unchanged (rules live behind phone media queries; the safe-area insets below evaluate to 0 on non-notched displays). Loaded LAST in index.html so it overrides Bootstrap/editor.css. */ /* ---- Safe-area insets (all devices; 0 on desktop) so the top bar clears status bar / pills ---- */ header#top.navbar { padding-top: env(safe-area-inset-top, 0px); padding-right: env(safe-area-inset-right, 0px); padding-left: env(safe-area-inset-left, 0px); } /* ===================================================================================== PHONE breakpoint: narrow width (portrait phones) OR short height (landscape phones). A landscape 1080p phone lands ~850x390 CSS px, caught by max-height:560. Full-size desktop (wide AND tall) is unaffected. ===================================================================================== */ @media (max-width: 900px), (max-height: 560px) { /* Never allow the page to scroll sideways */ html, body { overflow-x: hidden; max-width: 100%; } /* ---- Top bar: full-width flex so the right-hand actions always get their space ---- */ header#top.navbar .container { width: 100%; max-width: 100%; padding-left: 6px; padding-right: 6px; } header#top.navbar .row { display: flex; align-items: center; flex-wrap: nowrap; margin-left: 0; margin-right: 0; } header#top.navbar .row::before, header#top.navbar .row::after { display: none; } /* Hide the desktop-only 'save images' toggle on the left to reclaim space */ header#top.navbar .navbar-left { display: none !important; } /* Brand shrinks first; the action buttons keep their size */ header#top.navbar .navbar-header { float: none !important; flex: 1 1 auto; min-width: 0; overflow: hidden; } header#top.navbar .navbar-brand { float: none; padding: 6px 6px; height: auto; } header#top.navbar .navbar-brand img { height: 26px; width: auto; } header#top.navbar .navbar-right { float: none !important; margin: 0 !important; display: flex; align-items: center; flex: 0 0 auto; /* keep the buttons clear of the landscape right-edge nav pills */ padding-right: env(safe-area-inset-right, 0px); } header#top.navbar .navbar-right > li { float: none; display: flex; } /* Prompt It! (and Close It! / Update) — big, fully visible, tappable */ a#promptIt, a#updateIt { font-size: 1.05em; line-height: 1.1; padding: 11px 14px; margin: 4px 2px; border-radius: 8px; white-space: nowrap; } a#promptIt { background: #2DD4BF; color: #06231f; font-weight: 700; } /* Settings gear — comfortable tap target */ #advConfig { padding: 9px 8px !important; } #advConfig img, #menu-toggle img { width: 24px; height: 24px; } /* ---- CKEditor toolbar: one horizontally-scrollable row (no wrapped dense rows) ---- */ #toolbar { width: 100%; overflow: hidden; } #toolbar .cke_toolbox { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space: nowrap; padding-bottom: 3px; } #toolbar .cke_toolbar { float: none !important; display: inline-flex !important; flex: 0 0 auto; } /* kill CKEditor's forced line breaks that create the second dense row */ #toolbar .cke_toolbar_break { display: none !important; } /* larger tap targets for toolbar buttons */ #toolbar a.cke_button { padding: 7px 5px !important; } #toolbar .cke_combo_button { padding: 4px 2px !important; } /* ---- Editor body: give the writing area room, compact footer ---- */ #editorcontainer { min-height: 200px; } #footer { padding: 12px; } footer.bs-docs-footer, .bs-docs-footer { font-size: 12px; } /* ---- Prompter overlay: sit right under the compact top bar, respect status bar ---- */ #framecontainer { top: calc(48px + env(safe-area-inset-top, 0px)); } } /* Very short landscape phones: tighten further */ @media (max-height: 430px) { a#promptIt, a#updateIt { font-size: 1em; padding: 9px 12px; } header#top.navbar .navbar-brand img { height: 22px; } #framecontainer { top: calc(44px + env(safe-area-inset-top, 0px)); } }