diff --git a/webapp/FEATURE_SUGGESTIONS/Theme_Builder/CHANGES.md b/webapp/FEATURE_SUGGESTIONS/Theme_Builder/CHANGES.md new file mode 100644 index 000000000..775c609fd --- /dev/null +++ b/webapp/FEATURE_SUGGESTIONS/Theme_Builder/CHANGES.md @@ -0,0 +1,34 @@ +# Changes Log + +## 2025-12-09: Bookmarks Module Refactor + +### Summary +Refactored `bookmarks.css` to use the new global CSS variables system (`variables.css`). This change standardizes colors, shadows, and glassmorphism effects across themes and removes redundant theme-specific overrides within the bookmarks module. + +### Variable Replacements + +| Original Variable | New Global Variable | Notes | +|-------------------|---------------------|-------| +| `--bookmarks-panel-bg` | `--bg-panel` | | +| `--bookmarks-panel-shadow` | `--shadow-overlay` | Now uses dynamic shadow color | +| `--bookmarks-hover-bg` | `--glass-subtle` | Consistent hover effect | +| `--bookmarks-border-color` | `--glass-border` | | +| `--bookmarks-text-primary` | `--text-main` | | +| `--bookmarks-text-secondary`| `--text-secondary` | | +| `--bookmarks-notification-bg`| `--bg-card` | Consistent card background | +| `--bookmarks-notification-color`| `--text-main` | | +| `--bookmarks-success-color` | `--color-success` | | +| `--bookmarks-error-color` | `--color-error` | | +| `--bookmarks-warning-color` | `--color-warning` | | +| `--bookmarks-info-color` | `--color-info` | | + +### Deleted Code +- Removed local variable definitions in `:root` (lines 10-22). +- Removed all theme-specific overrides (`:root[data-theme="..."]`) spanning lines 24-73. +- Removed hardcoded colors in Toggle Button (replaced with `var(--glass-border)`). + +### Preserved Code +- Retained module-specific bookmark color definitions (`--bookmark-yellow`, etc.) in the top `:root` block, as these are specific to the bookmark functionality and not part of the global design system yet. + +### Files Created +- `bookmarks-refactored.css`: The complete, refactored CSS file. diff --git a/webapp/FEATURE_SUGGESTIONS/Theme_Builder/bookmarks-refactored.css b/webapp/FEATURE_SUGGESTIONS/Theme_Builder/bookmarks-refactored.css new file mode 100644 index 000000000..f9702a279 --- /dev/null +++ b/webapp/FEATURE_SUGGESTIONS/Theme_Builder/bookmarks-refactored.css @@ -0,0 +1,317 @@ +/* Styles for bookmarks system */ +:root { + --bookmark-yellow: #ffd700; + --bookmark-red: #ff6b6b; + --bookmark-green: #51cf66; + --bookmark-blue: #4dabf7; + --bookmark-purple: #9775fa; + --bookmark-orange: #ffa94d; + --bookmark-pink: #ff69b4; +} + +/* Line numbers base color */ +.highlighttable td.linenos, +.highlighttable td.linenos pre, +.highlighttable .linenos span, +.linenodiv, +.linenodiv pre, +.linenodiv pre > *, +.linenos, +.linenos span, +.linenos a { + color: #5C7FA3 !important; +} + +/* Neutralize opacity reductions so שהצבע ייראה מדויק */ +.highlighttable td.linenos, +.linenodiv { + opacity: 1 !important; +} + +/* כותרות/אלמנטים מסומנים בעוגן במצבי Markdown/HTML */ +#md-content h1.bookmarked, +#md-content h2.bookmarked, +#md-content h3.bookmarked, +#md-content h4.bookmarked, +#md-content h5.bookmarked, +#md-content h6.bookmarked, +iframe .bookmarked { + position: relative; + background: linear-gradient(90deg, var(--bookmark-yellow) 3px, transparent 3px); +} + +/* Indicators */ +.linenos span.bookmarked, +.linenodiv a.bookmarked, +.linenodiv span.bookmarked { + position: relative; + background: linear-gradient(90deg, var(--bookmark-yellow) 3px, transparent 3px); + color: #ff5a5a !important; /* ניראות גבוהה על רקע כהה */ + text-shadow: 0 0 2px rgba(0,0,0,0.6); + font-weight: bold; +} + +/* Explicit style if a line number element also has a generic 'line-number' class */ +.line-number.bookmarked { + color: #ff5a5a !important; + font-weight: bold; +} + +/* Color-aware indicators by bookmark color */ +.linenos span.bookmarked[data-bookmark-color="yellow"], +.linenodiv a.bookmarked[data-bookmark-color="yellow"], +.linenodiv span.bookmarked[data-bookmark-color="yellow"] { + background: linear-gradient(90deg, var(--bookmark-yellow) 3px, transparent 3px); + color: var(--bookmark-yellow) !important; +} +.linenos span.bookmarked[data-bookmark-color="red"], +.linenodiv a.bookmarked[data-bookmark-color="red"], +.linenodiv span.bookmarked[data-bookmark-color="red"] { + background: linear-gradient(90deg, var(--bookmark-red) 3px, transparent 3px); + color: var(--bookmark-red) !important; +} +.linenos span.bookmarked[data-bookmark-color="green"], +.linenodiv a.bookmarked[data-bookmark-color="green"], +.linenodiv span.bookmarked[data-bookmark-color="green"] { + background: linear-gradient(90deg, var(--bookmark-green) 3px, transparent 3px); + color: var(--bookmark-green) !important; +} +.linenos span.bookmarked[data-bookmark-color="blue"], +.linenodiv a.bookmarked[data-bookmark-color="blue"], +.linenodiv span.bookmarked[data-bookmark-color="blue"] { + background: linear-gradient(90deg, var(--bookmark-blue) 3px, transparent 3px); + color: var(--bookmark-blue) !important; +} +.linenos span.bookmarked[data-bookmark-color="purple"], +.linenodiv a.bookmarked[data-bookmark-color="purple"], +.linenodiv span.bookmarked[data-bookmark-color="purple"] { + background: linear-gradient(90deg, var(--bookmark-purple) 3px, transparent 3px); + color: var(--bookmark-purple) !important; +} +.linenos span.bookmarked[data-bookmark-color="orange"], +.linenodiv a.bookmarked[data-bookmark-color="orange"], +.linenodiv span.bookmarked[data-bookmark-color="orange"] { + background: linear-gradient(90deg, var(--bookmark-orange) 3px, transparent 3px); + color: var(--bookmark-orange) !important; +} +.linenos span.bookmarked[data-bookmark-color="pink"], +.linenodiv a.bookmarked[data-bookmark-color="pink"], +.linenodiv span.bookmarked[data-bookmark-color="pink"] { + background: linear-gradient(90deg, var(--bookmark-pink) 3px, transparent 3px); + color: var(--bookmark-pink) !important; +} + +.bookmark-icon { + position: absolute; + right: -20px; + font-size: 12px; + animation: fadeIn 0.3s ease; +} + +.linenos span.loading, +.linenodiv a.loading, +.linenodiv span.loading, +.highlighttable .linenos pre > span.loading { + opacity: 0.5; + cursor: wait; +} + +.linenos span:hover, +.linenodiv a:hover, +.linenodiv span:hover, +.highlighttable .linenos pre > span:hover { + cursor: pointer; + background-color: rgba(255, 215, 0, 0.1); + transition: background-color 0.2s ease; +} + +.line-highlighted { + background-color: rgba(255, 215, 0, 0.3) !important; + animation: pulse 2s ease; +} + +@keyframes pulse { + 0%, 100% { background-color: rgba(255, 215, 0, 0.3); } + 50% { background-color: rgba(255, 215, 0, 0.5); } +} + +/* Toggle Button */ +.bookmarks-toggle-btn { + position: fixed; + top: 1.5rem; /* החזרה למעלה */ + right: 20px; + z-index: 1000; + background: radial-gradient(ellipse at top left, #ffffff, #f5f5f5); + border: 1px solid var(--glass-border); + color: #333; + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); + backdrop-filter: blur(10px); + transition: all 0.3s ease; +} + +.bookmarks-toggle-btn:hover { + transform: scale(1.1); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} + +.bookmarks-toggle-btn:active { transform: scale(0.95); } + +/* מצב מוקטן: ננעל עד לחיצה רגילה */ +.bookmarks-toggle-btn.mini { + transform: scale(0.5) !important; + opacity: 0.5 !important; +} + +.bookmark-count { + position: absolute; + top: -5px; + right: -5px; + background: var(--color-error); + color: white; + border-radius: 50%; + width: 20px; + height: 20px; + font-size: 11px; + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + animation: fadeIn 0.3s ease; +} + +/* Panel */ +.bookmarks-panel { + position: fixed; + top: 0; + right: -400px; + width: 400px; + height: 100vh; + background: var(--bg-panel); + box-shadow: var(--shadow-overlay); + transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 999; + display: flex; + flex-direction: column; +} + +.bookmarks-panel.open { right: 0; } + +.bookmarks-panel-header { + padding: 20px; + border-bottom: 1px solid var(--glass-border); + background: linear-gradient(135deg, var(--primary, var(--bookmark-purple)), var(--secondary, var(--bookmark-orange))); + color: var(--text-main); +} + +.bookmarks-panel-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } +.bookmarks-panel-actions button { + padding: 5px 10px; + border: 1px solid var(--glass-border); + border-radius: 4px; + background: var(--glass-subtle, var(--bg-panel)); + color: var(--text-main); + cursor: pointer; + font-size: 12px; + transition: all 0.2s ease; +} +.bookmarks-panel-actions button:hover { background: var(--glass-subtle); transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } + +/* List */ +.bookmarks-list { flex: 1; overflow-y: auto; padding: 10px; } + +.bookmark-item { + background: var(--bg-panel); + border: 1px solid var(--glass-border); + border-radius: 8px; + padding: 12px; + margin-bottom: 10px; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + justify-content: space-between; + align-items: start; +} +.bookmark-item:hover { background: var(--glass-subtle); transform: translateX(-5px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } + +.bookmark-content { flex: 1; display: flex; flex-direction: column; gap: 5px; } +.bookmark-item .line-number { font-weight: bold; color: var(--bookmark-yellow); font-size: 12px; } +/* צבע דינמי ברשימת הפאנל לפי data-color */ +.bookmark-item[data-color="yellow"] .line-number { color: var(--bookmark-yellow); } +.bookmark-item[data-color="red"] .line-number { color: var(--bookmark-red); } +.bookmark-item[data-color="green"] .line-number { color: var(--bookmark-green); } +.bookmark-item[data-color="blue"] .line-number { color: var(--bookmark-blue); } +.bookmark-item[data-color="purple"] .line-number { color: var(--bookmark-purple); } +.bookmark-item[data-color="orange"] .line-number { color: var(--bookmark-orange); } +.bookmark-item[data-color="pink"] .line-number { color: var(--bookmark-pink); } + +/* טיפ עזרה בפוטר */ +.help-tip { + position: fixed; + bottom: 10px; + left: 20px; + right: 20px; + text-align: center; + font-size: 12px; + color: var(--text-secondary); + opacity: 0.8; + pointer-events: none; +} +.bookmark-item .line-preview { color: var(--text-main); font-family: 'Courier New', monospace; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.bookmark-item .bookmark-note { color: var(--text-secondary); font-size: 12px; font-style: italic; margin-top: 5px; padding: 5px; background: rgba(255,215,0,0.1); border-radius: 4px; } + +.bookmark-actions { display: flex; gap: 5px; opacity: 0; transition: opacity 0.2s ease; } +.bookmark-item:hover .bookmark-actions { opacity: 1; } +.bookmark-actions button { background: transparent; border: none; cursor: pointer; font-size: 16px; padding: 2px; transition: transform 0.2s ease; } +.bookmark-actions button:hover { transform: scale(1.2); } + +/* Empty state */ +.empty-state { text-align: center; padding: 40px 20px; color: var(--text-secondary); } +.empty-state p:first-child { font-size: 16px; font-weight: bold; margin-bottom: 10px; } +.empty-state p:last-child { font-size: 14px; } + +/* Notifications */ +.notification-container { position: fixed; bottom: 20px; left: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } +.notification { background: var(--bg-card); color: var(--text-main); border-radius: 8px; padding: 12px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; min-width: 250px; transform: translateX(400px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } +.notification.show { transform: translateX(0); } +.notification-icon { font-size: 18px; font-weight: bold; } +.notification-message { flex: 1; font-size: 14px; } +.notification-success { border-left: 4px solid var(--color-success); } +.notification-success .notification-icon { color: var(--color-success); } +.notification-error { border-left: 4px solid var(--color-error); } +.notification-error .notification-icon { color: var(--color-error); } +.notification-warning { border-left: 4px solid var(--color-warning); } +.notification-warning .notification-icon { color: var(--color-warning); } +.notification-info { border-left: 4px solid var(--color-info); } +.notification-info .notification-icon { color: var(--color-info); } + +/* Tooltip */ +.bookmark-tooltip { position: absolute; background: rgba(0,0,0,0.8); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; z-index: 10000; display: none; max-width: 300px; word-wrap: break-word; } + +/* Accessibility */ +.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } +.bookmarks-toggle-btn:focus, .bookmark-item:focus, .bookmark-actions button:focus { outline: 3px solid var(--bookmark-blue); outline-offset: 2px; } + +/* Mobile */ +@media (max-width: 768px) { + .bookmarks-panel { width: 100%; right: -100%; } + .bookmarks-toggle-btn { width: 45px; height: 45px; top: 12px; bottom: auto; } + .bookmarks-panel-actions { gap: 8px; } + .bookmarks-panel-actions button { flex: 0 0 auto; } + .notification-container { left: 10px; right: 10px; bottom: 10px; } + .notification { min-width: auto; width: 100%; } +} + +@media (max-width: 480px) { + .bookmarks-panel-header h2 { font-size: 18px; } + .bookmark-item { padding: 10px; } + .bookmark-item .line-preview { font-size: 12px; } +} + +@keyframes fadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } diff --git a/webapp/FEATURE_SUGGESTIONS/Theme_Builder/css-audit-report-filtered.md b/webapp/FEATURE_SUGGESTIONS/Theme_Builder/css-audit-report-filtered.md new file mode 100644 index 000000000..da12a0071 --- /dev/null +++ b/webapp/FEATURE_SUGGESTIONS/Theme_Builder/css-audit-report-filtered.md @@ -0,0 +1,363 @@ +# CSS Audit Report (Filtered) + +## Summary +- CSS/Template files scanned: 34 +- Total hard-coded colors (recurring): 1158 + +--- + +## Colors by Frequency (Top 20 Only) + +### #ffffff - 131 occurrences +**Category:** `--text-main / --text-on-dark` +**Key locations:** +- `webapp/static/css/community_library.css:6` - `.btn.primary{background:#2b6cb0;color:#fff}` +- `webapp/static/css/community_library.css:14` - `:root[data-theme="rose-pine-dawn"] .community-cont...` +- `webapp/static/css/community_library.css:45` - `background:color-mix(in srgb,var(--bg-secondary) 7...` +- `webapp/static/css/community_library.css:51` - `background:color-mix(in srgb,#ffffff 65%,var(--bg-...` +- `webapp/static/css/community_library.css:56` - `background:color-mix(in srgb,#ffffff 80%,var(--bg-...` + +--- + +### rgba(255,255,255,0.08) - 32 occurrences +**Key locations:** +- `webapp/static/css/community_library.css:21` - `.card{background:rgba(255,255,255,0.08);border-rad...` +- `webapp/static/css/global_search.css:382` - `background: rgba(255,255,255,0.08);` +- `webapp/static/css/codemirror-custom.css:18` - `.btn-editor-clip { padding:.35rem .75rem; border-r...` +- `webapp/templates/dashboard.html:337` - `border: 1px solid rgba(255,255,255,0.08);` +- `webapp/templates/dashboard.html:427` - `border-right: 3px solid rgba(255,255,255,0.08);` + +--- + +### rgba(255,255,255,0.05) - 25 occurrences +**Key locations:** +- `webapp/static/css/codemirror-custom.css:10` - `.editor-switcher { display:flex; flex-direction:co...` +- `webapp/templates/dashboard.html:334` - `background: rgba(255,255,255,0.05);` +- `webapp/templates/dashboard.html:535` - `background: rgba(255,255,255,0.05);` +- `webapp/templates/dashboard.html:594` - `background: rgba(255,255,255,0.05);` +- `webapp/templates/admin_snippets_translate.html:61` - `
` | |
+| `docs/_static/sticky-notes-badge.svg:5` | `` | |
+| `docs/_static/sticky-notes-popup.svg:8` | `` | |
+| `docs/_static/sticky-notes-popup.svg:29` | `` | |
+| ... | ... | ועוד 29 מופעים |
+
+---
+
+### rgba(255, 255, 255, 0.1) - 33 מופעים
+**קטגוריה מוצעת:** `--glass-bg`
+| מיקום | שימוש | הערות |
+|-------|-------|-------|
+| `...TIONS/Archive/BOOKMARKS_IMPLEMENTATION_GUIDE.md:213` | `border-left: 1px solid rgba(255, 255, 255, 0.1);` | |
+| `...TIONS/Archive/BOOKMARKS_IMPLEMENTATION_GUIDE.md:227` | `border-bottom: 1px solid rgba(255, 255, 255, 0.1);` | |
+| `...TIONS/Archive/BOOKMARKS_IMPLEMENTATION_GUIDE.md:257` | `background: rgba(255, 255, 255, 0.1);` | |
+| `...TIONS/Archive/BOOKMARKS_IMPLEMENTATION_GUIDE.md:298` | `background: rgba(255, 255, 255, 0.1);` | |
+| `...TIONS/Archive/BOOKMARKS_IMPLEMENTATION_GUIDE.md:375` | `background: rgba(255, 255, 255, 0.1);` | |
+| ... | ... | ועוד 28 מופעים |
+
+---
+
+### rgba(255,255,255,0.2) - 33 מופעים
+| מיקום | שימוש | הערות |
+|-------|-------|-------|
+| `...SUGGESTIONS/CODEMIRROR_EDITOR_IMPLEMENTATION.md:802` | `border: 1px solid rgba(255,255,255,0.2);` | |
+| `...SUGGESTIONS/CODEMIRROR_EDITOR_IMPLEMENTATION.md:866` | `style="width: 100%; padding: .75rem; border-radius: 10px;...` | |
+| `...SUGGESTIONS/CODEMIRROR_EDITOR_IMPLEMENTATION.md:871` | `style="width: 100%; padding: .75rem; border-radius: 10px;...` | |
+| `...SUGGESTIONS/CODEMIRROR_EDITOR_IMPLEMENTATION.md:882` | `style="width: 100%; padding: .75rem; border-radius: 10px;...` | |
+| `...SUGGESTIONS/CODEMIRROR_EDITOR_IMPLEMENTATION.md:888` | `style="width: 100%; padding: .75rem; border-radius: 10px;...` | |
+| ... | ... | ועוד 28 מופעים |
+
+---
+
+### #999999 - 33 מופעים
+| מיקום | שימוש | הערות |
+|-------|-------|-------|
+| `.../FEATURE_SUGGESTIONS/QUICK_ACCESS_MENU_GUIDE.md:570` | `color: #999;` | |
+| `webapp/static/css/global_search.css:647` | `background:color-mix(in srgb, var(--text-muted, #999) 15%...` | |
+| `webapp/static/css/global_search.css:648` | `color:var(--text-muted, #999);` | |
+| `webapp/static/css/global_search.css:649` | `border:1px solid color-mix(in srgb, var(--text-muted, #99...` | |
+| `webapp/templates/md_preview.html:1429` | `` | |
+| `docs/_static/sticky-notes-badge.svg:6` | `` | |
+| `docs/_static/sticky-notes-popup.svg:9` | `` | |
+| `...TURE_SUGGESTIONS/ENHANCED_FLOATING_TOC_GUIDE.md:102` | `--toc-header-gradient: linear-gradient(135deg, #667eea 0%...` | |
+| ... | ... | ועוד 13 מופעים |
+
+---
+
+### #00ffff - 18 מופעים
+| מיקום | שימוש | הערות |
+|-------|-------|-------|
+| `...pp/FEATURE_SUGGESTIONS/webapp_theme_palettes.md:16` | `\| High Contrast \| `#000000` (גם secondary) \| גוף `#ffffff...` | |
+| `...pp/FEATURE_SUGGESTIONS/webapp_theme_palettes.md:89` | `- comment `#00ffff`` | |
+| `...IONS/HIGH_CONTRAST_MODE_IMPLEMENTATION_GUIDE.md:54` | `--info-color: #00ffff;` | |
+| `...IONS/HIGH_CONTRAST_MODE_IMPLEMENTATION_GUIDE.md:143` | `color: #00ffff !important;` | |
+| `...IONS/HIGH_CONTRAST_MODE_IMPLEMENTATION_GUIDE.md:190` | `color: #00ffff;` | |
+| ... | ... | ועוד 13 מופעים |
+
+---
+
+### #f6f8fa - 17 מופעים
+| מיקום | שימוש | הערות |
+|-------|-------|-------|
+| `docs/_static/custom.css:48` | `background: #f6f8fa;` | |
+| `docs/_static/custom.css:81` | `background: #f6f8fa;` | |
+| `docs/_static/custom.css:126` | `background: #f6f8fa;` | |
+| `..._SUGGESTIONS/MARKDOWN_ACCESSIBILITY_EXAMPLES.md:22` | `--code-bg: #f6f8fa;` | |
+| `..._SUGGESTIONS/MARKDOWN_ACCESSIBILITY_EXAMPLES.md:136` | `background: #f6f8fa;` | |
+| ... | ... | ועוד 12 מופעים |
+
+---
+
+### #f5f5f5 - 17 מופעים
+| מיקום | שימוש | הערות |
+|-------|-------|-------|
+| `webapp/static/css/bookmarks.css:70` | `--bookmarks-text-secondary: #f5f5f5;` | |
+| `webapp/static/css/bookmarks.css:207` | `background: radial-gradient(ellipse at top left, #ffffff,...` | |
+| `...p/FEATURE_SUGGESTIONS/ADVANCED_CACHING_GUIDE.md:1286` | `background: #f5f5f5;` | |
+| `webapp/static/css/split-view.css:185` | `color: #f5f5f5;` | |
+| `...IONS/HIGH_CONTRAST_MODE_IMPLEMENTATION_GUIDE.md:25` | `--bg-secondary: #f5f5f5;` | |
+| ... | ... | ועוד 12 מופעים |
+
+---
+
+### rgba(0,0,0,0.2) - 17 מופעים
+| מיקום | שימוש | הערות |
+|-------|-------|-------|
+| `webapp/static/js/bookmarks.js:1299` | `