/* === Editor mode: pływające tagi identyfikatorów tekstów do napisania === Aktywacja: dodaj klasę .editor-mode do (auto przez editor-mode.js z ?editor=1) Referencja numerów: TEKSTY.xlsx → zakładka "Do napisania" */ .text-marker { display: none; vertical-align: middle; align-items: center; gap: 6px; padding: 3px 9px; margin: 0 6px; background: rgba(124, 58, 237, 0.94); color: #FFF; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, 0.4); white-space: nowrap; text-transform: none; z-index: 1000; position: relative; box-shadow: 0 2px 8px -2px rgba(124, 58, 237, 0.5); vertical-align: middle; cursor: help; } .text-marker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FFF; display: inline-block; animation: markerPulse 1.8s ease-in-out infinite; } @keyframes markerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .text-marker small { opacity: 0.7; font-weight: 500; margin-left: 3px; } /* Wariant blokowy - dla tekstów w bloku, nie inline */ .text-marker.block { display: none; margin: 0 0 12px 0; } /* Widoczność tylko w trybie editor */ body.editor-mode .text-marker { display: inline-flex; } body.editor-mode .text-marker.block { display: inline-flex; } /* Pływający toggle w rogu strony */ .editor-toggle { position: fixed; top: 20px; right: 20px; z-index: 9999; padding: 10px 16px; background: rgba(26, 10, 46, 0.92); color: #FFF; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; } .editor-toggle:hover { transform: translateY(-2px); background: #7C3AED; } .editor-toggle::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: background 0.2s ease; } body.editor-mode .editor-toggle::before { background: #FCD34D; box-shadow: 0 0 8px #FCD34D; } /* Pływający hint boxy przy wskazanym markerze */ .editor-hint { position: absolute; z-index: 10000; padding: 12px 14px; background: #1A0A2E; color: #FFF; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.5; max-width: 320px; border-radius: 8px; border: 1px solid rgba(124, 58, 237, 0.5); box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.5); pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } .editor-hint.visible { opacity: 1; } .editor-hint strong { color: #C4B5FD; display: block; margin-bottom: 4px; font-size: 11px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; }