1// ER Diagram Designer styles 2export function ensureERDiagramStyles() { 3 const ID = "erdiagram-styles"; 4 if (document.getElementById(ID)) return; 5 const css = ` 6 /* ââ Layout ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 7 .layout-erd { 8 display: flex; flex-direction: column; width: 100%; height: 100%; 9 min-width: 0; min-height: 0; 10 --erd-toolbar-rail-width: 132px; 11 --erd-toolbar-rail-bg: #0b1220; 12 --erd-toolbar-rail-border: #334155; 13 } 14 .toolbar-host-erd { 15 position: relative; 16 flex: 0 0 var(--erd-toolbar-rail-width); 17 overflow: visible; 18 z-index: 4000; 19 pointer-events: auto; 20 background: var(--erd-toolbar-rail-bg); 21 border-right: 1px solid var(--erd-toolbar-rail-border); 22 } 23 /* Field library panel â opens beside the left toolbar rail */ 24 .toolbar-host-erd .field-library-erd { 25 top: 8px; 26 left: calc(100% + 8px); 27 max-height: calc(100% - 16px); 28 } 29 /* body-area-erd = flex row: toolbar rail (left) + canvas-area-erd (right) */ 30 .body-area-erd { 31 display: flex; flex-direction: row; 32 flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; 33 } 34 .toolbar-host-erd .toolbar-ab { 35 height: 100%; 36 display: flex; 37 flex-direction: column; 38 align-items: stretch; 39 gap: 6px; 40 padding: 8px 6px; 41 border-bottom: none; 42 overflow-y: auto; 43 overflow-x: hidden; 44 } 45 .toolbar-host-erd .toolbar-title-ab, 46 .toolbar-host-erd .toolbar-section-label-ab, 47 .toolbar-host-erd .btn-label-ab { 48 display: none; 49 } 50 .toolbar-host-erd .toolbar-section-ab { 51 width: 100%; 52 border-left: none; 53 border-top: 1px solid #334155; 54 padding: 6px 0 0; 55 gap: 0; 56 } 57 .toolbar-host-erd .toolbar-section-ab:first-of-type { 58 border-top: none; 59 padding-top: 0; 60 } 61 .toolbar-host-erd .toolbar-section-row-ab { 62 width: 100%; 63 display: grid; 64 grid-template-columns: repeat(2, minmax(0, 1fr)); 65 gap: 4px; 66 } 67 .toolbar-host-erd .btn-ab { 68 width: 100%; 69 min-width: 0; 70 display: flex; 71 flex-direction: column; 72 justify-content: center; 73 gap: 3px; 74 padding: 6px 4px; 75 pointer-events: auto; 76 } 77 .toolbar-host-erd .toolbar-section-row-ab .btn-ab .btn-label-ab { 78 display: block; 79 white-space: normal; 80 text-align: center; 81 line-height: 1.15; 82 } 83 .canvas-area-erd { 84 position: relative; 85 flex: 1 1 auto; 86 min-width: 0; 87 min-height: 0; 88 overflow: hidden; 89 } 90 .erdiagram-sidebar { 91 width: 320px; 92 display: flex; 93 flex-direction: column; 94 min-width: 280px; 95 flex-shrink: 0; 96 border-left: 1px solid #334155; 97 background: #0b1220; 98 color: #e5e7eb; 99 overflow: hidden; 100 transition: width .18s ease, min-width .18s ease; 101 } 102 /* Collapsed state: pane slides out to reclaim canvas width. overflow:hidden 103 clips the content during the transition; the floating toggle re-opens it. */ 104 .erdiagram-sidebar.erd-collapsed { 105 width: 0; 106 min-width: 0; 107 border-left: none; 108 } 109 /* Floating hide/show handle, pinned to the left edge of the provisioning pane. */ 110 .erdiagram-sidebar-toggle { 111 position: absolute; 112 top: 10px; 113 right: 320px; 114 z-index: 4050; 115 width: 24px; 116 height: 46px; 117 display: flex; 118 align-items: center; 119 justify-content: center; 120 border: 1px solid #334155; 121 border-right: none; 122 border-radius: 8px 0 0 8px; 123 background: #111827; 124 color: #cbd5e1; 125 font: 700 14px system-ui, sans-serif; 126 cursor: pointer; 127 padding: 0; 128 box-shadow: -2px 0 6px rgba(0,0,0,.25); 129 transition: right .18s ease, background .12s ease, color .12s ease; 130 } 131 .erdiagram-sidebar-toggle:hover { background: #1e293b; color: #e5e7eb; } 132 .erdiagram-sidebar-toggle.collapsed { 133 right: 0; 134 border-right: 1px solid #334155; 135 } 136 .erdiagram-toolbar { 137 display: flex; 138 flex-direction: column; 139 align-items: stretch; 140 gap: 0.75rem; 141 padding: 0.75rem; 142 background: #111827; 143 border-bottom: 1px solid #334155; 144 } 145 .erdiagram-sidebar .toolbar-ab { 146 flex-shrink: 0; 147 } 148 .erdiagram-sidebar .toolbar-section-ab { 149 gap: 0.5rem; 150 padding: 0.75rem; 151 border: 1px solid #374151; 152 border-radius: 10px; 153 background: #111827; 154 } 155 .erdiagram-sidebar .toolbar-section-label-ab { 156 padding-left: 0; 157 color: #94a3b8; 158 } 159 .erdiagram-sidebar .toolbar-section-row-ab { 160 flex-direction: column; 161 align-items: stretch; 162 gap: 0.75rem; 163 } 164 .erdiagram-selector { 165 display: flex; 166 flex-direction: column; 167 gap: 0.375rem; 168 min-width: 0; 169 width: 100%; 170 } 171 .erdiagram-selector-label { 172 color: #94a3b8; 173 font: 700 10px system-ui, sans-serif; 174 letter-spacing: 0.05em; 175 text-transform: uppercase; 176 } 177 .erdiagram-selector-input { 178 width: 100%; 179 min-width: 0; 180 height: 34px; 181 border: 1px solid #475569; 182 border-radius: 6px; 183 padding: 0 0.75rem; 184 background: #0b1220; 185 color: #e5e7eb; 186 box-sizing: border-box; 187 } 188 .erdiagram-selector-source-static { 189 width: 100%; 190 min-width: 0; 191 min-height: 34px; 192 border: 1px solid #334155; 193 border-radius: 999px; 194 padding: 0.5rem 0.75rem; 195 background: #0b1220; 196 color: #cbd5e1; 197 font: 600 12px system-ui, sans-serif; 198 box-sizing: border-box; 199 display: flex; 200 align-items: center; 201 } 202 .erdiagram-source-status { 203 display: flex; 204 flex-direction: column; 205 gap: 0.375rem; 206 padding: 0.75rem 1rem; 207 border-bottom: 1px solid #334155; 208 background: #0f172a; 209 } 210 .erdiagram-source-status-pill {
211 align-self: flex-start; 212 padding: 0.15rem 0.5rem; 213 border-radius: 999px; 214 border: 1px solid #334155; 215 background: #111827; 216 color: #cbd5e1; 217 font: 700 10px/1.3 system-ui, sans-serif; 218 letter-spacing: 0.04em; 219 text-transform: uppercase; 220 } 221 .erdiagram-source-status-text { 222 color: #94a3b8; 223 font: 500 11px/1.4 system-ui, sans-serif; 224 } 225 .erdiagram-source-status-empty .erdiagram-source-status-pill { 226 border-color: #3f3f46; 227 color: #a1a1aa; 228 background: #18181b; 229 } 230 .erdiagram-source-status-empty .erdiagram-source-status-text { 231 color: #a1a1aa; 232 } 233 .erdiagram-btn { 234 width: 100%; 235 min-height: 34px; 236 border: 1px solid #475569; 237 border-radius: 6px; 238 background: #1e293b; 239 color: #cbd5e1; 240 font: 600 12px system-ui, sans-serif; 241 cursor: pointer; 242 padding: 0.5rem 0.75rem; 243 } 244 .refresh-button { 245 display: flex; 246 flex-direction: column; 247 gap: 0.375rem; 248 width: 100%; 249 } 250 .last-refresh { 251 color: #94a3b8; 252 font: 500 11px system-ui, sans-serif; 253 } 254 .progress-indicator { 255 width: 100%; 256 min-width: 0; 257 padding: 0.75rem; 258 border: 1px solid #334155; 259 border-radius: 10px; 260 background: #0b1220; 261 box-sizing: border-box; 262 } 263 .progress-header { 264 display: flex; 265 align-items: center; 266 gap: 0.5rem; 267 margin-bottom: 0.35rem; 268 } 269 .progress-title { 270 font: 600 12px system-ui, sans-serif; 271 color: #e5e7eb; 272 } 273 .progress-bar { 274 width: 100%; 275 height: 8px; 276 border-radius: 999px; 277 background: #1f2937; 278 overflow: hidden; 279 } 280 .progress-fill { 281 height: 100%; 282 background: linear-gradient(90deg, #2563eb, #0ea5e9); 283 } 284 .progress-status { 285 margin-top: 0.35rem; 286 color: #94a3b8; 287 font: 500 11px system-ui, sans-serif; 288 } 289 .schema-tree { 290 flex: 1 1 auto; 291 min-height: 0; 292 padding: 1rem; 293 overflow-y: auto; 294 color: #e5e7eb; 295 background: #0b1220; 296 } 297 .schema-tree input { 298 width: 100%; 299 padding: 0.5rem; 300 margin-bottom: 1rem; 301 border: 1px solid #475569; 302 border-radius: 6px; 303 background: #111827; 304 color: #e5e7eb; 305 box-sizing: border-box; 306 } 307 .tree-node-header:hover, 308 .tree-node-rel:hover { 309 background: #1e293b; 310 } 311 .tree-node-children { 312 border-left: 2px solid #334155; 313 } 314 .field-type { 315 color: #94a3b8; 316 } 317 /* ââ Stage âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 318 .stage-erd { 319 width: 100%; height: 100%; 320 background: #0f172a; 321 touch-action: none; cursor: default; display: block; 322 } 323 .entity-erd { cursor: pointer; } 324 .entity-erd.selected-erd .entity-border-erd { 325 stroke: #3b82f6; stroke-width: 2.5; 326 } 327 .rel-erd { cursor: pointer; } 328 .rel-erd.selected-erd .rel-line-erd { stroke: #3b82f6; stroke-width: 2.5; } 329 .header-bg-erd { fill: #1e3a5f; } 330 .entity-border-erd { fill: none; stroke: #4b5563; stroke-width: 1.5; } 331 .field-bg-erd { fill: #111827; } 332 .field-bg-alt-erd { fill: #131e2e; } 333 .rel-line-erd { fill: none; stroke: #64748b; stroke-width: 1.5; } 334 .rel-label-erd { 335 fill: #94a3b8; font: 700 12px system-ui, sans-serif; 336 pointer-events: none; dominant-baseline: middle; 337 } 338 .connect-hint-erd { 339 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); 340 background: rgba(15,23,42,.85); color: #e2e8f0; border-radius: 8px; 341 padding: 5px 14px; font: 12px system-ui, sans-serif; 342 pointer-events: none; z-index: 4001; white-space: nowrap; 343 } 344 /* ââ drop-target highlight ââââââââââââââââââââââââââââââââââââââââââââââââ */ 345 .entity-erd.drop-target-erd .entity-border-erd { 346 stroke: #10b981; stroke-width: 2.5; 347 } 348 /* ââ per-entity save / delete actions (shown on selection) ââââââââââââââââ */ 349 .ent-actions-erd { 350 position: absolute; z-index: 4005; 351 display: flex; gap: 4px; 352 pointer-events: auto; 353 } 354 .ent-action-erd { 355 width: 24px; height: 24px; padding: 0; 356 display: flex; align-items: center; justify-content: center; 357 background: #1e3a5f; color: #e2e8f0; 358 border: 1px solid #3b82f6; border-radius: 4px; 359 font: 600 12px system-ui, sans-serif; line-height: 1; 360 cursor: pointer; 361 } 362 .ent-action-erd:hover { background: #2b4f7d; } 363 .ent-action-erd.danger { border-color: #f87171; color: #f87171; } 364 .ent-action-erd.danger:hover { background: #7f1d1d; color: #fee2e2; } 365 .ent-action-erd:disabled { opacity: .5; cursor: default; } 366 /* ââ inline entity rename input âââââââââââââââââââââââââââââââââââââââââââ */ 367 .rename-input-erd { 368 position: absolute; z-index: 4010; 369 background: #1e3a5f; color: #e2e8f0; 370 border: 2px solid #3b82f6; border-radius: 4px; 371 font: 700 13px system-ui, sans-serif; 372 text-align: center; outline: none; 373 padding: 4px 8px; box-sizing: border-box; 374 height: 32px; 375 } 376 /* ââ field editor popup ââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 377 .field-editor-erd { 378 position: absolute; z-index: 4010; 379 background: #1f2937; border: 1px solid #374151; border-radius: 10px; 380 padding: 12px; min-width: 240px; 381 box-shadow: 0 8px 24px rgba(0,0,0,.4); 382 font: 12px system-ui, sans-serif; color: #e5e7eb; 383 } 384 .fe-title-erd { 385 font: 700 11px system-ui, sans-serif; color: #94a3b8; 386 text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; 387 } 388 .fe-row-erd { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } 389 .fe-label-erd { font-size: 10px; color: #9ca3af; font-weight: 600; text-transform: uppercase; } 390 .fe-input-erd, .fe-select-erd { 391 background: #111827; color: #e5e7eb; 392 border: 1px solid #374151; border-radius: 6px; 393 padding: 5px 8px; font: 12px system-ui, sans-serif; 394 outline: none; width: 100%; box-sizing: border-box; 395 } 396 .fe-input-erd:focus, .fe-select-erd:focus { border-color: #3b82f6; } 397 .fe-select-erd option { background: #1f2937; } 398 .fe-checks-erd { display: flex; gap: 10px; align-items: center; margin-top: 2px; flex-wrap: wrap; } 399 .fe-check-erd { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; } 400 .fe-check-erd input { accent-color: #3b82f6; cursor: pointer; } 401 .fe-actions-erd { display: flex; gap: 6px; margin-top: 10px; } 402 .fe-btn-erd { 403 flex: 1; padding: 5px 4px; border-radius: 6px; border: 1px solid #374151; 404 background: #374151; color: #e5e7eb; cursor: pointer; 405 font: 600 11px system-ui, sans-serif; text-align: center; user-select: none; 406 } 407 .fe-btn-erd:hover { background: #4b5563; } 408 .fe-btn-erd.primary { background: #2563eb; border-color: #3b82f6; color: #fff; } 409 .fe-btn-erd.primary:hover { background: #3b82f6; } 410 .fe-btn-erd.danger { background: #7f1d1d; border-color: #ef4444; color: #fca5a5; } 411 .fe-btn-erd.danger:hover { background: #991b1b; } 412 /* ââ entity context menu ââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 413 .ctx-menu-erd { 414 position: absolute; z-index: 4020; 415 background: #1f2937; border: 1px solid #374151; border-radius: 8px; 416 padding: 4px; min-width: 160px; 417 box-shadow: 0 8px 24px rgba(0,0,0,.4); 418 font: 12px system-ui, sans-serif; color: #e5e7eb; 419 } 420 .ctx-item-erd { 421 padding: 7px 12px; border-radius: 5px; cursor: pointer; user-select: none; 422 transition: background .1s; 423 } 424 .ctx-item-erd:hover { background: #374151; } 425 .ctx-item-erd.danger { color: #f87171; } 426 .ctx-item-erd.danger:hover { background: #7f1d1d; } 427 .ctx-divider-erd { height: 1px; background: #374151; margin: 4px 0; } 428 /* ââ RelCondition builder âââââââââââââââââââââââââââââââââââââââââââââââââââ */ 429 .relcond-builder-erd { 430 position: absolute; 431 left: 50%; 432 top: 50%; 433 transform: translate(-50%, -50%); 434 width: 390px; 435 z-index: 10002; 436 background: #1e293b; 437 border: 1px solid #334155; 438 border-radius: 10px;
439 box-shadow: 0 10px 28px rgba(0, 0, 0, .55); 440 color: #e2e8f0; 441 font: 12px system-ui, sans-serif; 442 } 443 .relcond-header-erd { 444 display: flex; 445 align-items: center; 446 justify-content: space-between; 447 padding: 12px 14px; 448 border-bottom: 1px solid #334155; 449 } 450 .relcond-title-erd { font: 700 13px system-ui, sans-serif; color: #f1f5f9; } 451 .relcond-btn-close-erd { 452 background: transparent; 453 border: none; 454 color: #94a3b8; 455 cursor: pointer; 456 font-size: 14px; 457 line-height: 1; 458 padding: 0; 459 } 460 .relcond-btn-close-erd:hover { color: #cbd5e1; } 461 .relcond-body-erd { padding: 14px; display: flex; flex-direction: column; gap: 10px; } 462 .relcond-help-erd { color: #94a3b8; font-size: 11px; } 463 .relcond-row-erd { display: flex; flex-direction: column; gap: 5px; } 464 .relcond-label-erd { color: #cbd5e1; font: 600 11px system-ui, sans-serif; } 465 .relcond-select-erd { 466 background: #0f172a; 467 border: 1px solid #334155; 468 border-radius: 6px; 469 color: #e2e8f0; 470 height: 32px; 471 padding: 0 10px; 472 outline: none; 473 } 474 .relcond-select-erd:hover { border-color: #475569; } 475 .relcond-select-erd:focus { border-color: #60a5fa; } 476 .relcond-preview-wrap-erd { margin-top: 2px; } 477 .relcond-preview-label-erd { 478 color: #94a3b8; 479 font: 600 11px system-ui, sans-serif; 480 margin-bottom: 4px; 481 } 482 .relcond-preview-value-erd { 483 background: #0f172a; 484 border: 1px solid #334155; 485 border-radius: 6px; 486 color: #86efac; 487 font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; 488 min-height: 19px; 489 padding: 8px 10px; 490 word-break: break-all; 491 } 492 .relcond-preview-value-erd.is-empty-erd { color: #6b7280; } 493 .relcond-footer-erd { 494 display: flex; 495 justify-content: flex-end; 496 gap: 8px; 497 padding: 12px 14px; 498 border-top: 1px solid #334155; 499 } 500 .relcond-btn-erd { 501 border: 1px solid #475569; 502 background: #1e293b; 503 color: #cbd5e1; 504 border-radius: 6px; 505 height: 30px; 506 padding: 0 11px; 507 cursor: pointer; 508 font: 600 12px system-ui, sans-serif; 509 } 510 .relcond-btn-erd.primary { 511 border-color: #2563eb; 512 background: #2563eb; 513 color: #fff; 514 } 515 .relcond-btn-erd:hover { filter: brightness(1.08); } 516 .relcond-btn-erd:disabled { 517 opacity: .45; 518 cursor: not-allowed; 519 filter: none; 520 } 521 /* ââ swimlanes ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 522 .lane-bg-erd { 523 fill: rgba(30,41,59,.35); stroke: rgba(100,116,139,.25); stroke-width: 1.5; 524 } 525 .lane-header-bg-erd { fill: rgba(51,65,85,.45); } 526 .lane-title-erd { 527 fill: #94a3b8; font: 700 13px system-ui, sans-serif; 528 pointer-events: none; dominant-baseline: middle; 529 } 530 `; 531 document.head.appendChild( 532 Object.assign(document.createElement("style"), { id: ID, textContent: css }) 533 ); 534}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.