1  /* InterBrain Theme - CSS Snippet
  2   * Pitch black space aesthetic with vibrant accent colors
  3   *
  4   * Colors:
  5   * - Background: Pure black (#000000)
  6   * - Text: White (#ffffff)
  7   * - Interactive: Red (#FF644E) and Blue (#00A2FF)
  8   */
  9  
 10  .theme-dark {
 11    /* === BACKGROUNDS === */
 12    --background-primary: #000000;
 13    --background-primary-alt: #000000;
 14    --background-secondary: #000000;
 15    --background-secondary-alt: #000000;
 16    --background-modifier-border: rgba(255, 255, 255, 0.1);
 17    --background-modifier-form-field: rgba(255, 255, 255, 0.05);
 18    --background-modifier-form-field-highlighted: rgba(255, 255, 255, 0.1);
 19    --background-modifier-box-shadow: rgba(0, 0, 0, 0.5);
 20    --background-modifier-success: rgba(0, 162, 255, 0.2);
 21    --background-modifier-error: rgba(255, 100, 78, 0.2);
 22    --background-modifier-error-hover: rgba(255, 100, 78, 0.3);
 23  
 24    /* === TEXT COLORS === */
 25    --text-normal: #ffffff;
 26    --text-muted: rgba(255, 255, 255, 0.6);
 27    --text-faint: rgba(255, 255, 255, 0.3);
 28    --text-error: #FF644E;
 29    --text-success: #00A2FF;
 30    --text-selection: rgba(0, 162, 255, 0.3);
 31    --text-on-accent: #ffffff;
 32  
 33    /* === INTERACTIVE ELEMENTS === */
 34    --interactive-normal: rgba(255, 255, 255, 0.1);
 35    --interactive-hover: rgba(0, 162, 255, 0.2);
 36    --interactive-accent: #00A2FF;
 37    --interactive-accent-hover: #0088cc;
 38    --interactive-success: #00A2FF;
 39  
 40    /* === ACCENT COLORS === */
 41    --accent-color: #00A2FF;
 42    --accent-color-hover: #0088cc;
 43  
 44    /* === SCROLLBARS === */
 45    --scrollbar-bg: rgba(255, 255, 255, 0.05);
 46    --scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
 47    --scrollbar-active-thumb-bg: rgba(0, 162, 255, 0.5);
 48  
 49    /* === BUTTONS === */
 50    --button-primary-bg: #00A2FF;
 51    --button-primary-bg-hover: #0088cc;
 52    --button-secondary-bg: #FF644E;
 53    --button-secondary-bg-hover: #e5503c;
 54  
 55    /* === LINKS === */
 56    --link-color: #00A2FF;
 57    --link-color-hover: #0088cc;
 58    --link-external-color: #FF644E;
 59    --link-external-color-hover: #e5503c;
 60  
 61    /* === FILE EXPLORER === */
 62    --nav-item-background-hover: rgba(0, 162, 255, 0.1);
 63    --nav-item-background-active: rgba(0, 162, 255, 0.2);
 64    --nav-file-tag: rgba(255, 100, 78, 0.8);
 65  
 66    /* === TABS === */
 67    --tab-background-active: rgba(0, 162, 255, 0.15);
 68    --tab-text-color-active: #00A2FF;
 69    --tab-text-color: rgba(255, 255, 255, 0.6);
 70    --tab-text-color-focused: #ffffff;
 71  
 72    /* === TOGGLES & CHECKBOXES === */
 73    --checkbox-color: #00A2FF;
 74    --checkbox-color-hover: #0088cc;
 75    --toggle-thumb-color: #ffffff;
 76    --toggle-bg-active: #00A2FF;
 77    --toggle-bg-inactive: rgba(255, 255, 255, 0.2);
 78  
 79    /* === SLIDERS === */
 80    --slider-track-background: rgba(255, 255, 255, 0.1);
 81    --slider-thumb-bg: #00A2FF;
 82  
 83    /* === MODALS & PROMPTS === */
 84    --modal-background: #000000;
 85    --modal-border-color: rgba(0, 162, 255, 0.3);
 86    --prompt-border-color: rgba(0, 162, 255, 0.5);
 87  
 88    /* === CODE BLOCKS === */
 89    --code-background: rgba(255, 255, 255, 0.05);
 90    --code-normal: #ffffff;
 91    --code-comment: rgba(255, 255, 255, 0.4);
 92    --code-function: #00A2FF;
 93    --code-keyword: #FF644E;
 94    --code-string: rgba(255, 255, 255, 0.8);
 95  
 96    /* === GRAPH VIEW === */
 97    --graph-line: rgba(255, 255, 255, 0.1);
 98    --graph-node: #00A2FF;
 99    --graph-node-unresolved: #FF644E;
100    --graph-node-tag: rgba(255, 100, 78, 0.8);
101    --graph-node-attachment: rgba(0, 162, 255, 0.6);
102  
103    /* === TABLES === */
104    --table-header-background: rgba(0, 162, 255, 0.1);
105    --table-row-even-background: rgba(255, 255, 255, 0.02);
106    --table-row-odd-background: rgba(255, 255, 255, 0.04);
107    --table-border-color: rgba(255, 255, 255, 0.1);
108  }
109  
110  /* === ADDITIONAL CUSTOM STYLING === */
111  
112  /* Ribbon icons with accent color on hover */
113  .workspace-ribbon-collapse-btn:hover,
114  .side-dock-ribbon-action:hover {
115    color: #00A2FF !important;
116  }
117  
118  /* Settings tabs accent */
119  .vertical-tab-nav-item.is-active {
120    background-color: rgba(0, 162, 255, 0.2);
121    color: #00A2FF;
122  }
123  
124  /* Button styling */
125  button.mod-cta {
126    background-color: #00A2FF;
127    color: #ffffff;
128  }
129  
130  button.mod-cta:hover {
131    background-color: #0088cc;
132  }
133  
134  button.mod-warning {
135    background-color: #FF644E;
136    color: #ffffff;
137  }
138  
139  button.mod-warning:hover {
140    background-color: #e5503c;
141  }
142  
143  /* Active file in sidebar */
144  .nav-file-title.is-active {
145    background-color: rgba(0, 162, 255, 0.15);
146    color: #00A2FF;
147  }
148  
149  /* Tag pills */
150  .tag {
151    background-color: rgba(255, 100, 78, 0.2);
152    color: #FF644E;
153    border: 1px solid rgba(255, 100, 78, 0.3);
154  }
155  
156  .tag:hover {
157    background-color: rgba(255, 100, 78, 0.3);
158  }
159  
160  /* Workspace background - ensure pitch black */
161  .workspace {
162    background-color: #000000;
163  }
164  
165  .workspace-leaf-content {
166    background-color: #000000;
167  }
168  
169  /* Ensure DreamSpace stays black */
170  .dreamspace-container,
171  .dreamspace-canvas-container {
172    background-color: #000000 !important;
173  }
174  
175  /* === TAB STYLING - MINIMAL AND CLEAN === */
176  
177  /* Clean up tab bar background */
178  .workspace-tab-header-container {
179    background-color: #000000;
180    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
181  }
182  
183  /* Tab styling */
184  .workspace-tab-header {
185    background-color: #000000;
186    color: rgba(255, 255, 255, 0.6);
187    border: none;
188  }
189  
190  /* Active tab */
191  .workspace-tab-header.is-active {
192    background-color: #000000;
193    color: #00A2FF;
194    border-bottom: 2px solid #00A2FF;
195  }
196  
197  /* Tab close button - clean minimal style */
198  .workspace-tab-header-inner-close-button {
199    background-color: transparent;
200    color: rgba(255, 255, 255, 0.3);
201    border: none;
202    border-radius: 0;
203    opacity: 0;
204    transition: opacity 0.2s ease, color 0.2s ease;
205  }
206  
207  .workspace-tab-header:hover .workspace-tab-header-inner-close-button {
208    opacity: 1;
209    color: rgba(255, 255, 255, 0.6);
210  }
211  
212  .workspace-tab-header-inner-close-button:hover {
213    background-color: transparent;
214    color: #FF644E;
215  }
216  
217  /* Remove those little square backgrounds on tab elements */
218  .workspace-tab-header-inner-icon,
219  .workspace-tab-header-status-icon {
220    background-color: transparent !important;
221    border: none !important;
222  }
223  
224  /* Clean up any other tab decorations */
225  .mod-root .workspace-tab-header.is-active::before,
226  .mod-root .workspace-tab-header.is-active::after {
227    display: none;
228  }