From dd0c9e3180d7a78df99d097f0776266438c9b678 Mon Sep 17 00:00:00 2001
From: tegwick <bernd.worsch@gmail.com>
Date: Mon, 27 Oct 2025 22:39:13 +0100
Subject: [PATCH] fix: correct CSS selectors for UI theme targeting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Problem:
- UI themes were defined but CSS wasn't applying to editor interface
- CSS selectors didn't match actual HTML element classes/IDs

The Solution:
- Updated CSS selectors to target correct editor elements:
  - #markitect-global-controls (main control panel)
  - .control-btn (action buttons like Save, Reset)
  - .markitect-section-editable (editable section frames)
  - textarea (text editing areas)

Results:
- Greyscale theme: Grey panels, borders, subtle shadows
- Electric theme: Cyan/navy cyberpunk with yellow focus
- Psychedelic theme: Rainbow gradients with hot pink accents
- Standard theme: Clean professional interface (default)

All UI themes now properly style the editor interface in --edit mode!

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 markitect/clean_document_manager.py | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/markitect/clean_document_manager.py b/markitect/clean_document_manager.py
index 95e76d18..388cdf6a 100644
--- a/markitect/clean_document_manager.py
+++ b/markitect/clean_document_manager.py
@@ -301,33 +301,33 @@ class CleanDocumentManager:
         ui_css = ""
         if props.get('editor_panel_bg'):
             ui_css = f"""
-            .markitect-edit-mode .markitect-control-panel {{
+            .markitect-edit-mode #markitect-global-controls {{
                 background: {props['editor_panel_bg']};
                 border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
                 box-shadow: 0 4px 12px {props.get('editor_shadow', 'rgba(0,0,0,0.1)')};
                 color: {props.get('editor_text_color', '#212529')};
             }}
-            .markitect-edit-mode .markitect-editor-button {{
+            .markitect-edit-mode .control-btn {{
                 background: {props.get('editor_button_bg', '#ffffff')};
                 color: {props.get('editor_text_color', '#212529')};
                 border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
             }}
-            .markitect-edit-mode .markitect-editor-button:hover {{
+            .markitect-edit-mode .control-btn:hover {{
                 background: {props.get('editor_button_hover', '#e9ecef')};
             }}
-            .markitect-edit-mode .markitect-editor-button:active,
-            .markitect-edit-mode .markitect-editor-button.active {{
+            .markitect-edit-mode .control-btn:active,
+            .markitect-edit-mode .control-btn.active {{
                 background: {props.get('editor_button_active', '#dee2e6')};
             }}
-            .markitect-edit-mode .markitect-section-frame {{
+            .markitect-edit-mode .markitect-section-editable {{
                 border: 2px solid {props.get('editor_focus_color', '#0066cc')};
                 box-shadow: 0 0 0 3px {props.get('editor_focus_color', '#0066cc')}33;
             }}
-            .markitect-edit-mode .markitect-edit-textarea {{
+            .markitect-edit-mode textarea {{
                 border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
                 color: {props.get('editor_text_color', '#212529')};
             }}
-            .markitect-edit-mode .markitect-edit-textarea:focus {{
+            .markitect-edit-mode textarea:focus {{
                 border-color: {props.get('editor_focus_color', '#0066cc')};
                 box-shadow: 0 0 0 2px {props.get('editor_focus_color', '#0066cc')}33;
             }}"""