/ styles.css
styles.css
1 /* DreamSpace - Edge-to-edge black space styling */ 2 3 .dreamspace-container { 4 width: 100%; 5 height: 100%; 6 margin: 0; 7 padding: 0; 8 overflow: hidden; 9 background: #000000; 10 position: relative; 11 } 12 13 .dreamspace-canvas-container { 14 width: 100%; 15 height: 100%; 16 margin: 0; 17 padding: 0; 18 background: #000000; 19 position: absolute; 20 top: 0; 21 left: 0; 22 right: 0; 23 bottom: 0; 24 } 25 26 /* Ensure the view container fills the workspace */ 27 .workspace-leaf-content[data-type="dreamspace-view"] { 28 padding: 0 !important; 29 margin: 0 !important; 30 } 31 32 .workspace-leaf-content[data-type="dreamspace-view"] .view-content { 33 padding: 0 !important; 34 margin: 0 !important; 35 height: 100%; 36 background: #000000; 37 } 38 39 /* Remove any default Obsidian styling that might interfere */ 40 .workspace-leaf-content[data-type="dreamspace-view"] .view-header { 41 background: #000000; 42 border-bottom: none; 43 } 44 45 /* Contact field placeholder styling for edit mode */ 46 .contact-field-email::placeholder, 47 .contact-field-phone::placeholder { 48 color: rgba(255, 255, 255, 0.5) !important; 49 opacity: 1 !important; 50 } 51 52 /* Coherence Beacon Modal */ 53 .coherence-beacon-modal { 54 padding: 20px; 55 } 56 57 .coherence-beacon-modal h2 { 58 margin-bottom: 15px; 59 text-align: center; 60 } 61 62 .beacon-description { 63 margin-bottom: 20px; 64 } 65 66 .beacon-info { 67 background: var(--background-secondary); 68 padding: 15px; 69 border-radius: 5px; 70 margin: 10px 0; 71 } 72 73 .beacon-title { 74 font-size: 1.2em; 75 font-weight: bold; 76 margin-bottom: 5px; 77 } 78 79 .beacon-radicle-id { 80 font-family: monospace; 81 font-size: 0.9em; 82 color: var(--text-muted); 83 } 84 85 .beacon-question { 86 font-weight: bold; 87 margin: 15px 0; 88 } 89 90 .beacon-explanation { 91 font-size: 0.9em; 92 color: var(--text-muted); 93 margin-top: 15px; 94 } 95 96 .beacon-explanation .explanation-header { 97 font-weight: bold; 98 margin-top: 10px; 99 margin-bottom: 5px; 100 } 101 102 .beacon-explanation ul { 103 margin-left: 20px; 104 margin-bottom: 10px; 105 } 106 107 .beacon-buttons { 108 display: flex; 109 gap: 10px; 110 justify-content: flex-end; 111 margin-top: 20px; 112 } 113 114 /* ============================================================ 115 * InterBrain Settings Panel Styling 116 * Beautiful system status dashboard matching install script aesthetic 117 * ============================================================ */ 118 119 .interbrain-settings { 120 max-width: 900px; 121 margin: 0 auto; 122 padding: 20px; 123 } 124 125 /* Header with Logo */ 126 .interbrain-settings-header { 127 text-align: center; 128 margin-bottom: 40px; 129 padding: 30px 20px; 130 background: rgba(0, 162, 255, 0.05); 131 border-radius: 12px; 132 border: 1px solid rgba(0, 162, 255, 0.2); 133 } 134 135 .interbrain-logo { 136 border-radius: 12px; 137 box-shadow: 0 4px 12px rgba(0, 162, 255, 0.3); 138 } 139 140 .interbrain-settings-title { 141 font-size: 2em; 142 margin: 16px 0 8px; 143 color: var(--text-normal); 144 } 145 146 .interbrain-settings-subtitle { 147 font-size: 1.1em; 148 color: var(--text-muted); 149 margin: 0; 150 } 151 152 /* Status Overview Grid */ 153 .interbrain-status-grid { 154 display: grid; 155 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 156 gap: 16px; 157 margin: 20px 0 40px; 158 padding: 20px; 159 background: rgba(255, 255, 255, 0.02); 160 border-radius: 8px; 161 } 162 163 .status-item { 164 display: flex; 165 justify-content: space-between; 166 align-items: center; 167 padding: 12px 16px; 168 background: rgba(255, 255, 255, 0.03); 169 border-radius: 6px; 170 border: 1px solid rgba(255, 255, 255, 0.1); 171 transition: all 0.2s ease; 172 } 173 174 .status-item:hover { 175 background: rgba(255, 255, 255, 0.05); 176 border-color: rgba(0, 162, 255, 0.3); 177 } 178 179 .status-label { 180 font-weight: 600; 181 font-size: 0.95em; 182 } 183 184 .status-message { 185 font-size: 0.9em; 186 color: var(--text-muted); 187 text-align: right; 188 } 189 190 /* Status Colors */ 191 .status-ready { 192 color: #00FF00; 193 } 194 195 .status-warning { 196 color: #FFB800; 197 } 198 199 .status-error, 200 .status-not-installed { 201 color: #FF644E; 202 } 203 204 .status-unknown { 205 color: var(--text-muted); 206 } 207 208 /* Feature Status Display */ 209 .interbrain-status-display { 210 margin: 16px 0; 211 padding: 16px; 212 background: rgba(255, 255, 255, 0.03); 213 border-radius: 8px; 214 border-left: 3px solid rgba(0, 162, 255, 0.5); 215 } 216 217 .interbrain-status-text { 218 font-size: 1em; 219 margin: 0 0 8px 0; 220 font-weight: 500; 221 } 222 223 .interbrain-status-details { 224 font-size: 0.9em; 225 color: var(--text-muted); 226 margin: 0; 227 font-style: italic; 228 } 229 230 /* Installation Instructions */ 231 .interbrain-install-instructions { 232 margin: 20px 0; 233 padding: 16px; 234 background: rgba(255, 100, 78, 0.08); 235 border-radius: 8px; 236 border: 1px solid rgba(255, 100, 78, 0.2); 237 } 238 239 .interbrain-install-instructions p { 240 margin: 8px 0; 241 font-size: 0.95em; 242 } 243 244 .interbrain-install-instructions ol { 245 margin: 12px 0; 246 padding-left: 24px; 247 } 248 249 .interbrain-install-instructions li { 250 margin: 8px 0; 251 line-height: 1.6; 252 } 253 254 .interbrain-install-instructions a { 255 color: #00A2FF; 256 text-decoration: none; 257 font-weight: 500; 258 } 259 260 .interbrain-install-instructions a:hover { 261 text-decoration: underline; 262 } 263 264 /* Radicle Identity Display */ 265 .interbrain-radicle-identity { 266 margin: 20px 0; 267 padding: 16px; 268 background: rgba(0, 162, 255, 0.05); 269 border-radius: 8px; 270 border: 1px solid rgba(0, 162, 255, 0.2); 271 } 272 273 .interbrain-radicle-identity p { 274 margin: 8px 0; 275 } 276 277 .interbrain-radicle-identity code { 278 background: rgba(0, 0, 0, 0.3); 279 padding: 4px 8px; 280 border-radius: 4px; 281 font-size: 0.9em; 282 color: #00A2FF; 283 word-break: break-all; 284 } 285 286 /* Hotkey List */ 287 .interbrain-hotkey-list { 288 margin: 20px 0; 289 padding: 16px; 290 background: rgba(255, 255, 255, 0.02); 291 border-radius: 8px; 292 } 293 294 .interbrain-hotkey-list h4 { 295 margin: 0 0 12px 0; 296 font-size: 1.1em; 297 color: var(--text-normal); 298 } 299 300 .interbrain-hotkey-list ul { 301 list-style: none; 302 padding: 0; 303 margin: 0; 304 } 305 306 .interbrain-hotkey-list li { 307 margin: 8px 0; 308 padding: 8px 12px; 309 background: rgba(255, 255, 255, 0.03); 310 border-radius: 4px; 311 font-size: 0.95em; 312 } 313 314 .interbrain-hotkey-list code { 315 background: rgba(0, 162, 255, 0.15); 316 padding: 4px 8px; 317 border-radius: 4px; 318 font-weight: 600; 319 color: #00A2FF; 320 margin-right: 8px; 321 } 322 323 /* Section Headers */ 324 .interbrain-settings h2 { 325 margin: 40px 0 20px; 326 padding-bottom: 12px; 327 border-bottom: 2px solid rgba(0, 162, 255, 0.3); 328 color: var(--text-normal); 329 font-size: 1.5em; 330 } 331 332 .interbrain-settings h2:first-of-type { 333 margin-top: 20px; 334 } 335 336 /* Setting Items */ 337 .interbrain-settings .setting-item { 338 padding: 16px 0; 339 border-bottom: 1px solid rgba(255, 255, 255, 0.05); 340 } 341 342 .interbrain-settings .setting-item:last-child { 343 border-bottom: none; 344 } 345 346 /* Links */ 347 .interbrain-settings a { 348 color: #00A2FF; 349 text-decoration: none; 350 transition: color 0.2s ease; 351 } 352 353 .interbrain-settings a:hover { 354 color: #0088cc; 355 text-decoration: underline; 356 } 357 358 /* Button Styling */ 359 .interbrain-settings button { 360 transition: all 0.2s ease; 361 } 362 363 .interbrain-settings button:hover { 364 transform: translateY(-1px); 365 box-shadow: 0 2px 8px rgba(0, 162, 255, 0.3); 366 } 367 368 /* Responsive Design */ 369 @media (max-width: 768px) { 370 .interbrain-status-grid { 371 grid-template-columns: 1fr; 372 } 373 374 .status-item { 375 flex-direction: column; 376 align-items: flex-start; 377 gap: 8px; 378 } 379 380 .status-message { 381 text-align: left; 382 } 383 }.dreamsong-module__dreamSongContainer___tg13a{width:100%;max-width:2600px;margin:0 auto;min-height:100vh;overflow-y:auto;position:relative;background:#000;color:#fff;font-family:TeX Gyre Termes,Georgia,serif;display:flex;flex-direction:column;padding:20px;box-sizing:border-box}.dreamsong-module__dreamSongContainer___tg13a.dreamsong-module__embedded___luwrQ{height:auto!important;min-height:100%;background:transparent;overflow:visible;backface-visibility:hidden}.dreamsong-module__dreamSongContainer___tg13a.dreamsong-module__embedded___luwrQ .dreamsong-module__dreamSongContent___l8OBo{padding:8px}.dreamsong-module__dreamSongContainer___tg13a.dreamsong-module__embedded___luwrQ .dreamsong-module__dreamSongHeader___gUU9x{padding:8px 12px;font-size:12px}.dreamsong-module__dreamSongHeader___gUU9x{text-align:center;margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;position:relative}.dreamsong-module__dreamSongTitle___tro0g{font-size:4rem;font-weight:600;color:#fff;margin-bottom:2rem;text-align:center}.dreamsong-module__dreamSongSeparator___Tx0h-{width:90%;height:auto;display:block;max-width:2600px;margin:0 auto}.dreamsong-module__viewOnWebButton___nWV0s{position:absolute;top:20px;right:40px;cursor:pointer;transition:all .2s ease;z-index:10;color:#fff9;display:block}.dreamsong-module__viewOnWebButton___nWV0s:hover{transform:scale(1.1);color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}.dreamsong-module__viewOnWebButton___nWV0s:active{transform:scale(1.05)}.dreamsong-module__dreamTalkSection___FL-w6{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;padding:1rem;max-width:800px;margin-left:auto;margin-right:auto}.dreamsong-module__dreamTalkSection___FL-w6 img,.dreamsong-module__dreamTalkSection___FL-w6 video,.dreamsong-module__dreamTalkSection___FL-w6 audio{box-shadow:0 4px 12px #0000004d;transition:transform .2s ease}.dreamsong-module__dreamTalkSection___FL-w6 img:hover,.dreamsong-module__dreamTalkSection___FL-w6 video:hover{transform:scale(1.02)}@media (max-width: 1200px){.dreamsong-module__dreamTalkSection___FL-w6{padding:.5rem;margin-bottom:1rem;max-width:90%}}.dreamsong-module__dreamSongContent___l8OBo{flex:1;overflow-y:auto;scroll-behavior:smooth}.dreamsong-module__dreamSongContent___l8OBo::-webkit-scrollbar{width:4px}.dreamsong-module__dreamSongContent___l8OBo::-webkit-scrollbar-track{background:#ffffff1a;border-radius:2px}.dreamsong-module__dreamSongContent___l8OBo::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:2px}.dreamsong-module__dreamSongContent___l8OBo::-webkit-scrollbar-thumb:hover{background:#ffffff80}.dreamsong-module__dreamSongEmptyState___lPijW{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:32px 16px}.dreamsong-module__emptyStateIcon___AEvGP{font-size:48px;margin-bottom:16px;opacity:.6}.dreamsong-module__emptyStateText___43hWJ{font-size:16px;font-weight:500;color:#fff;margin-bottom:8px}.dreamsong-module__emptyStateSubtitle___dVM-d{font-size:12px;color:#fff9;line-height:1.4}.dreamsong-module__dreamSongBlock___PDZlT{margin-bottom:75px;position:relative;animation:dreamsong-module__fade-in___Q6-NP .4s ease-out;display:flex;justify-content:center;align-items:center;max-width:95%;margin-left:auto;margin-right:auto}.dreamsong-module__dreamSongBlock___PDZlT:last-child{margin-bottom:0}@keyframes dreamsong-module__fade-in___Q6-NP{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.dreamsong-module__dreamSongBlockText___FhS6T{flex-direction:column}.dreamsong-module__dreamSongBlockText___FhS6T .dreamsong-module__dreamSongTextOnly___IPnlV{max-width:90%;margin:0 auto;text-align:left}.dreamsong-module__dreamSongBlockMedia___ez30l{flex-direction:column}.dreamsong-module__dreamSongBlockMedia___ez30l .dreamsong-module__dreamSongMediaOnly___H8rWg{max-width:1000px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000004d}.dreamsong-module__dreamSongBlockMediaText___8doa5{flex-direction:row}.dreamsong-module__dreamSongBlockMediaText___8doa5 .dreamsong-module__dreamSongMediaText___zdts2{display:flex;justify-content:center;align-items:flex-start;width:100%;max-width:95%;margin:0 auto;gap:20px}.dreamsong-module__dreamSongBlockLeftAligned___KNuso .dreamsong-module__dreamSongMediaText___zdts2{flex-direction:row}.dreamsong-module__dreamSongBlockRightAligned___WUgHh .dreamsong-module__dreamSongMediaText___zdts2{flex-direction:row-reverse}.dreamsong-module__dreamSongMediaContainer___S95Qd{flex:2;max-width:60%;margin:0}.dreamsong-module__dreamSongTextContainer___uL3hl{flex:1;max-width:30%;padding:10px;text-align:left;margin:0;display:flex;align-items:center}.dreamsong-module__dreamSongMedia___H7Daq{width:100%;height:auto;border-radius:8px;box-shadow:0 2px 8px #0003;transition:transform .2s ease}.dreamsong-module__dreamSongMedia___H7Daq:hover{transform:scale(1.02)}.dreamsong-module__dreamSongMedia___H7Daq[data-type=video]{max-height:200px}.dreamsong-module__dreamSongMedia___H7Daq[data-type=audio]{width:100%}.dreamsong-module__dreamSongAudioContainer___FVeEq{background:#ffffff0d;padding:12px;border-radius:8px}.dreamsong-module__dreamSongAudioLabel___mMGlO{font-size:12px;color:#fffc;margin-bottom:8px;font-weight:500}.dreamsong-module__dreamSongText___RG4sj{line-height:1.5;font-size:30px!important;color:#fff}.dreamsong-module__dreamSongText___RG4sj p{margin:0 0 12px}.dreamsong-module__dreamSongText___RG4sj p:last-child{margin-bottom:0}.dreamsong-module__dreamSongText___RG4sj h1,.dreamsong-module__dreamSongText___RG4sj h2,.dreamsong-module__dreamSongText___RG4sj h3,.dreamsong-module__dreamSongText___RG4sj h4,.dreamsong-module__dreamSongText___RG4sj h5,.dreamsong-module__dreamSongText___RG4sj h6{color:#fff;margin:0 0 8px;font-weight:600}.dreamsong-module__dreamSongText___RG4sj strong{color:#fff;font-weight:600}.dreamsong-module__dreamSongText___RG4sj em{color:#fffc;font-style:italic}.dreamsong-module__dreamSongText___RG4sj code{background:#ffffff1a;padding:2px 6px;border-radius:4px;font-family:Monaco,Menlo,monospace;font-size:12px}.dreamsong-module__dreamSongText___RG4sj blockquote{border-left:3px solid rgba(255,255,255,.3);padding-left:12px;margin:0;color:#ffffffb3;font-style:italic}.dreamsong-module__dreamSongText___RG4sj ul,.dreamsong-module__dreamSongText___RG4sj ol{margin:0 0 12px;padding-left:20px}.dreamsong-module__dreamSongText___RG4sj li{margin-bottom:4px}.dreamsong-module__dreamSongMediaError___bohnS{padding:16px;background:#ff00001a;border:1px solid rgba(255,0,0,.3);border-radius:8px;color:#ff6464;font-size:12px;text-align:center}@media (max-width: 1200px){.dreamsong-module__dreamSongBlockMediaText___8doa5 .dreamsong-module__dreamSongMediaText___zdts2{flex-direction:column!important;margin-bottom:0}.dreamsong-module__dreamSongMediaContainer___S95Qd{flex:1;max-width:90%;margin:0;order:1}.dreamsong-module__dreamSongTextContainer___uL3hl{flex:1;max-width:90%;margin:0;order:2}.dreamsong-module__dreamSongTitle___tro0g{font-size:2rem}.dreamsong-module__dreamSongText___RG4sj{font-size:20px}.dreamsong-module__dreamsong-container___zYJEM{padding:10px}}.dreamsong-module__dreamSongContainer___tg13a.dreamsong-module__flipEnter___2q0ck{animation:dreamsong-module__flipIn___qILx- .6s ease-out}@keyframes dreamsong-module__flipIn___qILx-{0%{transform:rotateY(-90deg);opacity:0}to{transform:rotateY(0);opacity:1}}@keyframes dreamnode-pulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.3)}}@keyframes dreamnode-pulse-webkit{0%,to{-webkit-filter:brightness(1) drop-shadow(0 0 10px currentColor)}50%{-webkit-filter:brightness(1.2) drop-shadow(0 0 20px currentColor)}}