coulomb/markitect-main
2
0
Fork 0
Code Issues 60 Pull Requests Actions Projects 12 Releases 1 Wiki Activity

fix: correct CSS selectors for UI theme targeting

Browse Source 
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>
This commit is contained in:
Bernd Worsch
2025-10-27 22:39:13 +01:00
parent 6dd278c538
commit dd0c9e3180
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
markitect/clean_document_manager.py
View File

@@ -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;
}}"""