/* ════════════════════════════════════════════════════════════════ PULSIFORMS v55 — EDITOR ERGONOMICS PATCH Ajouter dans après style.css ════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ BUG FIX #1 — SÉLECTION DÉCALÉE CAUSE : la scrollbar native du textarea prend ~8px de largeur. Le highlight overlay n'a pas de scrollbar → texte plus large → lines wrap différemment → sélection OS décalée vs highlight. FIX : masquer la scrollbar native, la remplacer par une custom. ══════════════════════════════════════════════════════════════ */ #p-code.code-transparent { scrollbar-width: none !important; -ms-overflow-style: none !important; } #p-code.code-transparent::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* Propriétés supplémentaires partagées highlight + textarea */ #code-highlight, #p-code.code-transparent { tab-size: 4 !important; -moz-tab-size: 4 !important; letter-spacing: 0 !important; word-spacing: 0 !important; white-space: pre-wrap !important; word-wrap: break-word !important; box-sizing: border-box !important; overflow-wrap: break-word !important; } /* ══════════════════════════════════════════════════════════════ BUG FIX #2 — TOOLBAR STICKY Plein écran accessible sans scroller ══════════════════════════════════════════════════════════════ */ #tab-code .code-toolbar { position: sticky !important; top: 0; z-index: 30; background: var(--panel); margin: -16px -16px 0 -16px; /* Compensate parent padding */ padding: 8px 16px; border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); } #tab-code.code-fullscreen .code-toolbar { position: static !important; margin: 0; padding: 8px 0; background: #07080B; border-bottom-color: rgba(201,169,107,0.25); } /* Bouton plein écran : danger en mode fullscreen pour trouver facilement l'exit */ #tab-code.code-fullscreen #btn-fullscreen-code { background: rgba(212,77,92,0.12); color: #D44D5C; border-color: rgba(212,77,92,0.30); } #tab-code.code-fullscreen #btn-fullscreen-code:hover { background: rgba(212,77,92,0.22); } /* ══════════════════════════════════════════════════════════════ BUG FIX #3 — SCROLLBAR CUSTOM + FAB PLEIN ÉCRAN ══════════════════════════════════════════════════════════════ */ .code-editor-wrap { position: relative !important; } /* Scrollbar custom (droite du wrap) */ .ce-scrollbar { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; z-index: 10; pointer-events: none; } .ce-scrollbar-track { position: absolute; inset: 2px 2px 2px auto; width: 4px; background: transparent; border-radius: 4px; } .ce-scrollbar-thumb { position: absolute; left: 0; right: 0; min-height: 24px; background: var(--border-light); border-radius: 4px; opacity: 0; transition: opacity 0.2s, background 0.15s; pointer-events: auto; cursor: ns-resize; } .code-editor-wrap:hover .ce-scrollbar-thumb, .code-editor-wrap:focus-within .ce-scrollbar-thumb { opacity: 0.85; } .ce-scrollbar-thumb:hover, .ce-scrollbar-thumb.dragging { opacity: 1 !important; background: var(--accent) !important; } /* FAB plein écran dans le coin de l'éditeur */ .ce-fs-fab { position: absolute; top: 6px; right: 12px; /* laisse la place à la scrollbar */ z-index: 20; width: 26px; height: 26px; background: rgba(201,169,107,0.08); border: 1px solid rgba(201,169,107,0.22); border-radius: 5px; color: var(--accent); font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.18s, background 0.12s, transform 0.12s; pointer-events: none; user-select: none; } .code-editor-wrap:hover .ce-fs-fab { opacity: 1; pointer-events: auto; } .ce-fs-fab:hover { background: rgba(201,169,107,0.18); transform: scale(1.1); } #tab-code.code-fullscreen .ce-fs-fab { opacity: 0.7; pointer-events: auto; background: rgba(212,77,92,0.12); border-color: rgba(212,77,92,0.30); color: #D44D5C; } /* ══════════════════════════════════════════════════════════════ AMÉLIORATION — HAUTEUR DYNAMIQUE DE L'ÉDITEUR ══════════════════════════════════════════════════════════════ */ .code-editor-wrap { min-height: 180px; /* Hauteur flexible selon l'espace disponible dans le panneau */ flex: 1 1 auto !important; overflow: hidden; } /* Poignée de redimensionnement vertical de l'éditeur */ .ce-resize-handle { height: 6px; background: linear-gradient(transparent, var(--border)); cursor: ns-resize; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; border-radius: 0 0 var(--radius) var(--radius); } .ce-resize-handle:hover { background: linear-gradient(transparent, var(--accent)); } .ce-resize-handle::after { content: ''; width: 32px; height: 2px; background: var(--border-light); border-radius: 2px; } .ce-resize-handle:hover::after { background: var(--accent); } /* ══════════════════════════════════════════════════════════════ AMÉLIORATION — STATUS BAR + SÉLECTION ══════════════════════════════════════════════════════════════ */ .csb-selection { color: var(--accent2); font-size: 10px; font-family: var(--font-mono); } /* ══════════════════════════════════════════════════════════════ AMÉLIORATION — SNIPPET BANK COLLAPSIBLE + UX ══════════════════════════════════════════════════════════════ */ .snippet-bank { flex-shrink: 0; transition: all 0.2s ease; } .snippet-bank-header { cursor: pointer; transition: background 0.12s; } .snippet-bank-header:hover { background: var(--panel2); } /* Flèche de collapse */ .snip-collapse-arrow { font-size: 10px; color: var(--text-dim); transition: transform 0.2s ease; line-height: 1; flex-shrink: 0; } .snippet-bank.collapsed .snip-collapse-arrow { transform: rotate(-90deg); } /* Corps du snippet bank : animé à la fermeture */ .snippet-bank-body { overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s ease; max-height: 300px; opacity: 1; } .snippet-bank.collapsed .snippet-bank-body { max-height: 0; opacity: 0; pointer-events: none; } /* Flash de confirmation à l'insertion */ @keyframes snip-flash { 0% { background: rgba(34,197,94,0.2); color: var(--success); } 100% { background: transparent; } } .snippet-item.just-inserted { animation: snip-flash 0.5s ease forwards; } /* Snippet item hover amélioré */ .snippet-item { border-left: 2px solid transparent; transition: background 0.1s, border-color 0.1s; } .snippet-item:hover { border-left-color: var(--accent); } /* ══════════════════════════════════════════════════════════════ AMÉLIORATION — ÉDITEUR PLEIN ÉCRAN ══════════════════════════════════════════════════════════════ */ #tab-code.code-fullscreen { overflow: hidden !important; } #tab-code.code-fullscreen .snippet-bank { max-height: 140px; } #tab-code.code-fullscreen .code-editor-wrap { flex: 1 !important; min-height: 0 !important; max-height: none !important; } /* ══════════════════════════════════════════════════════════════ BUG FIX MOBILE — NUMÉROS DE LIGNES DÉCALÉS CAUSE : line-numbers utilise font-size:11px mais la textarea utilise 13px. Sur mobile, le rendu accumule l'écart ligne/ligne. FIX : forcer EXACTEMENT le même line-height en px (pas en unité relative) et le même padding-top pour que la ligne 1 s'aligne. ══════════════════════════════════════════════════════════════ */ /* Valeur de référence : 13px × 1.6 = 20.8px par ligne */ :root { --editor-font-size: 13px; --editor-line-height: 20.8px; /* 13 × 1.6 — valeur fixe en px, pas relative */ --editor-padding-top: 10px; } #code-highlight, #p-code.code-transparent { font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace !important; font-size: var(--editor-font-size) !important; line-height: var(--editor-line-height) !important; /* px, pas ratio */ padding-top: var(--editor-padding-top) !important; padding-bottom: 10px !important; padding-left: 10px !important; padding-right: 20px !important; /* Bloquer le zoom auto sur iOS (cause d'un font-size différent) */ -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } /* line-numbers : MÊME font-size, MÊME line-height, MÊME padding-top */ .line-numbers { font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace !important; font-size: var(--editor-font-size) !important; /* identique à la textarea */ line-height: var(--editor-line-height) !important; /* px fixe, pas ratio */ padding-top: var(--editor-padding-top) !important; padding-bottom: 10px !important; padding-left: 6px !important; padding-right: 8px !important; overflow: hidden !important; will-change: transform; /* Bloquer le zoom iOS aussi sur les line-numbers */ -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } /* ══════════════════════════════════════════════════════════════ MICRO-AMÉLIORATION — CURSEUR BLINKING VISIBLE Même avec -webkit-text-fill-color: transparent, le caret doit être clairement visible ══════════════════════════════════════════════════════════════ */ #p-code.code-transparent { caret-color: #ffffff !important; caret-shape: bar; } /* ══════════════════════════════════════════════════════════════ MICRO-AMÉLIORATION — OUTLINE FOCUS ÉDITEUR ══════════════════════════════════════════════════════════════ */ .code-editor-wrap:focus-within { box-shadow: 0 0 0 2px rgba(201,169,107,0.15), inset 0 0 0 1px rgba(201,169,107,0.25); border-color: rgba(201,169,107,0.45) !important; } /* ══════════════════════════════════════════════════════════════ HINT TOUCHE F11 sous le bouton plein écran ══════════════════════════════════════════════════════════════ */ #btn-fullscreen-code::after { content: ' · F11'; font-size: 9px; opacity: 0.55; font-weight: 400; }