/* ========== XECUTE — css/09-autocomplete-logo.css ========== */ /* Easy Typing button/dropdown + dual logo system + responsive header collapse */ /* ====== AUTOCOMPLETE BUTTON IN TOOLBAR ====== */ .ac-toggle-btn { padding: 0 8px !important; width: auto !important; font-size: 11px !important; gap: 4px !important; color: var(--text-muted) !important; border: 1px solid transparent !important; border-radius: 4px !important; } .ac-toggle-btn.active { color: var(--accent-green) !important; border-color: rgba(63,185,80,0.3) !important; background: rgba(63,185,80,0.1) !important; } .ac-toggle-btn .ac-btn-label { font-size: 10px; letter-spacing: 0.3px; } /* ====== AUTOCOMPLETE DROPDOWN ====== */ .ac-dropdown { position: fixed; z-index: 99999; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); min-width: 200px; max-width: 280px; max-height: 200px; overflow-y: auto; padding: 3px; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .ac-item { padding: 5px 10px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.08s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-item:hover, .ac-item.selected { background: rgba(88,166,255,0.15); } .ac-item.selected { background: rgba(88,166,255,0.2); } .ac-label { color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; } .ac-match { color: var(--accent); font-weight: 700; } /* Preview input panel — mobile optimisation */ #previewInputArea { resize: none; } @media (max-width: 600px) { #previewInputOk { flex: 1; } .ac-btn-label { display: none; } } /* ===================================================== XECUTE — COMPREHENSIVE RESPONSIVE & FEATURE UPDATE ===================================================== */ /* ====== AUTO-ZOOM REMOVED ====== */ /* zoom: on breaks position:fixed stacking contexts — the notification bar would cover header buttons and the footer would shrink / float upward on small screens. Responsive layout is handled by the media queries below instead. */ /* ====== DUAL LOGO SYSTEM ====== */ /* logol.png — wide/rectangular — shown on large screens */ /* assets/logo.png — square — shown on small screens */ .logo-wide { height: 26px; width: auto; max-width: 110px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(88,166,255,0.4)); flex-shrink: 0; display: block; } .logo-square { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(88,166,255,0.4)); flex-shrink: 0; display: none; } @media (max-width: 600px) { .logo-wide { display: none; } .logo-square { display: block; } .logo-text { display: none !important; } } /* ====== RESPONSIVE HEADER BUTTON COLLAPSE ====== */ /* Buttons get hidden progressively; they re-appear inside ⋮ menu */ @media (max-width: 780px) { #imageUploadBtn { display: none !important; } } @media (max-width: 680px) { #cacheBtn { display: none !important; } } @media (max-width: 580px) { #shareBtn { display: none !important; } #importBtn { display: none !important; } } @media (max-width: 480px) { #installBtn, #settingsBtn { display: none !important; } #header-right { gap: 2px; } } /* ====== RESPONSIVE CONTENT RESIZE FIXES ====== */ #main-container { height: calc(100vh - var(--header-h) - var(--tabs-h) - var(--footer-h) - var(--statusbar-h)); min-height: 0; overflow: hidden; } /* Make sure split panes never overflow */ #editor-preview-split { overflow: hidden; min-height: 0; } #editor-container, #preview-container { overflow: hidden; min-height: 0; } /* Editor fills its container properly */ .CodeMirror-wrap, .CodeMirror { height: 100% !important; } /* Horizontal split fixes */ #editor-preview-split.horizontal { height: 100%; } #editor-preview-split.horizontal #editor-container { height: 100% !important; min-height: 0 !important; align-self: stretch; flex-shrink: 0; } #editor-preview-split.horizontal #preview-container { height: 100% !important; min-height: 0; }