(folder)
| 1482 | |
| 1483 | |
| 1484 | export function openColorFolderModal(folder) { |
| 1485 | const existing = window.folderColorMap[folder] || ''; |
| 1486 | const defaultHex = existing || '#f6b84e'; |
| 1487 | |
| 1488 | const modal = document.createElement('div'); |
| 1489 | modal.id = 'colorFolderModal'; |
| 1490 | modal.className = 'modal'; |
| 1491 | modal.innerHTML = ` |
| 1492 | <div class="modal-content" style="width:460px;max-width:90vw;"> |
| 1493 | <style> |
| 1494 | /* Scoped styles for the preview only */ |
| 1495 | #colorFolderModal .folder-preview { |
| 1496 | display:flex; align-items:center; gap:12px; |
| 1497 | margin-top:12px; padding:10px 12px; border-radius:12px; |
| 1498 | border:1px solid var(--border-color, #ddd); |
| 1499 | background: var(--bg, transparent); |
| 1500 | flex-wrap: wrap; |
| 1501 | } |
| 1502 | body.dark-mode #colorFolderModal .folder-preview { |
| 1503 | --border-color:#444; --bg: rgba(255,255,255,.02); |
| 1504 | } |
| 1505 | #colorFolderModal .folder-preview .folder-icon { width:56px; height:56px; display:inline-block; flex: 0 0 56px; } |
| 1506 | #colorFolderModal .folder-preview svg { width:56px; height:56px; display:block } |
| 1507 | /* Use the same variable names you already apply on folder rows */ |
| 1508 | #colorFolderModal .folder-preview .folder-back { fill:var(--filr-folder-back, #f0d084) } |
| 1509 | #colorFolderModal .folder-preview .folder-front { fill:var(--filr-folder-front, #e2b158); stroke:var(--filr-folder-stroke, #996a1e); stroke-width:.6 } |
| 1510 | #colorFolderModal .folder-preview .lip-highlight { stroke:rgba(255,255,255,.35); fill:none; stroke-width:.9 } |
| 1511 | #colorFolderModal .folder-preview .paper { fill:#fff; stroke:#d0d0d0; stroke-width:.6 } |
| 1512 | #colorFolderModal .folder-preview .paper-fold { fill:#ececec } |
| 1513 | #colorFolderModal .folder-preview .paper-line { stroke:#c8c8c8; stroke-width:.8 } |
| 1514 | #colorFolderModal .folder-preview .label { |
| 1515 | font-weight:600; user-select:none; |
| 1516 | max-width: calc(100% - 70px); |
| 1517 | white-space: normal; |
| 1518 | overflow-wrap: anywhere; |
| 1519 | word-break: break-word; |
| 1520 | line-height: 1.25; |
| 1521 | font-size: clamp(12px, 2.4vw, 16px); |
| 1522 | } |
| 1523 | |
| 1524 | /* High-contrast ghost button just for this modal */ |
| 1525 | #colorFolderModal .btn-ghost { |
| 1526 | background: transparent; |
| 1527 | border: 1px solid var(--ghost-border, #cfcfcf); |
| 1528 | color: var(--ghost-fg, #222); |
| 1529 | padding: 6px 12px; |
| 1530 | } |
| 1531 | #colorFolderModal .btn-ghost:hover { |
| 1532 | background: var(--ghost-hover-bg, #f5f5f5); |
| 1533 | } |
| 1534 | #colorFolderModal .btn-ghost:focus-visible { |
| 1535 | outline: 2px solid #8ab4f8; |
| 1536 | outline-offset: 2px; |
| 1537 | } |
| 1538 | body.dark-mode #colorFolderModal .btn-ghost { |
| 1539 | --ghost-border: #60636b; |
| 1540 | --ghost-fg: #f0f0f0; |
| 1541 | --ghost-hover-bg: rgba(255,255,255,.08); |
no test coverage detected