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:
@@ -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'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user