Implement github issue rules

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.

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); } }