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

feat: implement UI theme CSS generation for editor interface styling

Browse Source 
- Added UI theme CSS generation to _generate_layered_css method
- UI themes now style editor control panels, buttons, frames, and textareas
- Editor elements styled with CSS classes:
  - .markitect-control-panel (floating editor panel)
  - .markitect-editor-button (action buttons)
  - .markitect-section-frame (editing section borders)
  - .markitect-edit-textarea (text editing areas)

UI Theme Examples:
- Greyscale: Clean grey interface with subtle shadows
- Electric: Cyberpunk cyan/navy with glowing effects
- Psychedelic: Rainbow gradient panels with hot pink accents
- Standard: Professional clean interface (default)

All UI themes properly inherit from theme properties:
- editor_panel_bg, editor_panel_border
- editor_button_bg/hover/active
- editor_text_color, editor_focus_color, editor_shadow

🤖 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:33:51 +01:00
parent c6422bf73e
commit 6dd278c538
1 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
markitect/clean_document_manager.py
View File

@@ -297,7 +297,42 @@ class CleanDocumentManager:
opacity: 0.8;
}}"""
return f"<style>{base_css}{heading_css}{text_css}{element_css}{link_css}{accent_css}</style>"
# UI theme styling for editor interface elements
ui_css = ""
if props.get('editor_panel_bg'):
ui_css = f"""
.markitect-edit-mode .markitect-control-panel {{
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 {{
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 {{
background: {props.get('editor_button_hover', '#e9ecef')};
}}
.markitect-edit-mode .markitect-editor-button:active,
.markitect-edit-mode .markitect-editor-button.active {{
background: {props.get('editor_button_active', '#dee2e6')};
}}
.markitect-edit-mode .markitect-section-frame {{
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 {{
border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
color: {props.get('editor_text_color', '#212529')};
}}
.markitect-edit-mode .markitect-edit-textarea:focus {{
border-color: {props.get('editor_focus_color', '#0066cc')};
box-shadow: 0 0 0 2px {props.get('editor_focus_color', '#0066cc')}33;
}}"""
return f"<style>{base_css}{heading_css}{text_css}{element_css}{link_css}{accent_css}{ui_css}</style>"
def _get_legacy_template_css(self, template: str) -> str:
"""Legacy CSS generation - kept for backward compatibility."""