:root{ --previewScale: 1; --title-sm: 15px; --meta-sm: 12px; --snippet-sm: 13px; --line-ar: 1.8; /* spacing scale */ --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; /* subtle separators */ --borderSoft: rgba(255,255,255,.075); --borderHair: rgba(255,255,255,.06); /* softer shadow */ --shadowSoft: 0 10px 26px rgba(0,0,0,.28); --bg:#0b1020; --panel:#101a33; --panel2:#0f1730; --text:#e9eeff; --muted:#a9b4dd; --accent:#6aa7ff; --danger:#ff5a7a; --ok:#37d67a; --warning:#d97706; --border:rgba(255,255,255,.08); --shadow: var(--shadowSoft); --radius:16px; --font: "IBM Plex Sans Arabic","Cairo","Noto Sans Arabic","Noto Naskh Arabic","Amiri", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* ===== Design system tokens (r576) ===== */ /* Surface hierarchy */ --surface-base: var(--bg); --surface-raised: var(--panel); --surface-overlay: rgba(12, 18, 32, .98); --surface-modal: rgba(14, 20, 38, .98); /* Radius scale */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* Font scale */ --font-xxs: 10px; --font-xs: 11px; --font-sm: 12px; --font-base: 13px; --font-md: 15px; --font-lg: 18px; /* Gap scale */ --gap-xs: 4px; --gap-sm: 6px; --gap-md: 8px; --gap-lg: 10px; --gap-xl: 12px; /* Interactive states */ --hover: rgba(255,255,255,.08); --hover-strong: rgba(255,255,255,.12); --pressed: rgba(255,255,255,.05); /* Z-index scale (r861) */ --z-base: 1; --z-sticky: 18; --z-dropdown: 40; --z-modal-backdrop: 50; --z-topbar: 55; --z-modal: 501; --z-toast: 7000; --z-debug: 9999; /* Borders */ --border-subtle: rgba(255,255,255,.06); --border-default: rgba(255,255,255,.10); --border-focus: rgba(106,167,255,.4); } /* ===== Controller View Preferences (UI-only) ===== Applied via Persisted per device (localStorage) and never affects Display/Casting surfaces. */ html[data-density="compact"]{ --s8: 6px; --s12: 10px; --s16: 12px; --s24: 18px; --title-sm: 14px; --meta-sm: 11px; --snippet-sm: 12px; --radius: 14px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --font-xxs: 9px; --font-xs: 10px; --font-sm: 11px; --font-base: 12px; --font-md: 14px; --gap-xs: 3px; --gap-sm: 5px; --gap-md: 7px; --gap-lg: 8px; --gap-xl: 10px; } html[data-density="dense"]{ --s8: 4px; --s12: 8px; --s16: 10px; --s24: 14px; --title-sm: 13px; --meta-sm: 10px; --snippet-sm: 11px; --radius: 12px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; /* Dense uses same font sizes as compact — difference is spacing only. Dropping below 11px makes text unreadable on most screens. */ --font-xxs: 9px; --font-xs: 10px; --font-sm: 11px; --font-base: 12px; --font-md: 13px; --gap-xs: 2px; --gap-sm: 4px; --gap-md: 5px; --gap-lg: 6px; --gap-xl: 8px; } /* Full width layout (controller only) */ html[data-fullwidth="1"] .container{ max-width: none; padding-left: 12px; padding-right: 12px; } /* Density: tighten key scroll surfaces */ html[data-density="compact"] .list{ padding: var(--s8); } html[data-density="dense"] .list{ padding: var(--s8); } html[data-density="compact"] .item{ padding: 8px 8px; border-radius: var(--radius-sm); } html[data-density="dense"] .item{ padding: 6px 8px; border-radius: var(--radius-sm); } html[data-density="compact"] #playlist .playlistItem{ padding-top: var(--s8); padding-bottom: var(--s8); } html[data-density="dense"] #playlist .playlistItem{ padding-top: 6px; padding-bottom: 6px; } html[data-density="compact"] #playlist .playlistTitle{ font-size: 15px; } html[data-density="dense"] #playlist .playlistTitle{ font-size: var(--font-md); } html[data-density="compact"] .slideList{ padding: var(--s12); } html[data-density="dense"] .slideList{ padding: var(--s12); } html[data-density="compact"] .slideItem{ padding: var(--s8); border-radius: var(--radius-md); gap: 8px; } html[data-density="dense"] .slideItem{ padding: var(--s8); border-radius: var(--radius-md); gap: 8px; } /* SlideCards List Mode (controller only) */ html[data-slideview="list"] .slideList{ padding: var(--s12); } html[data-slideview="list"] .slideItem{ padding: var(--s8); border-radius: var(--radius-md); gap:var(--gap-md); align-items: center; } html[data-slideview="list"] .slideNum{ min-width: 30px; height: 24px; border-radius:var(--radius-sm); font-size: var(--font-sm); } /* Reduce wasted indent for LTR cards in list mode */ html[data-slideview="list"] #slideList .slideItem[dir="ltr"] .slideText{ padding-left: 10px; } /* Song/Media SlideCards: clamp to 2 lines in list mode (UI preview only) */ html[data-slideview="list"] #slideList .slideItem:not([data-kind='bible']) .slideText{ font-size: clamp(calc(14px * var(--previewScale)), calc(1.2vw * var(--previewScale)), calc(18px * var(--previewScale))); line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; } /* Bible SlideCards: keep inner clamp system, but tighten to 2 lines in list mode */ html[data-slideview="list"] #slideList .slideItem[data-kind='bible'] .slideText{ font-size: clamp(calc(14px * var(--previewScale)), calc(1.2vw * var(--previewScale)), calc(18px * var(--previewScale))); line-height: 1.55; } html[data-slideview="list"] #slideList .slideItem[data-kind='bible'] .slideTextInner.bibleClamp{ -webkit-line-clamp: 2; } /* Media SlideCards: shrink thumbnail peek in list mode */ html[data-slideview="list"] #slideList .slideItem.isMedia .mediaPeek{ height: 84px; border-radius: var(--radius-sm); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:var(--font); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; touch-action: manipulation; background: radial-gradient(1200px 800px at 20% 10%, rgba(106,167,255,.18), transparent 50%), radial-gradient(900px 700px at 80% 20%, rgba(55,214,122,.12), transparent 55%), var(--bg); color:var(--text); } a{color:inherit} .container{ max-width:1400px; margin:0 auto; padding:16px; } .topbar{ position:relative; display:grid; grid-template-columns: auto 1fr auto; column-gap:12px; align-items:center; margin-bottom:14px; } /* Mobile header segmented toggle (Option A) */ .brand{ display:flex; align-items:center; gap:var(--gap-lg); font-weight:800; letter-spacing:.2px; } .pill{ font-size:var(--font-sm); color:var(--muted); border:none; padding:0; border-radius:0; background:transparent; } .actions{ display:flex; gap:var(--gap-lg); flex-wrap:wrap; justify-content:flex-start; align-items:center; } /* Mobile header nav (injected into .actions; hidden by default on desktop) */ #mobSearchBtn, #mobNavBtn{ display:none !important; } #mobSearchBtn.mobShow{ display:inline-flex !important; } #mobNavBtn.mobShow{ display:inline-flex !important; } .mobSearchBtn{ border:0 !important; background:transparent !important; box-shadow:none !important; } .mobSearchBtn.isActive{ background: var(--hover-strong) !important; border-radius: 999px; } .mobSearchBtn .mobSearchGlyph{ display:inline-block; width:18px; height:18px; opacity:.9; background-repeat:no-repeat; background-position:center; background-size:18px 18px; /* inline SVG magnifier */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M10 4a6 6 0 104.472 10.03l4.249 4.248 1.414-1.414-4.248-4.249A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E"); } .mobNavChip{ border: none; background: transparent; border-radius: 0; padding: 6px 4px; height: auto; display:inline-flex; align-items:center; gap:var(--gap-sm); color:#fff; font-weight:700; font-size:var(--font-base); line-height:1; box-shadow:none; } .mobNavChip[disabled]{ opacity:.45; } .mobNavArrow{ font-weight:900; opacity:.9; } .mobNavArrowLeft{ display:none; } .mobNavArrowRight{ display:inline; } .mobNavChip.isBack .mobNavArrowLeft{ display:inline; } .mobNavChip.isBack .mobNavArrowRight{ display:none; } /* Topbar burger button: icon-only (no border), animates to X when menu is open */ .burgerBtn{ appearance:none; -webkit-appearance:none; background:transparent; border:0; padding:6px; margin:0; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:0; color:#ffffff; } .burgerBtn:focus-visible{ outline:2px solid currentColor; outline-offset:2px; } .burgerLines{ width:18px; height:14px; display:inline-block; position:relative; } .burgerLines span{ position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform .18s ease, top .18s ease, opacity .18s ease; } .burgerLines span:nth-child(1){ top:0; } .burgerLines span:nth-child(2){ top:6px; } .burgerLines span:nth-child(3){ top:12px; } .burgerBtn.isOpen .burgerLines span:nth-child(1){ top:6px; transform:rotate(45deg); } .burgerBtn.isOpen .burgerLines span:nth-child(2){ opacity:0; } .burgerBtn.isOpen .burgerLines span:nth-child(3){ top:6px; transform:rotate(-45deg); } .burgerLine { background-color: #ffffff; } /* Center block: Presenter Tab + Casting + Pause/Resume + LivePin bar (inserted by JS) NOTE: we do NOT change any spacing between the controls themselves; we just keep them together and centered. */ .topCenterBlock{ justify-self:center; display:flex; align-items:center; gap:var(--gap-xl); /* matches original .topbar gap */ min-width:0; margin-left:0; } .btn{ border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--text); padding:10px 12px; border-radius:var(--radius-md); cursor:pointer; box-shadow: var(--shadow); transition: transform .04s ease, background .12s ease, border-color .12s ease; display:inline-flex; align-items:center; gap:var(--gap-md); } .btn:hover{ background: var(--hover); } .btn:active{transform:translateY(1px)} .btn.primary{ background: linear-gradient(180deg, rgba(106,167,255,.35), rgba(106,167,255,.15)); border-color: rgba(106,167,255,.35); } .btn.danger{ background: linear-gradient(180deg, rgba(255,90,122,.28), rgba(255,90,122,.12)); border-color: rgba(255,90,122,.38); } .btn.ok{ background: linear-gradient(180deg, rgba(55,214,122,.25), rgba(55,214,122,.10)); border-color: rgba(55,214,122,.35); } .grid{ display:grid; grid-template-columns: 1.1fr 1.3fr 1.1fr; gap: var(--s24); } @media (max-width:1100px){ .grid{grid-template-columns:1fr; } } /* Mobile Controller Mode (PWA / small screens) - Keep desktop untouched - Mobile flow: stacked views (Results OR Slide Cards) - Hide Playlist panel entirely on mobile - Always hide the Preview viewport (large preview area toggled via burger) */ /* Mobile controller rules should also apply in landscape on phones where width can exceed 820px. Use max-height as a second gate so portrait stays unchanged while landscape becomes usable. */ @media (max-width: 820px) and (any-pointer: coarse), (max-height: 520px) and (any-pointer: coarse){ /* Mobile topbar layout: burger left, live controls centered, quick actions right */ .topbar{ grid-template-columns: 1fr auto 1fr; column-gap: 10px; } .topbar .brand{ justify-self: start; } .topbar .actions{ justify-self: end; justify-content: flex-end; gap:var(--gap-md); flex-wrap: nowrap; } /* visibility is controlled by JS via .mobShow */ /* mobNavBtn is toggled by JS when slides exist */ .topCenterBlock{ margin-left: 0 !important; justify-self: center; justify-content: center; gap:var(--gap-sm); /* tighter between Display and Pause */ } /* Mobile header: keep only Display + Pause/Resume (cast is not reliable on mobile browsers). Overlays remain accessible via burger menu only on mobile. */ .topbar .topCastBtn{ display:none !important; } #btnCastIcon{ display:none !important; } body.hasMobileCastUI .topbar .topCastBtn, body.hasMobileCastUI #btnCastIcon{ display:inline-flex !important; } #overlaysGroup{ display:none !important; } .topbar .livePinBar{ display:none !important; } /* Mobile header: hide brand logo + title text; keep burger only */ .topbar .brandMark{ display:none !important; } .topbar .brand > div:nth-child(3){ display:none !important; } .topbar .brand{ gap: 0 !important; } /* Make the app a single column with one scroll root */ .container{ display:flex; flex-direction: column; min-height: 100dvh; } .grid{ display:flex; flex-direction: column; gap:var(--gap-xl); flex: 1 1 auto; min-height: 0; /* critical for nested scroll areas */ } /* Cards become flex columns so their content lists can scroll */ .grid > section.card{ display:flex; flex-direction: column; min-height: 0; } .grid > section.card > .content{ flex: 1 1 auto; min-height: 0; display:flex; flex-direction: column; } /* DOM order in index.html: 1) Playlist 2) Preview 3) Search */ /* Hide Playlist completely on mobile */ .grid > section.card:nth-child(1){ display:none !important; } /* Stacked workflow: - Default: show Search (results), hide Preview (slide cards) - When body.mobShowSlides: show Preview, hide Search */ .grid > section.card:nth-child(2){ display:none; } .grid > section.card:nth-child(3){ display:flex; } body.mobShowSlides .grid > section.card:nth-child(2){ display:flex; } body.mobShowSlides .grid > section.card:nth-child(3){ display:none; } /* Always hide preview viewport on mobile (keep slide list visible) */ #preview{ display:none !important; } /* Hide the burger-menu switch that toggles preview viewport (mobile is always hidden) */ #rowHidePreview{ display:none !important; } /* Make results + slide list scroll properly (no clipping behind other panels) */ #results, #slideList{ overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Ensure lists take remaining vertical space in stacked mobile workflow */ #results, #slideList{ flex: 1 1 auto; min-height: 0; } /* On mobile, the view bar handles Results ⇄ Slides; hide the legacy preview-header back pill. */ /* Keep Search header actions clean (only + button remains) */ .searchHeaderActions{ display:flex; align-items:center; gap:var(--gap-lg); } /* (r864) Mobile: increase A+/A- touch targets to 44px minimum */ .splitLeft .previewFontBtn{ min-width: 44px !important; min-height: 44px !important; padding: 8px !important; font-size: 16px !important; touch-action: manipulation; } /* Top header icons: center them and tighten spacing (mobile-only) */ .topCenterBlock{ margin-left: 0 !important; justify-self: center; justify-content: center; gap:var(--gap-md); } .topbar .topWindowBtn, .topbar .topPauseBtn, .topbar .topCastBtn{ position: static !important; top: auto !important; left: auto !important; transform: none !important; } /* Footer responsive (keep footer, prevent overflow) */ .footerInner{ flex-wrap: wrap; row-gap: 8px; column-gap: 10px; padding: 0; } .footerText{ display:flex; flex-wrap: wrap; justify-content: center; gap:var(--gap-md) 10px; max-width: 100%; text-align: center; line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; } .footerText *{ white-space: normal !important; } /* Mobile header: center top icons */ .topbar .actions{ justify-content: center !important; } /* Mobile footer: hide "Created by..." and center content */ #footerBuild{ display:none !important; } .footerLeft{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap-md) 10px; } .footerInner{ justify-content:center; } .mobFootGap{ display:inline-block; width:12px; } } .card{ background: rgba(255,255,255,.035); border: 1px solid var(--borderHair); border-radius: 18px; box-shadow: 0 10px 24px rgba(0,0,0,.22); overflow:hidden; } .card header{ padding: var(--s16); border-bottom: 1px solid var(--borderHair); display:flex; align-items:center; justify-content:space-between; gap:var(--gap-lg); position: relative; } /* Search panel header: match other panel headers (title left, action icons right) */ .searchHeader{ justify-content:space-between; position: relative; } .searchHeaderText{ text-align:left; } /* Search header right-side action group (desktop + mobile) */ .searchHeaderActions{ display:flex; align-items:center; gap:var(--gap-lg); } /* Mobile-only nav pill in Search header (hidden on desktop) */ /* Mobile-only back button (hidden on desktop) */ /* Mobile nav pill base (desktop safe: only active styling under mobile media query) */ /* Global Add (+) control: in normal flow (no absolute positioning) */ .addMenuBtn{ position: static !important; left: auto !important; right: auto !important; top: auto !important; margin-top: 0 !important; transform: none !important; } .addMenuBtn .addPlus{ font-size: 22px; font-weight: 800; line-height: 1; } /* Add (+) menu trigger should match slide panel A-/A+ (no border chrome, no translate animation) */ .addMenuBtn.previewFontBtn{ border: none !important; background: transparent !important; box-shadow: none !important; transition: background-color .12s ease, opacity .12s ease !important; } .addMenuBtn.previewFontBtn:hover, .addMenuBtn.previewFontBtn:active{ transform: none !important; } /* Add dropdown menu (match Advanced filter dropdown look) */ .addMenu{ position: fixed; width: max-content; min-width: unset; max-width: calc(100vw - 24px); direction: ltr; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 4px; box-shadow: var(--shadow); backdrop-filter: blur(8px); z-index: 9999; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .12s ease, transform .12s ease; } .addMenu.show{ opacity: 1; transform: translateY(0); pointer-events: auto; } .addMenu .addItem{ display:flex; align-items:center; gap:var(--gap-md); width:auto; white-space: nowrap; padding: 7px 10px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text); cursor:pointer; font-family: inherit; text-align:left; } .addMenu .addItem:hover{ background: var(--hover); } .addMenu .addItem:active{ opacity: .92; } .addMenu .addItem.disabled{ opacity: .45; cursor: default; } .addMenu .addItem.disabled:hover{ background: var(--pressed); } .addMenu .addIcon{ width: 20px; height: 20px; border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; background: transparent; border: none; } .addMenu .addIcon svg{ display:block; } .addMenu .addText{ flex: 1; display:flex; flex-direction:column; line-height: 1.15; } .addMenu .addTitle{ font-weight: 650; } .addMenu .addTitle.strong{ font-weight: 800; } .card header .title{ font-weight:800; color:var(--text); } .card header .sub{ font-size:var(--font-sm); color:var(--muted); } .card .content{ padding: var(--s16); } .input{ width:auto; padding:12px 12px; border-radius:var(--radius-md); border:1px solid var(--border); background: rgba(0,0,0,.25); color:var(--text); outline:none; } /* r003: Make search input render correctly for mixed RTL/LTR queries (Arabic + English refs) */ #q{ unicode-bidi: plaintext; text-align: start; } .row{display:flex; gap:var(--gap-lg); align-items:center; flex-wrap:wrap} .small{font-size:var(--font-sm); color:var(--muted)} .tabs{display:flex; gap:var(--gap-md); flex-wrap:wrap} .tab{ padding:8px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(0,0,0,.18); cursor:pointer; user-select:none; font-size:var(--font-sm); color:var(--muted); transition: color .12s ease, border-color .12s ease, background .12s ease; } .tab.active{ color:var(--text); border-color: rgba(106,167,255,.45); background: rgba(106,167,255,.14); } .list{ overflow:auto; padding: var(--s12); } .item{ padding:10px 10px; border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer; /* direction handled per-item via dir="auto" */ text-align:start; transition: background .12s ease, border-color .12s ease; } .item:hover{background: var(--hover)} .item.active{ border-color: rgba(106,167,255,.45); background: rgba(106,167,255,.10); } .item .meta{ margin-top:4px; font-size:var(--meta-sm); color:var(--muted); /* direction handled per-item via dir="auto" */ text-align:start; line-height:1.4; } .split{ display:flex; gap:var(--gap-lg); flex-wrap:wrap; align-items:center; } .splitLeft, .splitRight{ display:flex; gap:var(--gap-lg); align-items:center; } .splitCenter{ flex:1; display:flex; justify-content:center; align-items:center; gap:var(--gap-lg); min-width:120px; } .splitRight{ margin-left:auto; } .bibleChapterNav.isOff{ display:none !important; } .kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border:1px solid var(--border); background: rgba(0,0,0,.25); padding:2px 6px; border-radius:var(--radius-sm); font-size:var(--font-sm); color:var(--muted); } .preview{ padding: var(--s16); /* direction handled via dir="auto" on preview */ text-align:center; line-height:1.7; white-space:pre-wrap; font-weight:700; height: min(36vh, 420px); min-height:200px; overflow:auto; font-size: calc(32px * var(--previewScale)); } .preview .subtitle{ margin-bottom:10px; text-align:right; font-size:16px; font-weight:600; color:var(--muted); line-height:1.25; } .controls{ display:flex; gap:var(--gap-md); flex-wrap:wrap; align-items:center; justify-content:space-between; padding:12px 14px; border-top:1px solid var(--border); } .controls .left, .controls .right{display:flex; gap:var(--gap-md); flex-wrap:wrap; align-items:center} .badge{ font-size:var(--font-sm); padding:4px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background: rgba(0,0,0,.25); } .modalBackdrop{ position:fixed; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; opacity:0; visibility:hidden; pointer-events:none; transition: opacity 180ms ease-out, visibility 0s linear 180ms; } /* dbg-modal base hiding — must be in core CSS, not lazy-loaded modals CSS, because the debug modal HTML exists in the static page from first paint. */ .modalBackdrop.show{ opacity:1; visibility:visible; pointer-events:auto; transition: opacity 180ms ease-out, visibility 0s linear 0s; } .modal{ width:min(900px, 100%); background: var(--surface-modal); border:1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow:hidden; transform: scale(0.97); transition: transform 180ms ease-out; } .modalBackdrop.show .modal{ transform: scale(1); } .modal header{ padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;} .modal .body{ padding:14px; } textarea.input{ min-height:220px; resize:vertical; text-align:start; line-height:1.7; } .hr{height:1px; background: var(--borderHair); margin: var(--s16) 0} .note{ border:1px dashed rgba(106,167,255,.35); background: rgba(106,167,255,.08); padding:10px 12px; border-radius: var(--radius-md); color: var(--muted); font-size: var(--font-base); } /* Add/Edit Song Modal */ .btn.ghost{ background:rgba(255,255,255,.03); box-shadow:none; } .btn.small{ padding:6px 10px; border-radius:var(--radius-sm); font-size:var(--font-sm); } /* ===== Lyrics Fetch (r861) ===== */ @keyframes lyricsSpin{ to{ transform:rotate(360deg); } } @keyframes lyricsFetchCardIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } } /* Expandable full lyrics preview */ /* Slide list (presenter only) */ .slideList{ overflow:auto; padding: var(--s16); border-top: 1px solid var(--borderHair); background: transparent; } .slideItem{ position:relative; display:flex; gap:var(--gap-lg); padding: var(--s12); border-radius: var(--radius-lg); border: 1px solid transparent; cursor:pointer; /* direction handled per-item via dir="auto" */ text-align:start; align-items:flex-start; line-height:1.45; transition: background .12s ease, border-color .12s ease; } #slideList .slideItem{ direction: rtl; } #slideList .slideItem .slideText{ width: 100%; text-align: right; } /* English Bible slide cards: override SlideCards panel direction/alignment when dir="ltr" is set on the card. */ #slideList .slideItem[dir="ltr"]{ direction: ltr; } #slideList .slideItem[dir="ltr"] .slideText{ text-align: left; padding-left: 20px; padding-top: 0; padding-bottom: 0; padding-right: 0; } /* Bible slide cards (slide list): - Clamp is applied ONLY on the inner text block (no padding). - Wrapper reserves space so the verse badge never overlaps text. - Expand affordance is positioned on the wrapper so it is never clipped by line-clamp. */ #slideList .slideItem[data-kind='bible'] .slideText{ position: relative; padding-left: 20px; /* Keep the verse badge (bottom-left) from colliding with text, without adding a visible "blank line" under the card. */ /* Reserve space for the slide number badge (bottom-left, absolute) so text never overlaps it. */ } #slideList .slideItem[data-kind='bible'] .slideTextInner{ white-space: normal; word-break: break-word; overflow-wrap: anywhere; } /* Bible slide cards: 3-line clamp in slide list (UI-only) */ #slideList .slideItem[data-kind='bible'] .slideTextInner.bibleClamp{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .slideItem + .slideItem{ margin-top: 0; } .slideItem:hover{background: var(--hover)} .slideItem.active{ border-color: rgba(106,167,255,.45); background: rgba(106,167,255,.10); } @keyframes slidePulse{ 0% { background: rgba(106,167,255,.22); } 100%{ background: rgba(106,167,255,.10); } } .slideItem.slidePulse{ animation: slidePulse 350ms ease-out; } .slideNum{ min-width:36px; height:28px; border-radius:var(--radius-sm); display:grid; place-items:center; font-weight:800; color:var(--muted); border:1px solid var(--border); background: rgba(0,0,0,.22); direction:ltr; } .slideText{ white-space:pre-wrap; color: var(--text); font-size: clamp(calc(18px * var(--previewScale)), calc(1.6vw * var(--previewScale)), calc(22px * var(--previewScale))); line-height:var(--line-ar); /* Default: reduce typographic competition; active card can be slightly stronger via .slideItem.active */ font-weight:500; letter-spacing:0; } /* Active card: modest emphasis only */ .slideItem.active .slideText{ font-weight:600; } .slideContent{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; } .mediaPeek{ position:relative; height:160px; aspect-ratio:16 / 9; width:auto; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); background: rgba(0,0,0,.18); } /* Placeholder uses logo watermark; deterministic and fast */ .mediaPeek.missingThumb::before{ content:""; position:absolute; inset:0; background-image: url('logo.png'); background-repeat:no-repeat; background-position:center; background-size: contain; opacity: .18; pointer-events:none; } .mediaPeekImg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; } .mediaPeekDur{ position:absolute; right:10px; bottom:8px; padding:4px 8px; border-radius:var(--radius-sm); font-weight:800; font-size:var(--font-sm); color: var(--text); background: rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12); direction:ltr; pointer-events:none; } /* Connect Display split-button */ .btnGroup{ position:relative; display:inline-flex; gap:0; } .btnGroup .btn{ border-radius:var(--radius-md); box-shadow: var(--shadow); } .btnGroup .btn.primary{ box-shadow: var(--shadow); } .btnGroup .btn#btnConnectMain{ border-top-right-radius:0; border-bottom-right-radius:0; } .btnGroup .btn.caret{ width:44px; justify-content:center; border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1px; } .btnGroup .menu{ position:absolute; top: calc(100% + 8px); right:0; width: max-content; max-width: calc(100vw - 24px); background: var(--surface-overlay); border:1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow); padding:4px; display:none; z-index:60; } .btnGroup .menu.open{ display:block; } /* Overlays dropdown (header) - condensed */ #overlaysMenu.menu{ position: fixed !important; right: auto !important; left: 0; top: 0; width: max-content; min-width: 220px; max-width: calc(100vw - 24px); padding: 4px; z-index: 6000 !important; pointer-events: auto; background: var(--surface-overlay) !important; border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow); } @media (max-width: 900px){ #overlaysGroup{ display:none !important; } } /* Header popover is a quick-access proxy: only show Target controls when the countdown is ON. When countdown is OFF, the burger menu remains the full settings surface and the header ignores any stored target. */ #overlaysMenu #ovRowTimerTarget{ display:none; } #overlaysMenu[data-ov-idle="1"] #ovRowTimerTarget{ display:flex; } /* Target row: keep the overlay tight by removing the redundant "Target" label. The burger menu remains the authoritative full settings panel. */ #overlaysMenu #ovRowTimerTarget .ovLabel{ display:none !important; } #overlaysMenu{ font-size: var(--font-base); } #overlaysMenu .ovRow{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap-md); padding: 5px 6px; border-radius: var(--radius-sm); border: 1px solid transparent; } /* No hover highlighting: keep it stable while moving the mouse */ #overlaysMenu .ovRow:hover{ background: transparent; border-color: transparent; } #overlaysMenu .ovLabel{ display:flex; flex-direction:column; gap: 0; min-width:0; } #overlaysMenu .ovTitle{ font-weight: 600; font-size: var(--font-base); line-height: 1.3; color: var(--text); } /* Remove descriptions to keep the popover tight */ #overlaysMenu .ovHelp{ display:none; } /* But still show warnings when present */ #overlaysMenu .ovCtl{ flex: 0 0 auto; } #overlaysMenu .ovCtl.ovCtlTimer{ display:grid; grid-template-columns: 1fr 1fr; gap:var(--gap-md); align-items:center; width:100%; min-width:0; } #overlaysMenu .menuInput{ padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--font-sm); height: 30px; width: 100%; max-width: 100%; box-sizing: border-box; } /* Standby selector: borderless + caret (Bible Navigator style) */ #overlaysMenu .menuSelect{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--text); padding: 2px 18px 2px 0; border-radius: 0; font-size: var(--font-base); font-weight: 600; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.88)' d='M7 10l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 12px 12px; } #overlaysMenu .menuSelect:focus{ outline: 2px solid rgba(120,180,255,.25); outline-offset: 2px; } /* No hover highlight in this popover */ #overlaysMenu .menuItem:hover{ background: transparent; border-color: transparent; } .menuItem{ width:100%; text-align:left; } .menuItem{ width:auto; text-align:left; padding:10px 10px; border-radius:var(--radius-md); border:1px solid transparent; background: transparent; color: var(--text); cursor:pointer; font-family: var(--font); } .menuItem:hover{ background: var(--pressed); border-color: rgba(255,255,255,.08); } /* Result row hover action (Add to playlist) */ .rowActions{ display:flex; align-items:center; margin-inline-start:auto; direction:ltr; opacity:0; pointer-events:none; transition: opacity 120ms ease; } .item:hover .rowActions, .item:focus-within .rowActions{ opacity:1; pointer-events:auto; } .iconBtn{ padding:0; width:34px; height:30px; border-radius:var(--radius-sm); border:1px solid var(--border-default); background: rgba(0,0,0,.18); color: var(--text); cursor:pointer; display:grid; place-items:center; line-height:0; } .iconBtn:hover{ background: var(--pressed); border-color: rgba(255,255,255,.18); } .iconBtn:active{ transform: translateY(1px); } .iconBtn > span{ display:flex; align-items:center; justify-content:center; line-height:0; } .iconBtn svg{ display:block; } .iconBtn svg{ width:18px; height:18px; display:block; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* --- Compact results rows --- */ #results .item{ padding-top: 8px !important; padding-bottom: 8px !important; } #results .item .name{ line-height: 1.15 !important; } #results .item .meta{ margin-top: 2px !important; line-height: 1.1 !important; } /* --- One-line title + add button (same row) --- */ #results .item{ position: relative; } #results .rowTop{ display:flex; align-items:center; gap:var(--gap-lg); } #results .rowTop .name{ flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; /* Keep ellipsis as last-resort; JS will try to shrink font first */ text-overflow: ellipsis; } #results .rowTop .rowActions{ flex: 0 0 auto; opacity:0; pointer-events:none; transition: opacity 120ms ease; } #results .item:hover .rowTop .rowActions, #results .item:focus-within .rowTop .rowActions{ opacity:1; pointer-events:auto; } #results .rowTop .iconBtn{ width:26px; height:22px; border-radius:9px; } #results .rowTop .iconBtn svg{ width:16px; height:16px; } /* --- Results rows: single-line title + hover add button --- */ #results .item{ display:flex; align-items:center; gap:var(--gap-lg); padding-top:6px !important; padding-bottom:6px !important; } /* Search results: one authoritative row contract only. The row owns all layout; the outer item only supplies spacing/state. */ #results .item .resultTitle, #results .item .meta, #results .item .resultSnippet{ text-align: right !important; } #results .item .resultTitle{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* last resort */ font-size:var(--title-sm); font-weight:600; line-height:1.25; } .resultNotice{ margin-top: 2px; font-size: var(--font-sm); color: #bbb; direction: ltr; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Media inline rename input (Media-only) */ .mediaInlineRenameInput{ width: 100%; max-width: 100%; font-size: var(--title-sm); font-weight: 600; white-space: nowrap; line-height: 1.25; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.22); color: inherit; outline: none; box-sizing: border-box; } .mediaInlineRenameInput:focus{ border-color: rgba(255,255,255,0.32); background: rgba(0,0,0,0.28); } #results .item .rowActions{ flex:0 0 auto; display:inline-flex; align-items:center; opacity:0; pointer-events:none; transition: opacity 120ms ease; } #results .item:hover .rowActions, #results .item:focus-within .rowActions{ opacity:1; pointer-events:auto; } #results .item .iconBtn{ width:26px; height:22px; border-radius:9px; } #results .item .iconBtn svg{ width:16px; height:16px; } /* --- Playlist drag handle --- */ #playlist .playlistItem{ position:relative; display:grid; grid-template-columns: minmax(0,1fr) 22px 28px; align-items:center; column-gap:10px; padding: var(--s12) 0; padding-left: 58px; /* reserve space for left-side remove button + live dot */ direction:ltr; } /* Playlist drag insertion indicator */ .plInsertLine{ position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: rgba(233,238,255,.92); box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; z-index: 50; display: none; } /* Optional hover cues for before/after intent */ .playlistItem.plDropBefore{ box-shadow: inset 0 1px 0 rgba(233,238,255,.28); } .playlistItem.plDropAfter{ box-shadow: inset 0 -1px 0 rgba(233,238,255,.28); } #playlist .playlistTitle{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.15; font-size:16px; font-weight:700; text-align:right; justify-self:end; width:100%; } .dragHandle{ width:28px; height:24px; border-radius:var(--radius-sm); border:1px solid var(--border-default); background: rgba(0,0,0,.18); color: var(--text); cursor: grab; display:grid; place-items:center; flex:0 0 auto; opacity: 0.35; } .dragHandle:hover{ opacity:1; border-color: rgba(255,255,255,.18); background: var(--pressed); } .dragHandle:active{ cursor: grabbing; transform: translateY(1px); } .dragHandle svg{ width:16px; height:16px; fill:none; stroke: currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } #playlist .playlistItem.dragOver{ outline: 2px solid rgba(106,167,255,.45); background: rgba(106,167,255,.08); } #playlist .playlistItem.dragging{ opacity: 0.55; } /* --- Connect menu: clamp to viewport --- */ #connectMenu.menu{ position: fixed !important; right: auto !important; left: 0; top: 0; } /* Import playlist file upload */ .importFileRow{ display:flex; gap:var(--gap-xl); align-items:center; justify-content:flex-start; flex-wrap:wrap; } .fileBtn{ display:inline-flex; align-items:center; gap:var(--gap-lg); padding:10px 12px; border-radius:var(--radius-md); border:1px solid var(--border-default); background: rgba(0,0,0,.18); cursor:pointer; user-select:none; } .fileBtn:hover{ background: var(--pressed); border-color: rgba(255,255,255,.18); } .fileBtn input{ display:none; } .fileIcon{ width:24px; height:24px; display:grid; place-items:center; border-radius:var(--radius-sm); background: var(--hover); font-weight:900; } .fileText{ font-weight:800; } .fileHint{ opacity:.8; font-size: var(--font-base); } /* Audience fade transition */ .display{ position: relative; overflow: hidden; } .slideLayer, .slide-layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; white-space:pre-wrap; opacity:0; transition: opacity 260ms ease-in-out; } .slideLayer.show, .slide-layer.show{ opacity:1; } /* Branding */ .brandMark{ width:34px; height:34px; border-radius:var(--radius-md); background: rgba(0,0,0,.25); display:grid; place-items:center; border:1px solid rgba(106,167,255,.35); overflow:hidden; } .brandLogo{ width:100%; height:100%; object-fit:contain; display:block; } /* Connect menu extras */ .menuSep{ height:1px; background: var(--hover); margin: 8px 6px; border-radius: 99px; } .menuItem.danger{ color: var(--text); } .menuItem.danger:hover{ background: rgba(255,80,80,.10); } /* Preview vs Live (border on preview box) */ #preview{ border: 3px solid rgba(255,255,255,.08); border-radius: 18px; transition: border-color 180ms ease, box-shadow 180ms ease; } /* Preview: ensure per-line bidi spans render on separate lines */ #preview .bidi-line{ display:block; } #preview.isLive{ border-color: rgba(255,70,70,.98); box-shadow: 0 0 0 4px rgba(255,70,70,.28); } #preview.isPreview{ border-color: rgba(70,255,140,.92); box-shadow: 0 0 0 4px rgba(70,255,140,.22); } /* Preview (middle slide panel): Bible overflow indicator + full-verse popup (UI-only) */ #preview .bidi-line.hasOverflow{ position: relative; cursor: pointer; /* Reserve space for the ⤢ indicator at the inline end without shifting layout */ padding-inline-end: 1.4em; } #preview .bidi-line.hasOverflow::after{ content: "⤢"; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); opacity: .78; font-size: .85em; line-height: 1; pointer-events: none; } /* Inline expanded verse (Slide list cards) — bounded height, no scrolling. Uses the SAME .slideText element (no duplicate verse, no separator). */ #slideList .slideItem.isExpanded .slideText{ white-space: normal; overflow: hidden; /* no inline scrolling */ max-height: 200px; /* bounded expansion */ position: relative; /* for the Open button overlay */ } #slideList .slideItem.isExpanded .slideText.needsFull{ padding-bottom: 34px; /* room for Open button */ /* subtle fade at bottom to communicate truncation */ mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%); } #slideList .slideItem.isExpanded .slideOpenFull{ position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); padding: 6px 10px; font-size: var(--font-sm); color: var(--text); cursor: pointer; } #slideList .slideItem.isExpanded .slideOpenFull:hover{ background: rgba(0,0,0,.72); } #slideList .slideItem.isExpanded .slideOpenFull:focus{ outline: 2px solid rgba(106,167,255,.55); outline-offset: 2px; } /* Full verse popup (Preview panel only) */ #pvOverflowPopup{ position: fixed; inset: 0; z-index: 3000; display: none; } #pvOverflowPopup.open{ display:block; } #pvOverflowPopup .pvOverflowBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); } #pvOverflowPopup .pvOverflowCard{ position:absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(860px, 92vw); max-height: min(70vh, 620px); background: var(--surface-modal); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px 16px 14px 16px; overflow: hidden; } #pvOverflowPopup .pvOverflowClose{ position:absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: var(--font-lg); line-height: 1; } #pvOverflowPopup .pvOverflowBody{ margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); max-height: calc(min(70vh, 620px) - 60px); overflow: auto; text-align: center; } #pvOverflowPopup .pvOverflowBody .bidi-lines{ display:flex; flex-direction: column; gap: .28em; } #pvOverflowPopup .pvOverflowBody .bidi-line{ display:block; white-space: normal !important; overflow: visible !important; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; } /* ===== Slide list verse-card overflow affordance (Bible-only) ===== */ /* Bible verse expand control - Collapsed: sits immediately after the visible ellipsis (no pill), without covering text. - Expanded: sits inline after the last word (icon flips inward). */ #slideList .slideItem[data-kind='bible'] .slideText{ position: relative; } /* Base button: no pill */ #slideList .slideItem[data-kind='bible'] .slideText .slideExpand{ background: none; border: 0; padding: 0; margin: 0; line-height: 1; cursor: pointer; color: rgba(255,255,255,.78); opacity: .92; } #slideList .slideItem[data-kind='bible'] .slideText .slideExpand:hover{ opacity: 1; color: var(--text); } #slideList .slideItem[data-kind='bible'] .slideText .slideExpand:focus{ outline: 2px solid rgba(106,167,255,.55); outline-offset: 2px; border-radius: 6px; } /* Collapsed state: reserve space so the icon never overlays verse text */ /* Option C: manual inline ellipsis so the expand icon can sit immediately after "…" */ #slideList .slideItem[data-kind='bible']:not(.isExpanded) .slideTextInner.inlineEllipsis{ /* We are no longer relying on -webkit-line-clamp for ellipsis in this mode */ display: block; -webkit-line-clamp: unset; padding-inline-end: 0; } #slideList .slideItem[data-kind='bible']:not(.isExpanded) .slideTextInner.inlineEllipsis .slideExpand.inlineEllipsisBtn{ position: static !important; inset: auto !important; bottom: auto !important; margin-inline-start: 4px; margin-inline-end: 0; padding: 0; width: auto; height: auto; box-shadow: none; background: transparent; } /* Expanded state: button is appended inline after the verse text */ #slideList .slideItem[data-kind='bible'].isExpanded .slideText .slideExpand{ position: static; inset: auto; width: auto; height: auto; display: inline-flex; vertical-align: baseline; margin-inline-start: 6px; } /* Full verse popup (Slide list cards) */ #slOverflowPopup{ position: fixed; inset: 0; z-index: 3000; display: none; } #slOverflowPopup.open{ display:block; } #slOverflowPopup .slOverflowBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); } #slOverflowPopup .slOverflowCard{ position:absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(860px, 92vw); max-height: min(70vh, 620px); background: var(--surface-modal); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px 16px 14px 16px; overflow: hidden; } #slOverflowPopup .slOverflowClose{ position:absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: var(--font-lg); line-height: 1; } #slOverflowPopup .slOverflowBody{ margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); max-height: calc(min(70vh, 620px) - 60px); overflow: auto; text-align: center; } #slOverflowPopup .slOverflowBody .bidi-lines{ display:flex; flex-direction: column; gap: .28em; } #slOverflowPopup .slOverflowBody .bidi-line{ display:block; white-space: normal !important; overflow: visible !important; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; } /* Device toggles (replaces dropdown) */ .switch{ width: 42px; height: 24px; border-radius: 999px; background: var(--hover); border: 1px solid rgba(255,255,255,.12); position: relative; flex: 0 0 auto; transition: background 160ms ease, border-color 160ms ease; } .switch::after{ content:""; position:absolute; width: 18px; height: 18px; border-radius: 50%; left: 3px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.85); transition: left 160ms ease, background 160ms ease; box-shadow: 0 6px 14px rgba(0,0,0,.35); } @keyframes knobWiggle{ 0%,100%{ transform: translateY(-50%) scale(1); } 50%{ transform: translateY(-50%) scale(1.06); } } /* Hide display status pill (toggles replace it) */ #displayStatus{ display:none !important; } #displayStatus{ display:none !important; } .appFooter{ position: static; margin-top: 10px; padding: 10px 12px; border-top: 1px solid var(--border-default); background: rgba(10,10,10,.65); } .footerInner{ display:flex; align-items:center; justify-content:center; } .footerText{ font-size: var(--font-sm); opacity: .85; font-weight: 700; } /* Small checkbox (used for display options like Shadow) */ /* Playlist remove (minus) button - shows on hover (pinned to physical LEFT, like results actions) */ #playlist .playlistRemoveBtn{ position:absolute; left:0; top:50%; width:28px; height:24px; display:inline-flex; align-items:center; justify-content:center; border: none; background: transparent; color: var(--text); border-radius:var(--radius-sm); cursor: pointer; opacity: 0; transform: translateY(-50%); pointer-events: none; transition: opacity .15s ease, background .15s ease; } #playlist .playlistItem:hover .playlistRemoveBtn, #playlist .playlistItem:focus-within .playlistRemoveBtn{ opacity: 1; pointer-events: auto; } #playlist .playlistRemoveBtn:hover{ background: rgba(255,79,79,.14); } #playlist .playlistRemoveBtn svg{ width:16px; height:16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* Live-on-projector indicator in playlist */ #playlist .playlistLiveDot{ width:10px; height:10px; border-radius:999px; background: rgba(255, 61, 61, .95); box-shadow: 0 0 0 3px rgba(255, 61, 61, .18); /* Pin next to the remove button on the physical LEFT (inside the row gutter) */ position: absolute; left: 32px; top: 50%; margin-top: -5px; /* vertically center without using transform (keeps pulse keyframes intact) */ opacity: 0; transform: scale(.9); transition: opacity .15s ease, transform .15s ease; } #playlist .playlistItem.isLiveSong .playlistLiveDot{ opacity: 1; transform: scale(1); } /* Optional subtle live row cue (won't override your selected state) */ #playlist .playlistItem.isLiveSong{ outline: 1px solid rgba(255, 61, 61, .25); box-shadow: 0 0 0 2px rgba(255, 61, 61, .08) inset; } #playlist .playlistItem.playlistQueryMatch{ box-shadow: inset 3px 0 0 rgba(106,167,255,.50); } #playlist .playlistItem.playlistQueryFocus{ box-shadow: inset 3px 0 0 rgba(106,167,255,.72), 0 0 0 1px rgba(106,167,255,.26); background: rgba(106,167,255,.06); } /* LIVE hover panel (mini monitor) - DOM injected */ .liveHoverPanel{position:absolute;top:calc(100% + 8px);right:0;width:min(350px,78vw);background:var(--surface-overlay);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:12px;z-index:999;display:none} .liveHoverPanel.open{display:block} .liveVidWrap{width:100%;max-height:160px;border-radius:var(--radius-md);overflow:hidden;background:rgba(0,0,0,.45);margin-bottom:10px} .liveHoverVid,.liveHoverImg{width:100%;height:160px;object-fit:cover;display:block} .liveHoverHeader{display:flex;align-items:center;gap:var(--gap-lg);padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)} .liveHoverHeader .liveMeta{flex:1 1 auto;font-size:var(--font-sm);opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .liveHoverBody{position:relative;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);margin-top:10px;padding:12px;max-height:220px;overflow:hidden;text-align:center;display:flex;align-items:center;justify-content:center;} .liveHoverBody.isBlack{background:#000} /* Make Tasbe7na-like line layout (same as display.js output) */ .liveHoverBody .bidi-lines{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22em;width:100%;max-width:100%;margin:0;padding:0} .liveHoverBody .bidi-line{display:block;max-width:100%;width:100%;overflow-wrap:anywhere;word-break:break-word;text-align:center;margin:0;padding:0} /* Fit target */ .liveHoverBody .liveText{width:100%;max-width:100%;margin:0;padding:0;display:flex;align-items:center;justify-content:center} .liveHoverBody .liveTextInner{width:100%;max-width:100%} @media (max-width: 760px){ .livePillMini{padding:4px 10px;font-size:var(--font-sm)} .liveHoverPanel{width:min(350px,92vw)} } .liveHoverBody *, .liveHoverPanel *{transform:none} /* If the live slide is still too tall, show from the top (don't crop the first line) */ .liveHoverBody.overflowing{ align-items: flex-start !important; justify-content: flex-start !important; overflow: auto !important; } .liveHoverBody.overflowing .bidi-lines{ justify-content: flex-start !important; } /* Live hover width-fit */ .liveHoverBody{ overflow-x: hidden; } .liveHoverBody .bidi-line{ white-space: normal !important; text-align: center; } .liveHoverBody .bidi-lines{ width: 100%; } /* LIVE pin bar (Preview column) */ .livePinBar{ position: sticky; top: 8px; z-index: 200; display:flex; align-items:center; justify-content:space-between; gap:var(--gap-lg); padding:10px 12px; margin: 0 0 10px 0; border: 1px solid rgba(220,38,38,.22); background: rgba(17,24,39,.92); box-shadow: 0 10px 18px rgba(0,0,0,.28); border-radius: var(--radius-md); cursor:pointer; user-select:none; } /* === Topbar LIVE pill layout (operator-safe: fixed width, no overlap, internal marquee) === */ .topbar .livePinBar{ position:static; left:auto; top:auto; transform:none; /* Prevent overlap with left/right topbar clusters. JS sets --livePinMaxW to the available center width (px). */ /* Allow a wider pill when there is safe space. The hard safety cap remains var(--livePinMaxW), computed from bounding boxes. */ width:min(380px,52vw,var(--livePinMaxW,380px)); max-width:min(380px,52vw,var(--livePinMaxW,380px)); min-width:0; margin:0; cursor:pointer; justify-content:flex-start; border-radius:var(--radius-md); /* r835: height normalized to match 40px icon buttons */ padding:0; height:40px; box-sizing:border-box; gap:0; } /* Keep right-side status/actions from being affected */ /* Left lane becomes the full pill interior */ /* Title wrapper clips scrolling text */ .topbar .livePinTitleWrap{ flex:1 1 auto; min-width:0; overflow:hidden; position:relative; } /* Non-video presentations: keep LIVE badge on the left, but align the presented title to the RIGHT edge of the pill */ .topbar .livePinBar:not(.isVideo) .livePinTitleWrap{ display:flex; justify-content:flex-end; text-align:right; } /* Title text is the animated element */ .topbar .livePinTitleText{ display:inline-block; white-space:nowrap; transform:translateX(0); will-change:transform; opacity:.95; font-size:var(--font-base); font-weight:600; line-height:1.2; } /* Hover marquee only when truncated (JS adds .isOverflowing + CSS vars) */ .topbar .livePinTitleWrap.isOverflowing:hover .livePinTitleText{ transition:transform var(--marqueeDur, 6s) linear; transform:translateX(var(--marqueeX, 0px)); } .topbar .livePinTitleWrap.isOverflowing:not(:hover) .livePinTitleText{ transition:transform 220ms ease; transform:translateX(0); } /* Fixed controls rail: always reserves space, fades when hidden (no layout shift) */ .topbar .livePinBar .liveVideoCtl{ flex:0 0 auto; width:auto; min-width:0; max-width:none; margin-left:auto; justify-content:flex-end; opacity:1; pointer-events:auto; transform:none; transition:opacity 160ms ease; } .topbar .livePinBar .liveVideoCtl.hidden{ opacity:0; pointer-events:none; } /* Ensure title doesn't try to ellipsis itself (wrapper handles clipping) */ .topbar .livePinTitle{ overflow:visible; text-overflow:clip; } .livePinBar.inactive{ border-color: rgba(148,163,184,.22); box-shadow: 0 10px 18px rgba(0,0,0,.22); } .livePinBar.inactive:hover{ border-color: rgba(148,163,184,.32); } .livePinBar.hidden{ display:none; } /* r876: peer-owned live pill (Option A — single line, inline Control button) */ .topbar .livePinBar.peerOwned{ border:1.5px solid #ff5a7a; background:#16101f; box-shadow:0 0 0 3px rgba(255,90,122,.10), 0 10px 18px rgba(0,0,0,.28); } .topbar .livePinBar.peerOwned .livePinTitleText{ color:#ffe2e8; } .topbar .livePinBar.peerOwned .pillSlideFrac{ color:#c79aa8; } /* MOBILE origin chip in the LIVE segment */ .pillOriginChip{ display:inline-flex; align-items:center; gap:4px; background:rgba(255,90,122,.16); color:#ffb3c1; border-radius:5px; padding:2px 6px; margin-left:6px; font-size:9px; font-weight:700; letter-spacing:.05em; flex:none; } .pillOriginChip svg{ display:block; } /* inline Control button */ .pillControlBtn{ display:inline-flex; align-items:center; gap:4px; flex:none; margin-left:8px; padding:5px 10px; background:rgba(106,167,255,.16); border:1px solid rgba(106,167,255,.45); color:#9cc1ff; font-size:11px; font-weight:600; line-height:1; border-radius:999px; cursor:pointer; font-family:inherit; transition:background .12s ease, border-color .12s ease; } .pillControlBtn:hover{ background:rgba(106,167,255,.26); border-color:rgba(106,167,255,.6); } .pillControlBtn:active{ transform:scale(.97); } .pillControlBtn svg{ display:block; } .livePinBar.isBlank{ border-color: rgba(148,163,184,.22); } /* Slide indicator shown next to the LIVE badge in the top pin bar (songs/bible). */ .livePinSlideMini{ font-size: var(--font-xs); font-weight: 700; letter-spacing: .2px; color: var(--text); opacity: .92; white-space: nowrap; } .livePinBar.inactive .livePinSlideMini{ opacity: .6; } /* LIVE badge inside the hover/preview monitor should look exactly like the top bar badge */ .livePinTitle{ opacity:.95; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; font-size:var(--title-sm); font-weight:600; line-height:1.2; } @media (max-width: 900px){ .livePinHint{ display:none; } .livePinBar{ top: 0; border-radius: 0; margin: 0 0 8px 0; } } /* DASHBOARD HEIGHT LOCK (keeps top bar visible; lists scroll internally) */ html, body{ height:100%; } body{ margin:0; overflow:auto; } /* outer layout */ .container{ height:100vh; display:flex; flex-direction:column; overflow:hidden; } /* top controls */ .topbar{ flex:0 0 auto; position: static; } /* 3-column area */ .grid{ flex:1 1 auto; min-height:0; overflow:hidden; } /* cards/panels */ .card{ min-height:0; overflow:hidden; display:flex; flex-direction:column; } .card .content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; } /* lists fill and scroll */ .list{ flex:1 1 auto; min-height:0; overflow:auto; } #results{ flex:1 1 auto; min-height:0; overflow:auto; } /* On small screens allow normal page scroll */ @media (max-width: 900px){ body{ overflow:auto; } .container{ height:auto; overflow:visible; } .grid{ overflow:visible; } } /* WINDOW SCROLL OVERRIDE: allow browser scroll, but keep main grid clamped to viewport */ .container{ min-height: 100vh; height: auto; overflow: visible; } /* keep topbar visible while scrolling */ .topbar{ position: static; } /* clamp grid height so the page doesn't grow with lists */ .grid{ height: calc(100vh - var(--topbar-h, 72px)); max-height: calc(100vh - var(--topbar-h, 72px)); overflow: hidden; } /* Topbar floating gradient */ #topbarSentinel{ height: 1px; } .topbar{ position: relative; z-index: 7000; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } /* Only when it is actually floating (page scrolled) */ /* Floating mode so the SAME live hover panel can open from the top LIVE bar */ .liveHoverPanel.floating{ position:fixed !important; top: var(--lh-top, 80px); left: var(--lh-left, 20px); right: auto !important; } /* Draggable header in floating mode */ .liveHoverPanel.floating .liveHoverHeader{ cursor: grab; user-select: none; touch-action: none; } .liveHoverPanel.floating.dragging .liveHoverHeader{ cursor: grabbing; } /* No preview LIVE pill: if any old markup exists, hide it */ #liveHoverWrap{display:none !important;} /* ===== Auto-resize panels to window (no page scroll unless too small) ===== */ html, body{ height: 100%; } /* Default: keep the presenter as an "app" (no window scrolling) */ body{ overflow: hidden; } .container{ height: 100vh; max-height: 100vh; display: flex; flex-direction: column; min-height: 0; } /* top bar + footer stay in normal flow */ .topbar{ flex: 0 0 auto; } #footer{ flex: 0 0 auto; } /* three-panel area fills remaining height */ .grid{ flex: 1 1 auto; min-height: 0; overflow: hidden; align-items: stretch; } /* each panel must be allowed to shrink */ section.card{ min-height: 0; } /* Search + Playlist cards: make content column-flex so list can scroll */ section.card > .content{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* internal scroll areas */ #results, #playlist{ flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; } /* Preview panel: keep preview fixed, slide list scrolls */ .preview{ flex: 0 0 auto; } #slideList{ flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; } /* Fallback: if window is too small, allow page scrolling */ @media (max-height: 680px), (max-width: 980px){ body{ overflow: auto; } .container{ height: auto; max-height: none; } .grid{ overflow: visible; } #results, #playlist, #slideList{ overflow: visible; } } /* ===== Preview column: dynamic verse list height ===== */ /* The preview card content should be a column */ .card.previewCard > .content, #previewCol .content, #previewCard .content{ display: flex; flex-direction: column; min-height: 0; } /* Keep the preview viewport responsive but not gigantic */ .preview{ height: min(34vh, 400px); min-height: 180px; flex: 0 0 auto; } /* Verse/slide list always fills remaining space and scrolls */ #slideList, .slideList{ flex: 1 1 auto; min-height: 0; overflow: auto; } /* ===== Footer: always normal flow (non-sticky) ===== */ #footer{ position: static !important; } /* appFooter flex */ .appFooter{ flex: 0 0 auto; } /* ===== Footer (visible, non-sticky, non-overlapping) ===== */ .appFooter{ flex: 0 0 auto; position: static; margin-top: 10px; padding: 10px 12px; border-top: 1px solid var(--border-default); background: rgba(10,10,10,.65); } /* ===== Active panel keyboard focus ===== */ #results:focus, #playlist:focus, #slideList:focus{ outline: 2px solid rgba(255,255,255,.25); outline-offset: 2px; border-radius: var(--radius-sm); } /* Favorites feature disabled */ .tab[data-tab="favorites"]{display:none !important;} #favBtn, .favBtn, .favoriteBtn, .starBtn{display:none !important;} /* ═══════════════════════════════════════════════════════════════ BURGER MENU — REDESIGN r869 ───────────────────────────────────────────────────────────── Card-based panel system with drill-down navigation. Replaces flat accordion structure. ═══════════════════════════════════════════════════════════════ */ /* Overlay */ .menuOverlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity .22s cubic-bezier(0.22, 1, 0.36, 1); z-index: 998; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } body.menuOpen .menuOverlay{ opacity: 1; pointer-events: auto; } /* Drawer */ .burgerMenu{ position: fixed; top: 0; bottom: 0; left: 0; width: min(380px, 92vw); background: #0c1020; border-right: 1px solid rgba(255,255,255,0.04); box-shadow: 30px 0 80px -20px rgba(0,0,0,0.7); transform: translateX(-100%); transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1); z-index: 999; overflow: hidden; font-family: var(--font-sans, system-ui, sans-serif); letter-spacing: -0.01em; display: flex; flex-direction: column; } [dir="rtl"] .burgerMenu{ left: auto; right: 0; border-right: none; border-left: 1px solid rgba(255,255,255,0.04); transform: translateX(100%); box-shadow: -30px 0 80px -20px rgba(0,0,0,0.7); } body.menuOpen .burgerMenu{ transform: translateX(0); } /* Panel system — stacked, one visible at a time */ .burgerPanel{ position: absolute; inset: 0; display: flex; flex-direction: column; background: #0c1020; transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform .26s cubic-bezier(0.22, 1, 0.36, 1), opacity .2s ease; will-change: transform, opacity; } .burgerPanel[hidden]{ display: none; } .burgerMenu[data-panel="home"] .burgerPanel[data-panel-id="home"], .burgerMenu[data-panel="obs"] .burgerPanel[data-panel-id="obs"], .burgerMenu[data-panel="advanced"] .burgerPanel[data-panel-id="advanced"]{ transform: translateX(0); opacity: 1; pointer-events: auto; } /* Home panel slides in from left when returning to it */ .burgerMenu[data-panel="home"] .burgerPanel[data-panel-id="home"]{ display: flex; } .burgerMenu:not([data-panel="home"]) .burgerPanel[data-panel-id="home"]{ transform: translateX(-30%); opacity: 0; pointer-events: none; display: flex; } /* Header */ .burgerHdr{ display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 14px; background: rgba(12,16,32,0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 0.5px solid rgba(255,255,255,0.05); flex-shrink: 0; z-index: 10; min-height: 56px; } .burgerHdr-title{ font-size: 16px; font-weight: 600; color: #fff; letter-spacing: -0.015em; } .burgerHdr-back{ display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 500; color: #8395E8; background: transparent; border: none; cursor: pointer; padding: 8px 8px 8px 2px; margin-left: -2px; border-radius: 6px; font-family: inherit; letter-spacing: -0.01em; min-height: 40px; } .burgerHdr-back:hover{ background: rgba(131,149,232,0.06); } .burgerHdr-back:active{ background: rgba(131,149,232,0.1); } .burgerHdr-back svg{ flex-shrink: 0; } .burgerHdr-close{ width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9px; border: none; background: transparent; color: rgba(255,255,255,0.45); cursor: pointer; transition: all .12s; } .burgerHdr-close:hover{ background: rgba(255,255,255,0.06); color: #fff; } /* Body */ .burgerBody{ flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 20px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; -webkit-overflow-scrolling: touch; } .burgerBody::-webkit-scrollbar{ width: 4px; } .burgerBody::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.08); border-radius: 2px; } .burgerBody::-webkit-scrollbar-track{ background: transparent; } /* Section */ .burgerSec{ margin-bottom: 16px; } .burgerSec:last-child{ margin-bottom: 0; } .burgerSec[hidden]{ display: none; } .burgerSec-lbl{ font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.32); font-weight: 500; padding: 0 6px 8px; } /* Card */ .burgerCard{ background: rgba(255,255,255,0.025); border: 0.5px solid rgba(255,255,255,0.05); border-radius: 14px; overflow: hidden; backdrop-filter: blur(10px); max-width: 100%; } /* Row */ .burgerRow{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 0.5px solid rgba(255,255,255,0.04); border-bottom: none; border-left: none; border-right: none; background: transparent; width: 100%; min-height: 52px; cursor: pointer; transition: background .12s; font-family: inherit; color: inherit; text-align: left; text-decoration: none; box-sizing: border-box; } .burgerCard > .burgerRow:first-child, .burgerCard > *:first-child > .burgerRow:first-child{ border-top: none; } .burgerRow:hover:not(.burgerRow--static){ background: rgba(255,255,255,0.02); } .burgerRow:active:not(.burgerRow--static){ background: rgba(255,255,255,0.04); } .burgerRow--static{ cursor: default; } /* Action rows — tappable actions, not navigation */ .burgerRow--action{ cursor: pointer; transition: background .12s; } .burgerRow--action:hover{ background: rgba(255,255,255,0.025); } .burgerRow--action:active{ background: rgba(255,255,255,0.05); } .burgerRow--action.burgerRow--danger:hover{ background: rgba(224,112,112,0.04); } .burgerRow--action.burgerRow--danger:active{ background: rgba(224,112,112,0.08); } .burgerRow-lhs{ display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .burgerRow-icn{ width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.035); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55); flex-shrink: 0; } .burgerRow-icn--danger{ background: rgba(224,112,112,0.1); color: #e07070; } .burgerRow-icn.isOn{ background: rgba(85,216,138,0.1); color: #5fcf85; } .burgerRow-txt{ min-width: 0; flex: 1; } .burgerRow-titleLine{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .burgerRow-title{ font-size: 14px; color: rgba(255,255,255,0.92); font-weight: 400; letter-spacing: -0.005em; } .burgerRow-title--danger{ color: #e07070; } .burgerRow-sub{ font-size: 11.5px; color: rgba(255,255,255,0.42); margin-top: 2px; line-height: 1.5; overflow-wrap: anywhere; } .burgerRow-sub--warn{ color: #e0a050; } .burgerRow-rhs{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .burgerRow-val{ font-size: 12px; color: rgba(255,255,255,0.4); font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0; } .burgerRow-chev{ color: rgba(255,255,255,0.22); flex-shrink: 0; } .burgerRow-aux{ padding: 0 14px 14px; } /* Switch — override global .switch & .switchInline styles inside burger */ .burgerMenu .switchInline{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 22px; cursor: pointer; flex-shrink: 0; gap: 0; min-width: 36px; } .burgerMenu .switchInline input{ position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; cursor: pointer; margin: 0; padding: 0; } .burgerMenu .switchInline .switch, .burgerMenu .switchInline > .switch{ position: absolute; inset: 0; width: 36px; height: 22px; border-radius: 11px; background: rgba(255,255,255,0.1); border: none; flex: none; transition: background .2s; } .burgerMenu .switchInline .switch::after{ content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1); transform: none; animation: none; } .burgerMenu .switchInline input:checked + .switch, .burgerMenu .switchInline.isOn .switch{ background: #4a7adb; border: none; } .burgerMenu .switchInline input:checked + .switch::after, .burgerMenu .switchInline.isOn .switch::after{ transform: translateX(14px); left: 2px; } /* Segmented control */ .burgerMenu .segInline{ display: inline-flex; background: rgba(255,255,255,0.045); border-radius: 9px; padding: 3px; gap: 1px; } .burgerMenu .segInline .segBtn{ padding: 6px 12px; font-size: 12px; border-radius: 7px; border: none; background: transparent; color: rgba(255,255,255,0.55); cursor: pointer; transition: all .15s; font-family: inherit; font-weight: 400; letter-spacing: -0.005em; } .burgerMenu .segInline .segBtn.isOn{ background: rgba(123,140,222,0.18); color: #9BABF0; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .burgerMenu .segInline .segBtn:hover:not(.isOn){ color: rgba(255,255,255,0.75); } /* Pill */ .burgerPill{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 8px; border-radius: 100px; font-size: 10.5px; font-weight: 500; line-height: 1.6; border: 0.5px solid transparent; } .burgerPill--success{ background: rgba(85,216,138,0.1); color: #6ee29b; border-color: rgba(85,216,138,0.15); } .burgerPill--warn{ background: rgba(224,160,80,0.1); color: #ecbb78; border-color: rgba(224,160,80,0.18); } .burgerPill--info{ background: rgba(123,140,222,0.1); color: #9BABF0; border-color: rgba(123,140,222,0.18); } .burgerPill--muted{ background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.45); } .burgerPill--danger{ background: rgba(224,112,112,0.1); color: #e07070; border-color: rgba(224,112,112,0.18); } /* Dot */ .burgerDot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.25); } .burgerDot--on{ background: #55d88a; box-shadow: 0 0 6px rgba(85,216,138,0.6); } .burgerDot--off{ background: rgba(255,255,255,0.25); } .burgerDot--warn{ background: #e0a050; box-shadow: 0 0 6px rgba(224,160,80,0.5); } .burgerDot--danger{ background: #e07070; box-shadow: 0 0 6px rgba(224,112,112,0.5); } /* Buttons */ .burgerBtn{ padding: 9px 14px; border-radius: 9px; font-size: 13px; font-weight: 500; cursor: pointer; text-align: center; transition: all .12s; border: 0.5px solid transparent; font-family: inherit; letter-spacing: -0.005em; background: transparent; color: inherit; white-space: nowrap; } .burgerBtn--primary{ background: rgba(123,140,222,0.16); color: #9BABF0; border-color: rgba(123,140,222,0.2); } .burgerBtn--primary:hover{ background: rgba(123,140,222,0.24); border-color: rgba(123,140,222,0.3); } .burgerBtn--danger{ background: rgba(224,112,112,0.1); color: #e07070; border-color: rgba(224,112,112,0.15); } .burgerBtn--danger:hover{ background: rgba(224,112,112,0.16); border-color: rgba(224,112,112,0.25); } /* Field */ .burgerField{ padding: 11px 14px; border-top: 0.5px solid rgba(255,255,255,0.04); } .burgerCard > .burgerField:first-child{ border-top: none; } .burgerField-lbl{ font-size: 10.5px; color: rgba(255,255,255,0.4); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; } /* Input */ .burgerInput{ background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.06); border-radius: 9px; padding: 9px 12px; font-size: 13px; color: #ddd; width: 100%; font-family: inherit; letter-spacing: -0.005em; outline: none; transition: border-color .12s, background .12s; box-sizing: border-box; min-width: 0; } .burgerInput:focus{ border-color: rgba(123,140,222,0.4); background: rgba(255,255,255,0.06); } .burgerInput--mono{ font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0; } .burgerInput--select{ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 30px; cursor: pointer; } /* Callout */ .burgerCallout{ display: flex; gap: 10px; padding: 11px 13px; background: rgba(123,140,222,0.04); border: 0.5px solid rgba(123,140,222,0.1); border-radius: 10px; margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,0.58); line-height: 1.55; } .burgerCallout svg{ color: #8395E8; flex-shrink: 0; margin-top: 1px; } .burgerCallout strong{ color: rgba(255,255,255,0.85); font-weight: 600; } /* ═══ Standby hero card ═══ */ .burgerCard--standby{ padding: 14px; } .standbyHead{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .standbyTitle{ font-size: 14px; font-weight: 500; color: #fff; letter-spacing: -0.005em; } .standbySub{ font-size: 11.5px; color: rgba(255,255,255,0.45); margin-top: 3px; line-height: 1.5; } .standbyManage{ display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; color: #8395E8; font-size: 11.5px; cursor: pointer; padding: 4px 6px; border-radius: 6px; font-family: inherit; font-weight: 500; flex-shrink: 0; white-space: nowrap; } .standbyManage:hover{ background: rgba(131,149,232,0.08); } .standbyStrip{ display: flex; gap: 8px; align-items: center; overflow-x: auto; padding-bottom: 4px; margin: 0 -2px; padding-left: 2px; padding-right: 2px; scrollbar-width: none; } .standbyStrip::-webkit-scrollbar{ display: none; } /* ═══ OBS hero card ═══ */ .burgerCard--obsHero{ padding: 16px; } .obsHero-top{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .obsHero-logo{ width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #2a3145, #1d2235); border: 0.5px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #8395E8; letter-spacing: 0.01em; flex-shrink: 0; } .obsHero-info{ min-width: 0; flex: 1; } .obsHero-name{ font-size: 15px; font-weight: 500; color: #fff; letter-spacing: -0.01em; } .obsHero-stat{ display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.5); } .obsHero-stat.isConnected{ color: #6ee29b; } .obsHero-stat.isConnecting{ color: #ecbb78; } .obsHero-stat.isFailed{ color: #e07070; } .obsHero-meta{ background: rgba(0,0,0,0.2); border-radius: 9px; padding: 9px 12px; font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.7; font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0; margin-bottom: 12px; } .obsHero-metaK{ color: rgba(255,255,255,0.35); margin-right: 8px; } .obsHero-actions{ display: flex; gap: 8px; } .obsHero-actions .burgerBtn{ flex: 1; } /* OBS connection fields hidden when not enabled */ .burgerMenu[data-obs-enabled="0"] .obsConnFields{ display: none; } /* Connection actions (Test / Disconnect at bottom of connection card) */ /* ═══ Scene picker ═══ */ .sceneFields{ display: none; padding: 4px 14px 12px; } .burgerMenu[data-scene-switch="1"] .sceneFields{ display: block; } .sceneField{ margin-top: 10px; } .sceneField:first-child{ margin-top: 4px; } .sceneField-lbl{ font-size: 11.5px; color: rgba(255,255,255,0.5); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .scenePicker{ background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.06); border-radius: 9px; padding: 9px 12px; font-size: 13px; color: #ddd; width: 100%; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: inherit; letter-spacing: -0.005em; transition: all .12s; } .scenePicker:hover{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } .scenePicker.isEmpty .scenePicker-val{ color: rgba(255,255,255,0.4); } .scenePicker svg{ color: rgba(255,255,255,0.35); flex-shrink: 0; } /* Scene picker dropdown */ .scenePickerDD{ position: fixed; background: #16192d; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 5px 0; box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.05); z-index: 1001; min-width: 200px; max-height: 260px; overflow-y: auto; } .scenePickerDD-item{ padding: 9px 14px; font-size: 13px; color: rgba(255,255,255,0.85); cursor: pointer; display: flex; align-items: center; justify-content: space-between; letter-spacing: -0.005em; } .scenePickerDD-item:hover{ background: rgba(255,255,255,0.06); } .scenePickerDD-item.isSel{ color: #9BABF0; background: rgba(123,140,222,0.08); } .scenePickerDD-item.isSel::after{ content: '✓'; color: #9BABF0; font-weight: 600; font-size: 13px; } .scenePickerDD-loading{ padding: 12px 14px; font-size: 12px; color: rgba(255,255,255,0.4); text-align: center; } /* ── Integrated input + action (session add) ── */ /* ── Tap-to-copy URL box ── */ .urlCopyBox{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 12px; background: rgba(0,0,0,0.2); border: 0.5px solid rgba(255,255,255,0.04); border-radius: 9px; cursor: pointer; transition: background .12s, border-color .12s; } .urlCopyBox:hover{ background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.08); } .urlCopyBox:active{ background: rgba(131,149,232,0.06); border-color: rgba(131,149,232,0.15); } .urlCopyBox.copied{ background: rgba(85,216,138,0.06); border-color: rgba(85,216,138,0.15); } .urlCopyBox code{ font-size: 11px; color: rgba(255,255,255,0.55); font-family: var(--font-mono, ui-monospace, monospace); word-break: break-all; line-height: 1.5; letter-spacing: 0; flex: 1; min-width: 0; } .urlCopyBox.copied code{ color: #6ee29b; } .urlCopyBox-ico{ color: rgba(255,255,255,0.25); flex-shrink: 0; margin-top: 1px; transition: color .12s; } .urlCopyBox:hover .urlCopyBox-ico{ color: rgba(255,255,255,0.5); } .urlCopyBox.copied .urlCopyBox-ico{ color: #6ee29b; } /* ── Dark select dropdown fix ── */ .burgerMenu select, .burgerMenu select option{ background: #0c1020; color: #ddd; } .burgerMenu select option:checked{ background: rgba(131,149,232,0.15); } /* Sessions list — preserve existing functional CSS */ .obsSessionList{ padding: 8px 14px; display: flex; flex-direction: column; gap: 4px; border-top: 0.5px solid rgba(255,255,255,0.04); } .burgerCard > .obsSessionList:first-child{ border-top: none; } .obsSessionEmpty{ font-size: 12px; color: rgba(255,255,255,0.4); padding: 8px 0; text-align: center; } .obsNewSessionRow{ display: flex; gap: 6px; align-items: center; padding: 10px 14px 12px; border-top: 0.5px solid rgba(255,255,255,0.04); } .obsNewSessionRow .burgerInput{ flex: 1; min-width: 0; } .obsNewSessionRow .burgerBtn{ flex-shrink: 0; } /* ── Burger-scoped overrides for session list & URL controls ── */ .burgerMenu .obsSessionList{ display: flex; flex-direction: column; gap: 3px; max-height: 200px; overflow-y: auto; margin: 0; padding: 10px 14px; } .burgerMenu .obsSessionEmpty{ font-size: 12px; color: rgba(255,255,255,0.35); padding: 12px 4px; text-align: center; } .burgerMenu .obsNewSessionRow{ display: flex; gap: 8px; align-items: center; padding: 10px 14px 14px; border-top: 0.5px solid rgba(255,255,255,0.04); margin: 0; } .burgerMenu .obsNewSessionInput, .burgerMenu .obsNewSessionRow .burgerInput{ flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px; border-radius: 9px; border: 0.5px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.04); color: #ddd; font-family: inherit; letter-spacing: -0.005em; } .burgerMenu .obsNewSessionInput:focus, .burgerMenu .obsNewSessionRow .burgerInput:focus{ outline: none; border-color: rgba(131,149,232,0.35); background: rgba(255,255,255,0.06); } .burgerMenu .obsNewSessionBtn, .burgerMenu .obsNewSessionRow .burgerBtn{ flex-shrink: 0; padding: 9px 14px; border-radius: 9px; border: none; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all .12s; letter-spacing: -0.005em; } .burgerMenu .obsNewSessionBtn:hover, .burgerMenu .obsNewSessionRow .burgerBtn:hover{ background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); } .burgerMenu .obsUrlCopyBtn{ padding: 8px 14px; border-radius: 8px; border: none; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all .12s; letter-spacing: -0.005em; width: 100%; } .burgerMenu .obsUrlCopyBtn:hover{ background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); } .burgerMenu .obsUrlCopyBtn.copied{ background: rgba(85,216,138,0.08); color: #6ee29b; } .burgerMenu .obsUrlPreview{ font-size: 11px; font-family: var(--font-mono, ui-monospace, monospace); color: rgba(255,255,255,0.55); word-break: break-all; line-height: 1.5; letter-spacing: 0; padding: 0; border: none; background: transparent; } /* Timer fields */ .timerGridRow{ display: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 14px; } .burgerMenu[data-timer-on="1"] .timerGridRow{ display: grid; } .timerField .burgerField-lbl{ margin-bottom: 4px; } /* Footer */ .burgerFtr{ padding: 14px 18px 16px; font-size: 10.5px; color: rgba(255,255,255,0.18); text-align: center; letter-spacing: 0.06em; font-family: var(--font-mono, ui-monospace, monospace); border-top: 0.5px solid rgba(255,255,255,0.03); flex-shrink: 0; } /* Burger button (hamburger icon — keep existing) */ /* Hide preview viewport and let slide list fill the panel */ body.hidePreview #preview{ display:none !important; } body.hidePreview #previewCard .preview{ display:none !important; } /* ---- Play/Pause icon visibility fix (ensure only one icon shows) ---- */ #btnPlayPause .iconPause, #btnPlayPause .iconPlay{ display:none !important; align-items:center; justify-content:center; } #btnPlayPause:not(.isPaused) .iconPause{ display:inline-flex !important; } #btnPlayPause.isPaused .iconPlay{ display:inline-flex !important; } /* Place play/pause button nicely in Preview header */ section.card header .split{ display:flex; align-items:center; gap:var(--gap-lg); } section.card header .split #btnPlayPause.iconBtn{ width: 38px; height: 38px; border-radius: var(--radius-md); } /* ---------- LIVE bar in topbar center block (kept together with the header controls) ---------- */ .topbar{ position: relative; min-height: 44px; z-index: 55; } /* The LIVE pill is now part of the centered header block, so it must stay in normal flow. */ .topbar .livePinBar{ position: static; top: auto; left: auto; transform: none; z-index: 1; margin: 0 !important; } @media (max-width: 980px){ .topbar .livePinBar{ display:none !important; } } /* Hide empty live hint text while keeping bar clickable */ /* Topbar positioning context for centered live bar */ .topbar{ position: relative; } /* Variables to align header controls with the main grid columns */ .topbar{ --gridGap: 14px; --previewLeft: calc(((100% - (var(--gridGap) * 2)) * 0.42) + var(--gridGap)); --previewWidth: calc((100% - (var(--gridGap) * 2)) * 0.333333); } /* Pause/Resume button beside (outside) the LIVE bar */ .topbar .topPauseBtn{ position: absolute; top: 50%; transform: translateY(-50%); left: calc(var(--previewLeft) - 52px); /* button width + spacing */ width: 40px; height: 40px; border-radius: var(--radius-lg); z-index: 501; } @media (max-width: 980px){ .topbar .topPauseBtn{ display:none !important; } } /* Second display (Window) icon button beside Cast + Pause (outside the LIVE bar) */ .topbar .topWindowBtn{ position: absolute; top: 50%; transform: translateY(-50%); left: calc(var(--previewLeft) - 156px); /* window + cast + pause */ width: 40px; height: 40px; border-radius: var(--radius-lg); z-index: 501; } /* Green when second display is active */ .topbar .topWindowBtn.isWindowLive{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.40); box-shadow: 0 0 0 1px rgba(34,197,94,.10) inset; } @media (max-width: 980px){ .topbar .topWindowBtn{ display:none !important; } } /* Window icon glyph (PNG mask so we can recolor it cleanly) */ .topbar .topWindowBtn .windowGlyph{ width: 20px; height: 20px; display: block; background: rgba(148,163,184,.90); -webkit-mask-image: url("tab.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("tab.png"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; transform: translateX(2px); } /* Make glyph pop a bit when active */ .topbar .topWindowBtn.isWindowLive .windowGlyph{ background: rgba(34,197,94,.95); } /* Cast (Present) icon button beside Pause/Resume (outside the LIVE bar) */ .topbar .topCastBtn{ position: absolute; top: 50%; transform: translateY(-50%); left: calc(var(--previewLeft) - 104px); /* cast + pause */ width: 40px; height: 40px; border-radius: var(--radius-lg); z-index: 501; } /* Green when casting is active */ .topbar .topCastBtn.isCasting{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.40); box-shadow: 0 0 0 1px rgba(34,197,94,.10) inset; } @media (max-width: 980px){ .topbar .topCastBtn{ display:none !important; } } /* Cast icon glyph (PNG mask so we can recolor it cleanly) */ .topbar .topCastBtn .castGlyph{ width: 18px; height: 18px; display: block; background: rgba(148,163,184,.85); -webkit-mask-image: url("cast.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("cast.png"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .topbar .topCastBtn.isCasting .castGlyph{ background: rgba(34,197,94,.95); } /* Hide preview top-bar slide count indicator (layout only) */ #slideBadge{ display:none !important; } /* Search clear (X) button */ .searchInputWrap{ position: relative; } .searchInputWrap .input{ width:100%; box-sizing:border-box; padding-right: 56px; } .clearSearchBtn{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.12); background: var(--pressed); color: var(--text); display: none; align-items: center; justify-content: center; cursor: pointer; line-height: 1; font-size: var(--font-lg); } /* Media upload (+) button (shown in Media scope) */ .mediaUploadBtn{ position: absolute; right: 44px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.12); background: var(--pressed); color: var(--text); display: none; align-items: center; justify-content: center; cursor: pointer; line-height: 1; font-size: var(--font-lg); } .mediaUploadBtn:hover{ background: var(--hover); } .clearSearchBtn:hover{ background: var(--hover); } .clearSearchBtn.show{ display:flex; } /* Autocomplete dropdown */ .searchInputWrap{ position: relative; } .acDropdown{ position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: rgba(15,18,22,.98); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); box-shadow: 0 18px 60px rgba(0,0,0,.55); overflow: hidden; max-height: 320px; display: none; z-index: 80; } .acDropdown.show{ display: block; } .acItem{ display: flex; gap:var(--gap-lg); padding: 10px 12px; cursor: pointer; align-items: center; border-top: 1px solid rgba(255,255,255,.06); } .acItem:first-child{ border-top: none; } .acItem:hover{ background: var(--pressed); } .acItem.active{ background: var(--hover); } .acIcon{ width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; color: var(--muted); flex: 0 0 26px; font-size: var(--font-md); } .acMain{ min-width: 0; flex: 1; } .acTitle{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:var(--font-md); font-weight:600; line-height:1.25; } .acSub{ margin-top: 2px; font-size: var(--font-sm); line-height: 1.2; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acTag{ font-size: var(--font-xs); padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--muted); flex: 0 0 auto; } /* Search results as suggestion dropdown (section headers + subline) */ .resultSectionHeader{ margin: 10px 10px 6px; padding: 6px 8px; font-size: var(--font-sm); opacity: .75; letter-spacing: .02em; text-transform: uppercase; } /* Result row layout: left add slot, main text block, right icon */ .resultItem{ position: relative; margin: 6px 10px; padding: 0; } .resultRow{ display: grid; grid-template-columns: 28px minmax(0,1fr) 22px; align-items: center; gap:var(--gap-md); direction: ltr; min-width: 0; width: 100%; } .resultRowFast{ grid-template-columns: minmax(0,1fr); } .resultRow.fixedLeftAdd{ grid-template-columns: 28px minmax(0,1fr) 22px; } .resultRow.fixedLeftAdd > .resultAddSlot{ justify-self: start; } .resultRow.fixedLeftAdd > .resultMain{ justify-self: stretch; } .resultRow.fixedLeftAdd > .resultIcon, .resultRow.fixedLeftAdd > .resultRightIcon{ justify-self: end; } .resultAddSlot{ width: 28px; min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; } .resultAddSlot[aria-hidden="true"]{ pointer-events: none; } .resultText, .resultMain{ min-width: 0; } .resultMain{ display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .resultTitle{ display: block; unicode-bidi: plaintext; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Icons / avatars */ .resultIcon, .resultRightIcon{ width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; border: 1px solid rgba(255,255,255,.12); background: var(--pressed); color: var(--text); opacity: .95; margin: 0; position: static; transform: none; } .resultIcon.lyric{ opacity: .75; } .resultIcon.media, .resultRightIcon.video{ background: rgba(120,180,255,.12); border-color: rgba(120,180,255,.22); } .resultRightIcon.image{ background: var(--pressed); } .resultItem.mediaResult .resultMain, .resultItem.mediaResult.groupState .resultMain{ padding-right: 0; } /* Hover-only + button */ /* Density-specific search rows */ .resultItem.density-comfortable{ padding: 11px 12px; border-radius: 13px; } .resultItem.density-compact{ padding: 9px 11px; border-radius: 11px; } .resultItem.density-dense{ padding: 7px 10px; border-radius: 10px; margin-top: 4px; margin-bottom: 4px; } .resultItem.density-comfortable .resultRow{ gap:var(--gap-md); } .resultItem.density-compact .resultRow{ gap: 7px; } .resultItem.density-dense .resultRow{ gap:var(--gap-sm); } .resultItem.density-comfortable .resultTitle{ font-size:var(--font-md); font-weight: 600; line-height: 1.24; } .resultItem.density-compact .resultTitle{ font-size: var(--font-md); font-weight: 600; line-height: 1.2; } .resultItem.density-dense .resultTitle{ font-size: var(--font-base); font-weight: 600; line-height: 1.16; } .resultItem.density-comfortable .resultSnippet, .resultItem.density-comfortable .resultNotice{ font-size: var(--font-sm); } .resultItem.density-compact .resultSnippet, .resultItem.density-compact .resultNotice{ font-size: var(--snippet-sm); } .resultItem.density-dense .resultSnippet, .resultItem.density-dense .resultNotice{ font-size: var(--font-xs); } .resultSnippet{ unicode-bidi: plaintext; text-align: right; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; opacity: .72; } .resultMediaMeta{ color: rgba(226,232,240,.62); } .resultItem.groupState{ padding-top: 8px; padding-bottom: 8px; opacity: .92; } .resultItem.groupState .resultAddBtn{ display:none !important; } .resultItem.groupState .resultIcon{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); opacity: .65; } .resultItem.groupState .resultMain{ min-height: 22px; } .resultItem.groupState .resultTitle, .resultGroupStateTitle{ font-size: var(--font-sm); font-weight: 500; opacity: .72; } .resultItem.groupLoading .resultGroupStateTitle::after{ content: ''; display: inline-block; width: 28px; height: 8px; margin-inline-start: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06)); background-size: 160% 100%; animation: groupPulse 1.1s linear infinite; vertical-align: middle; } .resultItem.groupEmpty .resultGroupStateTitle{ opacity: .58; } @keyframes groupPulse{ 0%{ background-position: 160% 0; } 100%{ background-position: -40% 0; } } /* + add button participates in the row layout; no absolute pinning or gutter hacks */ .resultAddBtn{ position: static; margin: 0; width: 28px; height: 28px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s ease, background .15s ease; display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-lg); line-height: 1; } .resultItem:hover .resultAddBtn, .resultItem.active .resultAddBtn{ opacity: 1; pointer-events: auto; } .resultItem.hasPlaylistRef .resultAddBtn{ opacity: 1; pointer-events: auto; color: rgba(160,200,255,.96); } .resultAddBtn.playlistLinkBtn{ font-size: 0; } .resultAddBtn.playlistLinkBtn svg{ width: 14px; height: 14px; display: block; fill: currentColor; } .resultAddBtn:hover{ background: var(--hover); } /* Section headers tighter */ .resultSectionHeader{ margin: 10px 10px 4px; padding: 4px 6px; font-size: var(--font-xs); opacity: .70; letter-spacing: .06em; } /* Result icons: make white + visible */ .resultIcon{ color: var(--text); } .resultIcon svg{ fill: currentColor; } /* Highlight matching search terms in lyrics snippets */ .hl{ font-weight: 800; color: rgba(34,197,94,.98); background: rgba(34,197,94,.12); border-radius: 6px; padding: 0 .18em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; text-decoration-color: rgba(34,197,94,.55); } /* Advanced search button inside search bar */ .advSearchBtn{ position:absolute; left:10px; top:50%; transform: translateY(-50%); width:28px; height:28px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.12); background: var(--pressed); display:flex; align-items:center; justify-content:center; cursor:pointer; } .advSearchBtn img{ width:16px; height:16px; filter: invert(1) brightness(1.2); opacity: .9; } .searchInputWrap .input{ padding-left: 46px; } /* Dropdown menu */ .advMenu{ position:absolute; left:0; right:auto; top: calc(100% + 10px); width: max-content; min-width: unset; max-width: calc(100vw - 24px); background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 4px; box-shadow: var(--shadow); backdrop-filter: blur(8px); z-index: 30; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .12s ease, transform .12s ease; } .advMenu.open{ opacity: 1; transform: translateY(0); pointer-events: auto; } /* Make tabs in menu more compact */ .advMenu .tabs{ margin-top: 2px; } .advMenu #alphaBar{ margin-top: 8px !important; } /* Search scope tabs inside Advanced menu */ .scopeTabs{ display:flex; gap:2px; padding: 6px 6px 10px 6px; } .scopeTab{ flex:1; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--pressed); color: var(--text); cursor:pointer; font-weight: 600; white-space: nowrap; } .scopeTab.active{ background: var(--hover-strong); border-color: rgba(255,255,255,.18); } /* Bible browser */ .bibleBrowser{ margin-top: 10px; border: 1px solid var(--border-default); background: rgba(255,255,255,.04); border-radius: var(--radius-lg); padding: 10px; } /* Advanced criteria list */ .advCrit{ display:flex; align-items:center; gap:var(--gap-md); width:auto; padding: 7px 10px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text); cursor:pointer; font-weight: 600; text-align: left; white-space: nowrap; } .advCrit:hover{ background: var(--hover); } .advCrit.active{ background: var(--hover-strong); } .advText{ flex:0 1 auto; text-align:left; } .advSelIcon{ position:absolute; border:1px solid rgba(255,255,255,.22); right:-6px; top:-6px; width:16px; height:16px; border-radius: 6px; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.55); color:#fff; font-size: var(--font-xs); box-shadow: 0 10px 20px rgba(0,0,0,.35); } .advSelIcon.show{ display:flex; } .advSelIcon img{ width:12px; height:12px; display:block; filter: invert(1); } /* Alphabet feature removed */ .tabs, #alphaBar, #advExtras { display:none !important; } /* Force advanced menu labels visible (incognito/high-contrast safety) */ .advCrit .advText{ color: var(--text) !important; opacity: 1 !important; font-size: var(--font-md) !important; line-height: 1.2 !important; text-shadow: 0 1px 6px rgba(0,0,0,.35); } /* Playlist header icon buttons: keep icons inside the button */ .iconBtn{ overflow: hidden; } /* Strong centering for playlist icon buttons */ .btn.iconBtn{ padding:0 !important; width:40px !important; height:34px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* Settings: dropdown rows in burger menu */ /* ===== Unified select dropdown (burger menu + all contexts) ===== */ .menuSelect{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background-color: rgba(0,0,0,0.28); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5.5L10 0' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; border: 1px solid var(--border-default); color: var(--text); padding: 7px 30px 7px 10px; border-radius: var(--radius-sm); font-size: var(--font-base); font-family: inherit; cursor: pointer; } .menuSelect:focus{ outline:none; box-shadow: 0 0 0 2px var(--border-focus); } .menuSelect option{ background: var(--surface-overlay); color: var(--text); } .menuSelect, .mediaToolbarSelect, .slideCollectionTimingSelect, .slideCollectionSettingRow select{ color-scheme: dark; } .menuSelect option, .menuSelect optgroup, .mediaToolbarSelect option, .mediaToolbarSelect optgroup, .slideCollectionTimingSelect option, .slideCollectionTimingSelect optgroup, .slideCollectionSettingRow select option, .slideCollectionSettingRow select optgroup{ background: var(--surface-overlay); color: var(--text); } .menuInput{ background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.10); color: #fff; padding:8px 12px; border-radius:var(--radius-md); font-size:var(--font-base); width: 160px; max-width: 42vw; } .menuInput:focus{ outline:none; box-shadow: 0 0 0 2px rgba(120,170,255,0.25); } /* menuSelect options (merged into unified rule above) */ /* Subtle keyboard focus ring */ .slideItem:focus-visible, .resultItem:focus-visible, .playlistRow:focus-visible{ outline: 2px solid rgba(120,170,255,0.45); outline-offset: 2px; } .playlistItem:hover .dragHandle, .plRow:hover .dragHandle{opacity:0.65;} /* --- Settings panel refresh --- */ /* Countdown timer compact layout (burger settings) */ .timerGridRow.isHidden{ display: none; } /* Dark-mode native controls for date/time pickers (icons, dropdowns) */ .menuInput[type="date"], .menuInput[type="time"], .burgerInput[type="date"], .burgerInput[type="time"]{ color-scheme: dark; } .menuInput:disabled{ opacity: .60; cursor: not-allowed; } .mutedRow{ opacity: .75; filter: saturate(.9); } .pill.muted{ background: var(--pressed); border: 1px solid var(--border-default); color: rgba(255,255,255,.60); } /* Dropdown contrast — merged into unified .menuSelect rule */ /* Inline switch in rows */ .switchInline{ display:inline-flex; align-items:center; gap:var(--gap-lg); position:relative; } /* Data buttons */ .btn.danger{ background: rgba(255,90,90,.10); border-color: rgba(255,90,90,.25); } .btn.danger:hover{ background: rgba(255,90,90,.14); } .btn.danger .ico{ color: var(--text); } /* Playlist count chip */ .switchInline input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; } /* Subtle row separators for lists */ .resultItem:not(:last-child)::after, .slideItem:not(:last-child)::after, .playlistItem:not(:last-child)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--borderHair); opacity: 0.75; } /* Inset separators a bit so they don't hit rounded corners */ .slideItem:not(:last-child)::after{ left: 6px; right: 6px; } .resultItem:not(:last-child)::after{ left: 6px; right: 6px; } .playlistItem:not(:last-child)::after{ left: 0px; right: 0px; opacity: 0.6; } .switchInline{ width:42px; height:24px; justify-content:center; } /* Force toggle visuals via class (more reliable than :checked in some embedded click flows) */ .switchInline.isOn .switch{ background: rgba(55,214,122,.22); border-color: rgba(55,214,122,.40); } .switchInline.isOn .switch::after{ left: 21px; background: rgba(255,255,255,.95); } /* ===== Advanced filter labels (robust) ===== */ /* Some cached builds can lose inner label text; render labels from button data-label. */ .advCrit .advText{ display: none !important; } .advCrit::after{ content: attr(data-label); font-size: var(--font-base); font-weight: 600; white-space: nowrap; color: rgba(235,245,255,0.92); margin-inline-start: 10px; } /* ===== Dropdown chevron indicators (r577) ===== Controls that open floating menus with selectable options show a ▾ arrow. Self-evident action buttons (scope, add, overlays) do not need arrows. */ /* ===== /Dropdown chevron indicators ===== */ /* Preview font controls */ .previewFontBtn{ width:40px; height:40px; border-radius:var(--radius-md); font-weight:700; font-size:var(--font-md); line-height:1; } /* r837: removed advSearchBtn+bibleNavBtn from search bar */ /* Bible Navigator overlay */ @keyframes bnVerseFire{ 0%{ transform:scale(1.22); box-shadow:0 0 0 6px rgba(106,167,255,.15); } 100%{ transform:scale(1); box-shadow:none; } } @keyframes bnSpin{ to{ transform:rotate(360deg); } } #refTop{ opacity: .70; } .verseNum{ color: var(--muted); } .uiBibleIcon{ display:block; width:20px; height:20px; object-fit:contain; background:transparent; } /* Playlist header layout */ .playlistHeader{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap-xl); } .playlistHeaderLeft{ display:flex; flex-direction:column; gap:2px; } .playlistHeaderRight{ display:flex; align-items:center; } .plActions{ display:flex; gap:var(--gap-md); align-items:center; } .iconOnlyBtn{ width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; } /* Playlist header icon actions with subtle separators */ .plActions{ display:flex; align-items:center; } .iconOnlyBtn{ width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; background: transparent; } .iconOnlyBtn .ico{ display:flex; align-items:center; justify-content:center; } .plActions .iconOnlyBtn + .iconOnlyBtn{ border-left: 1px solid rgba(255,255,255,.12); margin-left: 10px; padding-left: 12px; } /* Tighten playlist header icon spacing + perfect centering */ .plActions{ gap:var(--gap-sm); } .plActions .iconOnlyBtn + .iconOnlyBtn{ margin-left: 6px; padding-left: 8px; } .iconOnlyBtn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; } .iconOnlyBtn .ico{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height: 0; } .iconOnlyBtn svg{ display:block; } /* Strong centering for playlist header action svgs */ .plActions .iconOnlyBtn{ display:grid !important; place-items:center !important; } .plActions .iconOnlyBtn .ico{ width:18px; height:18px; display:grid !important; place-items:center !important; } .plActions .iconOnlyBtn svg{ width:18px; height:18px; } /* Micro nudges for optical centering */ #menuImport svg{ transform: translateX(-0.5px); } #menuClear svg{ transform: translateX(0.5px); } /* r32: Center playlist header icons (no padding shift) + separators via pseudo-element */ .plActions{ display:flex; align-items:center; gap:var(--gap-lg); } .plActions .iconOnlyBtn{ display:grid !important; place-items:center !important; width:34px; height:34px; padding:0 !important; } .plActions .iconOnlyBtn .ico{ display:grid !important; place-items:center !important; width:18px; height:18px; line-height:0; } .plActions .iconOnlyBtn svg{ display:block; width:18px; height:18px; } /* remove old separator padding/border that shifts icons */ .plActions .iconOnlyBtn + .iconOnlyBtn{ border-left: none !important; margin-left: 0 !important; padding-left: 0 !important; position: relative; } .plActions .iconOnlyBtn + .iconOnlyBtn::before{ content:""; position:absolute; left:-6px; top:8px; bottom:8px; width:1px; background: var(--hover-strong); } /* Remove any previous per-icon nudges */ #menuImport svg, #menuClear svg{ transform:none !important; } /* r33: Playlist actions as bare icons (no button chrome) */ .plActions{ gap:var(--gap-xl); } .plActions .iconOnlyBtn{ width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 2px !important; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; opacity: .92; } .plActions .iconOnlyBtn:hover{ opacity: 1; background: transparent !important; } .plActions .iconOnlyBtn:active{ opacity: .85; } .plActions .iconOnlyBtn:focus{ outline: none; } .plActions .iconOnlyBtn:focus-visible{ outline: 2px solid rgba(255,255,255,.18); outline-offset: 4px; border-radius: var(--radius-sm); } /* comfy hit area, minimal visuals */ .plActions .iconOnlyBtn .ico{ width: 20px; height: 20px; } .plActions .iconOnlyBtn svg{ width: 20px; height: 20px; } /* Separator stays subtle and does not shift */ .plActions .iconOnlyBtn + .iconOnlyBtn::before{ left: -7px; top: 4px; bottom: 4px; background: rgba(255,255,255,.14); } /* r34: Preview A-/A+ as bare icons (no button chrome) */ .previewFontBtn{ width:auto !important; height:auto !important; padding: 2px !important; border:none !important; background: transparent !important; box-shadow:none !important; border-radius:0 !important; opacity:.92; display:inline-flex !important; align-items:center !important; justify-content:center !important; position:relative; } .previewFontBtn:hover{ opacity:1; background:transparent !important; } .previewFontBtn:active{ opacity:.85; } .previewFontBtn:focus{ outline:none; } .previewFontBtn:focus-visible{ outline: 2px solid rgba(255,255,255,.18); outline-offset: 4px; border-radius: var(--radius-sm); } .previewFontBtn span{ display:block; line-height: 1; font-weight: 700; } .previewFontBtn + .previewFontBtn::before{ content:""; position:absolute; left:-7px; top:4px; bottom:4px; width:1px; background: rgba(255,255,255,.14); } /* r35: Make A-/A+ separator visible and add clear hover affordance */ .previewFontBtn{ border-radius: var(--radius-sm) !important; transition: background-color .12s ease, opacity .12s ease, transform .06s ease; } .previewFontBtn:hover{ background: rgba(255,255,255,.07) !important; } .previewFontBtn:active{ transform: translateY(0.5px); background: var(--hover) !important; } /* Separator: attach to the second button, drawn just to its left */ .previewFontBtn + .previewFontBtn{ margin-left: 10px; padding-left: 6px; } .previewFontBtn + .previewFontBtn::before{ content:""; position:absolute; left: -8px; top: 4px; bottom: 4px; width:1px; background: rgba(255,255,255,.14); pointer-events:none; } /* r36: Preview A-/A+ divider like playlist + tighter spacing */ .previewFontBtn{ position: relative; } .previewFontBtn + .previewFontBtn{ margin-left: 6px !important; padding-left: 0 !important; } .previewFontBtn + .previewFontBtn::before{ content:""; position:absolute; left:-4px; top:4px; bottom:4px; width:1px; background: rgba(255,255,255,.14); pointer-events:none; } /* r37: Force-visible divider + even tighter spacing for A-/A+ */ .previewFontBtn{ position: relative; } .previewFontBtn + .previewFontBtn{ margin-left: 2px !important; } .previewFontBtn + .previewFontBtn::before{ content:""; position:absolute; left:-2px; top:2px; bottom:2px; width:1px; background: rgba(255,255,255,.22); z-index: 2; pointer-events:none; } /* r38: Shared vertical divider element */ .vDiv{ width:1px; height: 18px; background: rgba(255,255,255,.22); display:inline-block; align-self:center; opacity: .9; } /* Make playlist icons feel clickable (shadow + hover) */ .plActions .iconOnlyBtn svg{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); } .plActions .iconOnlyBtn{ transition: transform .06s ease, opacity .12s ease; } .plActions .iconOnlyBtn:hover{ transform: translateY(-0.5px); opacity: 1; } .plActions .iconOnlyBtn:active{ transform: translateY(0.5px); } /* Preview A-/A+ clickable affordance */ .previewFontBtn span{ text-shadow: 0 1px 2px rgba(0,0,0,.45); } .previewFontBtn{ transition: background-color .12s ease, transform .06s ease, opacity .12s ease; } .previewFontBtn:hover{ background: rgba(255,255,255,.07) !important; transform: translateY(-0.5px); } .previewFontBtn:active{ transform: translateY(0.5px); } /* r53: Center the top "Display" (window) icon inside its button */ .topWindowBtn .windowGlyph{ transform: none !important; /* remove any X nudge that makes it lean right */ margin: 0 auto !important; } .topWindowBtn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* r56: Pulsating red dot for currently-live playlist item */ @keyframes liveDotPulse { 0% { transform: scale(1); box-shadow: 0 0 0 3px rgba(255, 61, 61, .18); opacity: 1; } 50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(255, 61, 61, .08); opacity: 1; } 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(255, 61, 61, .18); opacity: 1; } } #playlist .playlistItem.isLiveSong .playlistLiveDot{ animation: liveDotPulse 1.25s ease-in-out infinite; } /* r57: Subtle chorus styling in preview slide list (songs only) */ .slideItem.isChorus{ position: relative; background: rgba(255,255,255,.03); border-left: 2px solid rgba(255,255,255,.12); } .slideItem.isChorus::after{ content: "(ق)"; position: absolute; top: 8px; right: 10px; font-size: var(--font-xs); opacity: .55; } /* r63: Verse numbers in preview slides (songs only) */ .slideItem{ position: relative; } /* r65: Move slide/verse numbers to bottom-left in preview list (no button styling) */ #slideList .slideItem{ position: relative; } #slideList .slideItem .slideNum{ position: absolute !important; left: 10px !important; right: auto !important; bottom: 8px !important; top: auto !important; font-size: var(--font-sm) !important; opacity: .45 !important; line-height: 1 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; min-width: 0 !important; box-shadow: none !important; } /* r66: Chorus marker (ق) should not overlap text — center it vertically and indent chorus text */ #slideList .slideItem.isChorus .slideNum{ top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; opacity: .55 !important; } #slideList .slideItem.isChorus .slideBody{ padding-left: 34px !important; /* make room for ق */ } /* r70: Chorus should look like normal slides (keep hover highlight + separators) */ #slideList .slideItem.isChorus:not(:hover){ /* remove only the special tint at rest, but allow hover to work */ background: transparent !important; } #slideList .slideItem.isChorus{ border-left: none !important; /* removes the special left accent */ } #slideList .slideItem.isChorus::after{ content: none !important; /* remove the chorus label */ } /* Ensure slide separators are always visible (including chorus) */ #slideList .slideItem{ border-bottom: 1px solid rgba(255,255,255,.08) !important; } #slideList .slideItem:last-child{ border-bottom: none !important; } /* Ensure hover highlight applies to all items, including chorus */ #slideList .slideItem:hover{ background: var(--pressed) !important; } /* r71: Chorus slide number styling in preview list */ #slideList .slideItem .slideNum.chorusNum{ color:var(--danger) !important; opacity: .85 !important; font-weight: 700 !important; } /* r79: Footer DB stats (bottom right) */ .footerStats{ padding-left: 10px; font-size: var(--font-sm); opacity: .75; white-space: nowrap; } #footerStats .dotSep{ opacity:.55; padding: 0 6px; } /* ensure footer can align left/right */ #footer, .footer, footer{ display: flex; align-items: center; gap:var(--gap-lg); } /* r80: Footer layout for build + stats */ .appFooter .footerInner{ display:flex; align-items:center; width:auto; } .appFooter .footerText{ display:flex; align-items:center; width:auto; } .appFooter .footerText{ justify-content: space-between; } .appFooter .footerLeft{ display:flex; align-items:center; gap:var(--gap-lg); min-width:0; } .appFooter .footerLeft #footerBuild{ flex:0 0 auto; } .appFooter .footerLeft .topStatusPlain{ display:flex; flex-direction:row; align-items:center; gap:var(--gap-sm); line-height: 1.2; max-width: 45vw; } .appFooter .footerLeft .topStatusPlain .lbl{ margin:0; } .appFooter .footerLeft .topStatusPlain .val{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } .appFooter #footerBuild{ flex: 0 0 auto; } #footerStats{ flex: 0 0 auto; text-align:right; } /* OBS Integration collapsible section */ /* OBS URL block */ .obsSessionList{ display:flex; flex-direction:column; gap:3px; margin-bottom:8px; max-height:160px; overflow-y:auto; } .obsSessionEmpty{ font-size:var(--font-xs); color:var(--muted); padding:8px 4px; text-align:center; } .obsNewSessionRow{ display:flex; gap:var(--gap-sm); align-items:center; margin-bottom:4px; } .obsNewSessionInput{ flex:1; min-width:0; padding:6px 10px; font-size:var(--font-xs); border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.3); color:#fff; } .obsNewSessionInput:focus{ outline:none; box-shadow:0 0 0 2px rgba(120,170,255,.2); } .obsNewSessionBtn{ flex-shrink:0; padding:6px 10px; border-radius:var(--radius-md); border:1px solid rgba(106,167,255,.25); background:rgba(106,167,255,.08); color:var(--accent); font-size:var(--font-xs); font-weight:600; cursor:pointer; transition:background .15s; } .obsNewSessionBtn:hover{ background:rgba(106,167,255,.18); } .obsUrlCopyBtn{ flex:0 0 auto; padding:6px 14px; border-radius:var(--radius-md); border:1px solid rgba(106,167,255,.3); background:rgba(106,167,255,.1); color:var(--accent); font-size:var(--font-xs); font-weight:600; cursor:pointer; transition:background .15s, border-color .15s; } .obsUrlCopyBtn:hover{ background:rgba(106,167,255,.2); border-color:rgba(106,167,255,.5); } .obsUrlCopyBtn.copied{ background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.35); color:var(--ok); } .obsUrlPreview{ font-size:9px; font-family:ui-monospace,SFMono-Regular,monospace; color:var(--muted); word-break:break-all; line-height:1.45; padding:6px 8px; border-radius:var(--radius-sm); background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.05); } /* OBS Direct Video — Phase 1 (connection + diagnostics) */ .obsDirectFields{ display:flex; flex-direction:column; gap:var(--gap-sm); margin-top:6px; padding:8px; background:rgba(0,0,0,.18); border-radius:6px; border:1px solid rgba(255,255,255,.04); } .obsDirectStatus{ display:inline-flex; align-items:center; gap:var(--gap-sm); font-size:var(--font-xxs); font-weight:500; } .obsDirectDot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); flex-shrink:0; } .obsDirectStatus.isConnected .obsDirectDot{ background:var(--ok); box-shadow:0 0 6px rgba(55,214,122,.5); } .obsDirectStatus.isConnected .obsDirectStatusText{ color:var(--ok); } .obsDirectStatus.isConnecting .obsDirectDot{ background:rgba(255,185,100,.9); animation:obsDirectPulse 1s infinite; } .obsDirectStatus.isConnecting .obsDirectStatusText{ color:rgba(255,185,100,.9); } .obsDirectStatus.isFailed .obsDirectDot{ background:var(--danger); } .obsDirectStatus.isFailed .obsDirectStatusText{ color:var(--danger); } .obsDirectStatus.isDisconnected .obsDirectStatusText{ color:var(--muted); } @keyframes obsDirectPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } } .obsDirectDiag{ margin-top:6px; padding:8px; background:rgba(0,0,0,.3); border-radius:5px; border:1px solid rgba(255,255,255,.05); font-size:var(--font-xxs); font-family:ui-monospace,SFMono-Regular,monospace; line-height:1.5; } .obsDirectDiagRow{ display:flex; gap:var(--gap-sm); padding:1px 0; } .obsDirectDiagLabel{ color:var(--muted); flex-shrink:0; min-width:80px; } .obsDirectDiagOk{ color:var(--ok); font-weight:600; padding:4px 0 2px; margin-top:4px; border-top:1px solid rgba(255,255,255,.05); } .obsDirectDiagErrors{ color:var(--danger); padding:4px 0 0; margin-top:4px; border-top:1px solid rgba(239,68,68,.15); } .obsDirectDiagErrors div{ padding:1px 0; } .obsDirectDiagWarnings{ color:rgba(255,185,100,.9); padding:4px 0 0; margin-top:4px; } .obsDirectDiagWarnings div{ padding:1px 0; } /* OBS active badge in topbar */ .obsTopBadge{ display:none; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:8px; font-weight:700; letter-spacing:.05em; color:rgba(55,214,122,.7); padding:2px 5px; border-radius:3px; background:rgba(55,214,122,.08); border:1px solid rgba(55,214,122,.15); white-space:nowrap; transition:opacity .3s; pointer-events:none; } .obsTopBadge.active{ display:inline-flex; animation:obsTopPulse 2.5s ease-in-out infinite; } @keyframes obsTopPulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } } /* ===== Upload Progress Pill (r861) ===== */ .uploadPill{ display:none; position:absolute; right:48px; top:50%; transform:translateY(-50%); align-items:center; gap:var(--gap-sm); padding:4px 11px 4px 8px; border-radius:999px; cursor:pointer; background:rgba(106,167,255,.12); border:1px solid rgba(106,167,255,.22); color:rgba(160,200,255,.9); font:600 var(--font-xs)/1 inherit; white-space:nowrap; transition:opacity .25s,background .2s,border-color .2s; z-index:3; } .uploadPill.show{ display:inline-flex; } .uploadPill.done{ background:rgba(40,190,110,.12); border-color:rgba(40,190,110,.22); color:rgba(120,220,160,.9); } .uploadPill.hasErrors{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.22); color:rgba(255,160,160,.9); } .uploadPill .uploadPillIcon{ display:flex; align-items:center; justify-content:center; width:14px; height:14px; font-size:var(--font-sm); } .uploadPill.active .uploadPillIcon{ animation:pp 1.8s ease-in-out infinite; } @keyframes pp{0%,100%{opacity:1}50%{opacity:.5}} .uploadPill .uploadPillLabel{ font-size:var(--font-xs); } .uploadPill .uploadPillBarWrap{ width:40px; height:3px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; } .uploadPill .uploadPillBar{ height:100%; border-radius:999px; background:rgba(106,167,255,.8); width:0%; transition:width .3s linear; } .uploadPill .uploadPillPct{ font-size:var(--font-xxs); color:rgba(160,200,255,.6); } /* r81: Top status pill next to settings */ .topbar .topStatus{ font-size: var(--font-sm); padding: 6px 10px; opacity: .85; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 980px){ .topbar .topStatus{ display:none !important; } } /* r81 legacy top pause coloring removed in r844; header pause now follows state-active/state-paused only. */ /* r82: Top status pill: single status, compact */ .topbar .topStatus{ max-width: 200px; } /* r84: Hide legacy status source, keep for mirroring */ .srStatus{ display:none !important; } /* r84: Plain top status (no button styling) */ .topStatusPlain{ font-size: var(--font-sm); color: var(--muted); opacity: .9; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; background: transparent !important; border: none !important; box-shadow: none !important; } .topStatusPlain b, .topStatusPlain .lbl{ color: rgba(255,255,255,.55); font-weight: 600; white-space: nowrap; } /* r87: Stack Status label + value */ .topStatusPlain{ display:flex; flex-direction:column; line-height: 1.1; } /* r158: Keep the right cluster on a single line so it doesn't intrude into the centered LIVE pill space. Status is ellipsized and width-capped to preserve a stable center span. */ .topbar .actions{ flex-wrap: nowrap; min-width: 0; } .topbar .topStatusPlain{ max-width: clamp(140px, 16vw, 220px); } .topStatusPlain .lbl{ color: rgba(255,255,255,.50); font-weight: 700; font-size: var(--font-xs); } .topStatusPlain .val{ color: rgba(255,255,255,.78); font-size: var(--font-sm); } /* r851: LIVE slide styling — red pulsating, normalized with playlist live indicator */ .slideItem.isLiveSlide{ position: relative; border: 2px solid rgba(220,38,38,.55); box-shadow: 0 2px 10px rgba(0,0,0,.18), 0 0 0 1px rgba(220,38,38,.12) inset, 0 0 8px rgba(220,38,38,.12); border-radius: var(--radius-sm); animation: slideLivePulse 2.4s ease-in-out infinite; } @keyframes slideLivePulse{ 0%,100%{ border-color:rgba(220,38,38,.55); box-shadow:0 2px 10px rgba(0,0,0,.18), 0 0 0 1px rgba(220,38,38,.12) inset, 0 0 8px rgba(220,38,38,.12); } 50%{ border-color:rgba(220,38,38,.30); box-shadow:0 2px 10px rgba(0,0,0,.12), 0 0 0 1px rgba(220,38,38,.06) inset, 0 0 4px rgba(220,38,38,.06); } } .slideItem.isLiveSlide::before{ content:""; position:absolute; left:-1px; top:6px; bottom:6px; width:3px; border-radius: 3px; background: rgba(220,38,38,.80); } .match-hl{ background: rgba(34,197,94,.16); border-radius: 4px; padding: 0 2px; } /* ===== Dev Console (r861 redesign) ===== */ /* Header — single compact row */ /* Tab body */ /* Console tab */ /* Health tab */ /* Telemetry tab */ /* Settings tab */ /* Highlight searched query in preview */ .queryHit{background:rgba(0, 200, 0, .28); padding:0 .10em; border-radius:.22em;} /* Highlight matched line in preview (query) */ .bidi-line.queryHitLine{background:rgba(46, 204, 113, .18); padding:0 .10em; border-radius:.22em;} /* Highlight exact matched substring in slide list */ /* r082: Subtle green full-line highlight */ .queryHitLine{background:rgba(46, 204, 113, .16) !important; padding:0 .10em; border-radius:.22em;} /* r084: Light green highlight with black text for readability */ mark.queryHitLine{ background: rgba(144, 238, 144, .55) !important; /* light green */ color: #000 !important; padding: 0 .10em; border-radius: .22em; } /* Media slide controls (video) */ /* Media slide layout (Preview panel slide list) */ #slideList .slideItem.isMedia{ flex-direction: column; align-items: center; gap: 10px; padding-top: 28px; /* tightened; room for slide number badge */ } #slideList .slideItem.isMedia .slideNum{ position: absolute; top: 8px; inset-inline-start: 12px; } #slideList .slideItem.isMedia .slideContent{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; } #slideList .slideItem.isMedia .slideText{ width: 100%; text-align: center; } #slideList .slideItem.isMedia .mediaPeek{ width: min(520px, 100%); margin: 0 auto; } #slideList .slideItem.isMedia .mediaPeekVid{ width: 100%; max-height: 240px; border-radius: var(--radius-lg); background: rgba(0,0,0,0.55); box-shadow: 0 10px 30px rgba(0,0,0,0.35); object-fit: cover; display:block; } #slideList .slideItem.isMedia .mediaPeekVid--static{ position:absolute; inset:0; background:linear-gradient(135deg, rgba(24,32,52,.92), rgba(46,58,84,.72)); } /* Media Upload Modal */ .mediaUploadHeader{ position:absolute; left:12px; right:auto; top:50%; transform: translateY(-50%); z-index: 2; } /* ===== Media / song context menu (compact app-standard overflow) ===== */ .mediaCtxMenu{ position: fixed; z-index: 9999; display: inline-flex; flex-direction: column; width: max-content; min-width: 164px; max-width: min(220px, calc(100vw - 24px)); direction: ltr; text-align: left; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 6px; box-shadow: var(--shadow); backdrop-filter: blur(8px); opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; } .mediaCtxMenu.show{ opacity: 1; transform: translateY(0); } .mediaCtxRow{ display:flex; align-items:center; gap:8px; min-height:30px; padding: 6px 10px; border-radius: 8px; border:1px solid transparent; background: rgba(255,255,255,.04); color: rgba(255,255,255,.86); cursor:pointer; text-align:left; } .mediaCtxRow + .mediaCtxRow{ margin-top: 4px; } .mediaCtxRow:hover{ border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.08); } .mediaCtxRow.disabled{ opacity:.45; cursor: default; } .mediaCtxRow.disabled:hover{ border-color:transparent; background:rgba(255,255,255,.04); } .mediaCtxIcon{ width:14px; height:14px; min-width:14px; display:flex; align-items:center; justify-content:center; line-height: 14px; color: currentColor; } .mediaCtxIcon svg{ width:14px; height:14px; display:block; fill:currentColor; } .mediaCtxText{ display:flex; flex-direction:column; gap:1px; line-height:1.15; min-width:0; } .mediaCtxTitle{ font-size:11px; font-weight:700; } .mediaCtxTitle.strong{ font-weight:700; } .mediaCtxSub{ font-size:10px; opacity: .62; } /* ===== Toast notifications ===== */ .toastContainer{ position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; pointer-events: none; } .toastItem{ display: inline-flex; align-items: center; gap: 10px; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 14px; font-size: var(--font-base); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.4); backdrop-filter: blur(8px); white-space: nowrap; pointer-events: auto; opacity: 0; transform: translateY(8px); transition: opacity 160ms ease-out, transform 160ms ease-out; } .toastItem.show{ opacity: 1; transform: translateY(0); } .toastItem.out{ opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease-in, transform 120ms ease-in; } .toastMsg{ line-height: 1.3; } .toastUndo{ background: transparent; border: none; color: var(--accent, #6aa7ff); font-size: var(--font-base); font-weight: 650; cursor: pointer; padding: 0 2px; text-decoration: underline; text-underline-offset: 2px; } .toastUndo:hover{ opacity: .8; } /* ===== Empty states ===== */ .emptyState{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 16px; text-align: center; color: var(--muted); font-size: var(--font-base); line-height: 1.5; user-select: none; } .emptyState .emptyIcon{ font-size: 28px; opacity: .45; line-height: 1; } .emptyState .emptyHint{ font-size: var(--font-sm); opacity: .7; } /* Media Rename Modal */ /* === Live Video header controls (r146) === Icons are inline SVG (solid). No external images. Mounted as a child of the LIVE pill bar for deterministic placement. */ .topbar .livePinBar{ overflow: visible; } /* container that sits to the RIGHT of the LIVE pill */ .topbar .livePinBar .liveVideoCtl{ /* Controls live *inside* the pill to the right of the title. */ position: relative; z-index: 501; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; margin-left: auto; padding: 0 8px 0 6px; background: transparent; overflow: hidden; max-width: 84px; opacity: 1; transition: max-width 180ms ease, opacity 180ms ease, margin-left 180ms ease; border-left: 1px solid rgba(255,255,255,.06); height: 100%; } /* When hidden, collapse smoothly so the pill shrinks back to fit the title. */ .topbar .livePinBar .liveVideoCtl.hidden{ max-width: 0; opacity: 0; margin-left: 0; padding: 0; pointer-events: none; border: none; } .topbar .livePinBar .liveIcon{ width: 32px; height: 32px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; } .topbar .livePinBar .liveIcon:hover{ background-color: rgba(255,255,255,0.09); } .topbar .livePinBar .liveIcon:active{ transform: translateY(1px); } .topbar .livePinBar .liveIcon:focus{ outline:none; box-shadow: 0 0 0 3px rgba(255,255,255,0.10); } .topbar .livePinBar .liveIcon svg{ width: 16px; height: 16px; fill: rgba(255,255,255,0.88); } .topbar .livePinBar .liveIcon:hover svg{ fill: rgba(255,255,255,1); } .topbar .livePinBar .liveIcon.isOn{ background-color: rgba(255,255,255,0.12); } .topbar .livePinBar .liveIcon.isOn svg{ fill: rgba(255,255,255,1); } /* Play/Pause toggle within single control */ .topbar .livePinBar #liveVideoPlayPauseBtn .svgPause{ display:none; } .topbar .livePinBar #liveVideoPlayPauseBtn.isPaused .svgPlay{ display:none; } .topbar .livePinBar #liveVideoPlayPauseBtn.isPaused .svgPause{ display:block; } .topbar .livePinBar #liveVideoMuteBtn .svgVolOn{ display:block; } .topbar .livePinBar #liveVideoMuteBtn .svgVolMute{ display:none; } .topbar .livePinBar #liveVideoMuteBtn.isMuted .svgVolOn{ display:none; } .topbar .livePinBar #liveVideoMuteBtn.isMuted .svgVolMute{ display:block; } .topbar .livePinBar #liveVideoPlayPauseBtn.needsAttention{ background-color: rgba(245,158,11,.16); box-shadow: inset 0 0 0 1px rgba(245,158,11,.28); animation: liveMediaResumePulse 1.4s ease-in-out infinite; } .topbar .livePinBar.isMediaPaused{ border-color: rgba(245,158,11,.34); box-shadow: 0 10px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(245,158,11,.10); } .topbar .livePinBar.isMediaPaused .livePinSlideMini{ color: rgba(251,191,36,.98); font-weight: 700; } @keyframes liveMediaResumePulse{ 0%,100%{ box-shadow: inset 0 0 0 1px rgba(245,158,11,.22), 0 0 0 0 rgba(245,158,11,0); } 50%{ box-shadow: inset 0 0 0 1px rgba(245,158,11,.36), 0 0 0 6px rgba(245,158,11,.10); } } @media (max-width: 980px){ .topbar .livePinBar .liveVideoCtl{ display:none !important; } } /* === /Live Video header controls === */ .topStatusPlain::before{content:"•";opacity:.6;} .topStatusPlain::after{content:"•";opacity:.6;} /* r193: Center Bible chapter nav arrows in Preview header without moving A-/A+ or badge */ #previewHeader{ position: relative; } #previewHeader #bibleChapterNav{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; min-width: unset; gap: 6px; max-width: calc(100% - 260px); } #previewHeader #bibleChapterNav svg{ width:18px; height:18px; display:block; } #previewHeader #bibleChapterNav button:disabled{ opacity:.35; cursor:default; } .bibleChapterLabel{ font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; line-height: 1; user-select: none; } /* Force-project to OBS button — visibility controlled by JS */@media (prefers-reduced-motion: reduce){}/* ═══ OBS Panel — crafted UI ═══ */ /* Test connection button */ .obsTestWrap{ padding: 10px 14px 14px; border-top: 0.5px solid rgba(255,255,255,0.04); } .obsTestBtn{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; border-radius: 10px; border: 1px solid rgba(131,149,232,0.25); background: linear-gradient(135deg, rgba(131,149,232,0.08), rgba(131,149,232,0.03)); color: #9BABF0; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all .15s; letter-spacing: -0.005em; } .obsTestBtn:hover{ background: linear-gradient(135deg, rgba(131,149,232,0.16), rgba(131,149,232,0.06)); border-color: rgba(131,149,232,0.4); } .obsTestBtn:active{ background: linear-gradient(135deg, rgba(131,149,232,0.22), rgba(131,149,232,0.1)); transform: translateY(1px); } .obsTestBtn svg{ flex-shrink: 0; color: #8395E8; } /* Enable card — accent border when connected */ .obsEnableCard.isConnected{ border-color: rgba(85,216,138,0.15); } /* ═══ Connection form — compact inline grid ═══ */ .obsConnGrid{ padding: 12px 14px 4px; } .obsConnRow{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .obsConnLabel{ font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; width: 62px; flex-shrink: 0; text-align: right; } .obsConnInput{ flex: 1; min-width: 0; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: #ddd; font-family: inherit; outline: none; transition: border-color .12s; box-sizing: border-box; } .obsConnInput:focus{ border-color: rgba(131,149,232,0.4); background: rgba(255,255,255,0.06); } .obsConnInput--mono{ font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0; } /* Host:Port — on one line with colon */ .obsConnHostPort{ display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; } .obsConnInput--host{ flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .obsConnColon{ font-size: 14px; color: rgba(255,255,255,0.25); font-weight: 500; padding: 0 2px; background: rgba(255,255,255,0.03); border-top: 0.5px solid rgba(255,255,255,0.06); border-bottom: 0.5px solid rgba(255,255,255,0.06); height: 35px; display: flex; align-items: center; flex-shrink: 0; } .obsConnInput--port{ width: 58px; flex: 0 0 58px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; text-align: center; } /* ═══ Scene pickers — inline label + dropdown ═══ */ .sceneField--inline{ display: flex; align-items: center; gap: 10px; margin-top: 8px; } .sceneField--inline:first-child{ margin-top: 0; } .sceneField--inline .sceneField-lbl{ display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,0.5); width: 62px; flex-shrink: 0; text-align: right; justify-content: flex-end; margin-bottom: 0; } .sceneField--inline .scenePicker{ flex: 1; min-width: 0; border-left: 3px solid rgba(255,255,255,0.08); padding: 8px 10px 8px 11px; font-size: 13px; } .sceneField--inline:first-child .scenePicker{ border-left-color: rgba(224,160,80,0.35); } .sceneField--inline:last-child .scenePicker{ border-left-color: rgba(112,176,224,0.35); } /* ═══ Playback section — scene indent adjusted for inline ═══ */ .burgerMenu .sceneFields{ padding: 8px 14px 14px; margin-left: 42px; border-left: 1px solid rgba(255,255,255,0.04); } /* ═══ Session picker — styled as inline input-like control ═══ */ .obsSessionPicker{ flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s; } .obsSessionPicker:hover{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } .obsSessionPicker-name{ font-size: 13px; font-weight: 500; color: #ddd; font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .obsSessionPicker svg{ color: rgba(255,255,255,0.3); flex-shrink: 0; } /* Connection input as select */ .obsConnInput--select{ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; padding-right: 28px; cursor: pointer; } .obsConnInput--select option{ background: #0c1020; color: #ddd; } /* URL section */ .obsSrcUrlWrap{ padding: 10px 14px 14px; border-top: 0.5px solid rgba(255,255,255,0.04); } .obsSrcUrlLabel{ font-size: 10px; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; margin-bottom: 6px; } .obsSrcUrlHint{ font-size: 10.5px; color: rgba(255,255,255,0.3); margin-top: 6px; line-height: 1.4; } /* Session dropdown (reuses scenePickerDD pattern) */ .obsSessionDD{ position: fixed; background: #16192d; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 5px 0; box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.05); z-index: 1001; min-width: 180px; max-height: 260px; overflow-y: auto; } .obsSessionDD-item{ padding: 9px 14px; font-size: 13px; color: rgba(255,255,255,0.85); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .obsSessionDD-item:hover{ background: rgba(255,255,255,0.06); } .obsSessionDD-item.isSel{ color: #9BABF0; background: rgba(123,140,222,0.08); } .obsSessionDD-item.isSel::after{ content: '✓'; color: #9BABF0; font-weight: 600; font-size: 13px; } .obsSessionDD-meta{ font-size: 10.5px; color: rgba(255,255,255,0.35); flex-shrink: 0; } .obsSessionDD-del{ width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: rgba(255,255,255,0.25); font-size: 14px; cursor: pointer; border-radius: 5px; flex-shrink: 0; opacity: 0; transition: opacity .15s, color .12s; } .obsSessionDD-item:hover .obsSessionDD-del{ opacity: 0.7; } .obsSessionDD-del:hover{ color: #e07070; opacity: 1 !important; } /* Session lock indicator */ .obsSessionDD-item.isLocked{ opacity: 0.7; } .obsSessionDD-lock{ font-size: 10px; color: #ecbb78; background: rgba(224,160,80,0.1); border: 0.5px solid rgba(224,160,80,0.2); padding: 2px 7px; border-radius: 5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; } /* ═══ Callout ═══ */ .burgerMenu .burgerCallout{ margin: 12px 0 4px; font-size: 11px; } /* r297: Chorus slide number should align exactly like normal slide numbers. Only difference: red + brackets via .chorusNum text/class. No vertical centering, no extra padding, no special tint. */ .slideItem.isChorus .slideNum{ top: auto !important; bottom: 8px !important; transform: none !important; } #slideList .slideItem.isChorus .slideBody{ padding-left: 0 !important; } .slideItem.isChorus{ background: transparent !important; border-left: none !important; } .slideItem.isChorus::after{ content: none !important; } /* r298: Chorus slide number must align exactly like normal slide numbers in slide list. Existing rule #slideList .slideItem.isChorus .slideNum centered it vertically; override it here. */ #slideList .slideItem.isChorus .slideNum{ top: auto !important; bottom: 8px !important; left: 10px !important; right: auto !important; transform: none !important; opacity: .85 !important; /* keep chorus visibility; color/brackets handled by .chorusNum */ } /* r299 UI: anchor Search + addMenu close to the + button */ .searchHeader{ position: relative; } .searchHeader .addMenu{ position:absolute; top:60%; right:0; margin-top:8px; } .searchHeader .addMenu.open{ display:block; } .searchHeader .addMenu{ left:auto !important; } /* r299 UI: Standby Display menu should match bible navigator dropdown (tight, no pill border) */ /* r313: Mobile controller polish (Samsung PWA) */ @media (max-width: 820px) and (any-pointer: coarse){ /* Topbar: keep only burger + icons, sticky */ .topbar{ position: sticky; top: 0; z-index: 2000; } .topbar .brandMark, .topbar .brand > div:not(.brandMark), .topbar .brand .pill{ display: none !important; } /* Hide Cast on mobile unless Google Cast mobile sender is available */ #btnCastIcon{ display:none !important; } body.hasMobileCastUI #btnCastIcon{ display:inline-flex !important; } /* Footer: keep responsive, hide counts + debug, keep Search + Build */ .footerInner{ flex-wrap: wrap; gap: 8px 10px; } .footerText{ flex-wrap: wrap; } #footerStats{ flex-wrap: wrap; min-width: 0; } .fs_song, .fs_bible, .fs_dym, .fs_updated{ display:none !important; } /* (r863) Keep debug link visible on mobile for diagnostics */ .fs_debuglink, #footerDebugLink{ font-size: 11px; } /* Ensure long footer parts wrap instead of overflow */ .appFooter, .footerInner, .footerText, #footerStats{ overflow: hidden; } #footerStats span, #footerStats a{ white-space: normal; overflow-wrap:anywhere; } /* Results list: always scrollable */ #results{ overflow-y:auto !important; -webkit-overflow-scrolling: touch; } } /* Debug Settings sub-modal (inside Debug modal) */ /* ===== Minimal Display/Cast Fit (r423) ===== */ .slideInner.minfitInner{ /* Use full available box; JS measures clientWidth/clientHeight here */ width:100%; height:100%; box-sizing:border-box; padding: 60px 80px; /* stable breathing room; adjusted via responsive below */ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; } @media (max-width: 900px), (max-height: 900px){ .slideInner.minfitInner{ padding: 44px 34px; /* mobile safe padding to prevent edge hugging */ } } .slideInner.minfitInner.minfitSong .line{ width:100%; /* default no-wrap; toggled by class */ } .slideInner.minfitInner.minfitNoWrap .line{ white-space: pre; } .slideInner.minfitInner.minfitWrap .line{ white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; } .slideInner.minfitInner.minfitBible .biblePara{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* ===== End Minimal Display/Cast Fit (r423) ===== */ /* (r517) Overlays popover: ensure Standby select caret is visible. This MUST live after the global .menuSelect background rules, which otherwise clear background-image. */ #overlaysMenu #ovStandbyDisplay.menuSelect{ background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 2px 18px 2px 0 !important; font-size: var(--font-base) !important; font-weight: 600 !important; color: var(--text) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.88)' d='M7 10l5 6 5-6z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 2px center !important; background-size: 12px 12px !important; } /* (r518) Overlays popover: Standby select caret drawn via wrapper pseudo-element. Reason: native