()
| 257 | } |
| 258 | |
| 259 | function ensureMediaModal() { |
| 260 | let overlay = document.getElementById("filePreviewModal"); |
| 261 | if (overlay) return overlay; |
| 262 | |
| 263 | overlay = document.createElement("div"); |
| 264 | overlay.id = "filePreviewModal"; |
| 265 | Object.assign(overlay.style, { |
| 266 | position: "fixed", |
| 267 | inset: "0", |
| 268 | width: "100vw", |
| 269 | height: "100vh", |
| 270 | backgroundColor: "rgba(0,0,0,0.7)", |
| 271 | display: "none", |
| 272 | justifyContent: "center", |
| 273 | alignItems: "center", |
| 274 | zIndex: "1000" |
| 275 | }); |
| 276 | |
| 277 | const root = document.documentElement; |
| 278 | const styles = getComputedStyle(root); |
| 279 | const isDark = root.classList.contains('dark-mode'); |
| 280 | const panelBg = styles.getPropertyValue('--panel-bg').trim() || styles.getPropertyValue('--bg-color').trim() || (isDark ? '#2c2c2c' : '#ffffff'); |
| 281 | const textCol = styles.getPropertyValue('--text-color').trim() || (isDark ? '#eaeaea' : '#111111'); |
| 282 | |
| 283 | const navBg = isDark ? 'rgba(255,255,255,.28)' : 'rgba(0,0,0,.45)'; |
| 284 | const navFg = '#fff'; |
| 285 | const navBorder = isDark ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)'; |
| 286 | |
| 287 | // fixed top bar; pad-right to avoid overlap with absolute close “×” |
| 288 | overlay.innerHTML = ` |
| 289 | <div class="modal-content media-modal" style=" |
| 290 | position: relative; |
| 291 | max-width: 92vw; |
| 292 | width: 92vw; |
| 293 | max-height: 92vh; |
| 294 | height: 92vh; |
| 295 | box-sizing: border-box; |
| 296 | background: ${panelBg}; |
| 297 | color: ${textCol}; |
| 298 | overflow: hidden; |
| 299 | border-radius: 10px; |
| 300 | display:flex; flex-direction:column; |
| 301 | "> |
| 302 | <!-- Top bar --> |
| 303 | <div class="media-topbar" style=" |
| 304 | flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; |
| 305 | height:44px; padding:6px 12px; padding-right:56px; gap:10px; |
| 306 | border-bottom:1px solid ${isDark ? 'rgba(255,255,255,.12)' : 'rgba(0,0,0,.08)'}; |
| 307 | background:${panelBg}; |
| 308 | "> |
| 309 | <div class="media-title" style="display:flex; align-items:center; gap:8px; min-width:0;"> |
| 310 | <span class="material-icons title-icon" style=" |
| 311 | width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; |
| 312 | font-size:22px; line-height:1; opacity:${isDark ? '0.96' : '0.9'};"> |
| 313 | insert_drive_file |
| 314 | </span> |
| 315 | <div class="title-text" style="font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"></div> |
| 316 | </div> |
no test coverage detected