feat: implement scroll indicators with disabled state styling

- Add document viewport scroll indicators with triangular arrows
- Implement disabled state styling (grey background, cursor: not-allowed)
- Add smooth scrolling with easing functions for indicator clicks
- Include hover detection at top/bottom of viewport for indicator display
- Fix CSS syntax error in scroll indicator styles
- Add theme-aware styling for all UI themes (standard, greyscale, electric, psychedelic)
- Extend confirmation dialog with theme-consistent danger and secondary button properties
- Update UserInterfaceFramework.md to mark confirmation dialog as completed

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-28 22:36:15 +01:00
parent be14322b13
commit dd3a00040a
3 changed files with 476 additions and 23 deletions

View File

@@ -75,7 +75,14 @@ LAYERED_THEMES = {
'editor_button_active': '#dee2e6',
'editor_text_color': '#212529',
'editor_focus_color': '#0066cc',
'editor_shadow': 'rgba(0,0,0,0.1)'
'editor_shadow': 'rgba(0,0,0,0.1)',
'editor_danger_button': '#dc3545',
'editor_danger_button_hover': '#c82333',
'editor_secondary_button': '#6c757d',
'editor_secondary_button_hover': '#545b62',
'editor_warning_bg': '#fff3cd',
'editor_warning_border': '#ffeaa7',
'editor_warning_text': '#856404'
}
},
'greyscale': {
@@ -93,10 +100,13 @@ LAYERED_THEMES = {
'editor_accept_hover': '#777777',
'editor_cancel_bg': '#999999',
'editor_cancel_hover': '#808080',
'editor_reset_bg': '#aaaaaa',
'editor_reset_hover': '#999999',
'editor_secondary_bg': '#bbbbbb',
'editor_secondary_hover': '#aaaaaa'
'editor_danger_button': '#8b0000',
'editor_danger_button_hover': '#700000',
'editor_secondary_button': '#666666',
'editor_secondary_button_hover': '#555555',
'editor_warning_bg': '#f0f0f0',
'editor_warning_border': '#cccccc',
'editor_warning_text': '#555555'
}
},
'electric': {
@@ -109,7 +119,14 @@ LAYERED_THEMES = {
'editor_button_active': '#0099ff',
'editor_text_color': '#00ffff',
'editor_focus_color': '#ffff00',
'editor_shadow': '0 0 20px rgba(0,255,255,0.5), 0 0 40px rgba(255,255,0,0.2)'
'editor_shadow': '0 0 20px rgba(0,255,255,0.5), 0 0 40px rgba(255,255,0,0.2)',
'editor_danger_button': '#ff3366',
'editor_danger_button_hover': '#ff0033',
'editor_secondary_button': '#006699',
'editor_secondary_button_hover': '#004d73',
'editor_warning_bg': '#003366',
'editor_warning_border': '#00ffff',
'editor_warning_text': '#ffff00'
}
},
'psychedelic': {
@@ -122,7 +139,14 @@ LAYERED_THEMES = {
'editor_button_active': 'rgba(255,20,147,0.5)',
'editor_text_color': '#ffffff',
'editor_focus_color': '#ff1493',
'editor_shadow': 'rgba(255,20,147,0.4)'
'editor_shadow': 'rgba(255,20,147,0.4)',
'editor_danger_button': 'linear-gradient(45deg, #ff0066, #cc0044)',
'editor_danger_button_hover': 'linear-gradient(45deg, #ff3388, #dd1155)',
'editor_secondary_button': 'linear-gradient(45deg, #8a2be2, #4b0082)',
'editor_secondary_button_hover': 'linear-gradient(45deg, #9932cc, #6a1a9a)',
'editor_warning_bg': 'linear-gradient(45deg, #ffa500, #ff8c00)',
'editor_warning_border': '#ff1493',
'editor_warning_text': '#ffffff'
}
},