/* Shared "add words from image / text" modal. * * Used by the admin words-manager (public/javascripts/edit-words.js) and the * user popup on the Quests / Practice pages, all via window.BulkWordAdd * (public/javascripts/bulk-word-add.js). Fully self-contained under the .bwa-* * namespace so it can drop onto any page without depending on that page's CSS. * * Visuals mirror the brutalist word-manager modal in * public/stylesheets/pages/edit-words.css (.wfill-* / .wbulk-* / .wa-btn*). */ .bwa-overlay { position: fixed; inset: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; } .bwa-box { background-color: #fff; border: 2px solid var(--as-black); box-shadow: 6px 6px 0 var(--as-black); padding: 20px; width: 660px; max-width: 100%; max-height: 92vh; overflow: auto; } /* The modal mounts on , outside any page wrapper, so it misses page-level box-sizing resets and the Inter font, and bare span/input/textarea/button rules elsewhere force Roboto/monospace here. Re-establish both for the subtree. */ .bwa-box, .bwa-box * { box-sizing: border-box; font-family: 'Inter', sans-serif; } .bwa-title { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; } .bwa-help { font-size: 12px; color: var(--as-grey); line-height: 1.45; margin-bottom: 12px; } /* ── Image upload ─────────────────────────────────────────────────────── */ .bwa-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border: 2px dashed var(--as-black); background-color: #fafafa; padding: 12px; margin-bottom: 12px; } .bwa-file-input { display: none; } .bwa-upload-btn { border: 2px solid var(--as-black); background-color: var(--as-black); color: #fff; padding: 10px 16px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .bwa-upload-btn:hover { background-color: var(--as-yellow); color: var(--as-black); } .bwa-upload-btn:disabled { opacity: 0.5; cursor: default; } .bwa-upload-hint { font-size: 11px; color: var(--as-grey); line-height: 1.4; flex: 1 1 180px; } .bwa-upload-status { flex: 1 1 100%; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: #2a7d2a; } .bwa-spinner { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; background-color: var(--as-black); animation: bwa-spin 0.9s linear infinite; } @keyframes bwa-spin { to { transform: rotate(360deg); } } .bwa-upload-status.bwa-error { color: var(--as-red); } /* ── Free-text input ──────────────────────────────────────────────────── */ .bwa-input { width: 100%; border: 2px solid var(--as-black); padding: 10px; font-size: 13px; resize: vertical; margin-bottom: 12px; } /* ── Review stage ─────────────────────────────────────────────────────── */ .bwa-stage { max-height: 46vh; overflow: auto; } .bwa-list { display: flex; flex-direction: column; gap: 8px; } .bwa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid #e0e0e0; padding: 6px 8px; } .bwa-tag { flex: 0 0 auto; width: 30px; text-align: center; font-size: 9px; font-weight: 900; border: 1px solid var(--as-black); padding: 3px 0; } .bwa-tag--cz { background-color: var(--as-yellow); } .bwa-tag--en { background-color: #cffafe; } .bwa-field { flex: 1 1 160px; min-width: 140px; display: flex; align-items: center; gap: 8px; } /* Fallback for browsers without flexbox `gap` support (older Safari, some in-app/webview browsers): without it, the CZ/EN tag and the type