styles.css
1 body { 2 --mb-border-width: var(--border-width); 3 --mb-border-radius: var(--input-radius); 4 --mb-slider-spacing: 5px; 5 --mb-select-element-border-width: 5px; 6 --mb-date-input-year-input-width: 80px; 7 8 --mb-background-modifier-active: hsla(var(--interactive-accent-hsl), 0.15); 9 --mb-background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.3); 10 11 --mb-input-type-select-text: var(--text-muted); 12 --mb-input-type-select-text-hover: var(--text-normal); 13 --mb-input-type-select-text-active: var(--text-normal); 14 --mb-input-type-select-text-active-hover: var(--text-normal); 15 } 16 17 /* Input Wrappers */ 18 .mb-input { 19 background-color: transparent !important; 20 border: none !important; 21 } 22 23 .mb-input-wrapper { 24 display: inline; 25 white-space: normal; 26 } 27 28 .mb-input-inline { 29 display: inline !important; 30 } 31 32 .mb-input-block { 33 display: block !important; 34 } 35 36 /* View Wrappers */ 37 /* For higher specificity */ 38 :is(code, span).mb-view:has(> div.mb-view-wrapper) { 39 background-color: transparent; 40 border: none; 41 color: inherit; 42 font-size: inherit; 43 font-family: inherit; 44 padding: 0; 45 margin: 0; 46 } 47 48 div.mb-view-wrapper.mb-view-markdown > p { 49 margin: 0; 50 display: inline-block; 51 } 52 53 div.mb-view-wrapper { 54 display: inline; 55 } 56 57 .mb-button { 58 background-color: transparent !important; 59 border: none !important; 60 } 61 62 .mb-button-inline { 63 display: inline !important; 64 } 65 66 .mb-button-block { 67 } 68 69 .mb-button-group { 70 background-color: transparent !important; 71 border: none !important; 72 73 & > .mb-button { 74 &:first-child:not(:last-child) { 75 & > .mb-button-inner { 76 border-radius: var(--mb-border-radius) 0 0 var(--mb-border-radius); 77 } 78 } 79 80 &:last-child:not(:first-child) { 81 & > .mb-button-inner { 82 border-radius: 0 var(--mb-border-radius) var(--mb-border-radius) 0; 83 } 84 } 85 86 &:last-child:first-child { 87 & > .mb-button-inner { 88 border-radius: var(--mb-border-radius); 89 } 90 } 91 92 & > .mb-button-inner { 93 border-radius: 0; 94 } 95 } 96 } 97 98 .mb-button-inner { 99 vertical-align: bottom; 100 } 101 102 /* Toggle Input */ 103 .mb-input-wrapper .checkbox-container { 104 vertical-align: text-bottom; 105 } 106 107 /* Slider Input */ 108 109 .mb-input-wrapper:has(> .mb-slider-input) { 110 display: inline-flex; 111 } 112 113 .mb-slider-input { 114 align-self: center; 115 margin-left: var(--mb-slider-spacing) !important; 116 margin-right: var(--mb-slider-spacing) !important; 117 } 118 119 .mb-slider-input-label { 120 color: var(--text-muted); 121 font-size: var(--font-ui-small); 122 } 123 124 /* Text Input */ 125 .mb-content-limit-indicator { 126 color: var(--text-muted); 127 font-size: var(--font-ui-small); 128 } 129 130 .mb-content-limit-indicator-overflow { 131 color: var(--color-red); 132 } 133 134 /* Select Input */ 135 .mb-select-input-element { 136 cursor: pointer; 137 display: flex; 138 gap: var(--size-4-2); 139 align-items: center; 140 padding: var(--size-4-1) var(--size-4-2); 141 margin: var(--size-4-1) 0; 142 border-radius: var(--mb-border-radius); 143 white-space: pre-wrap; 144 font-size: 16px; 145 min-width: 200px; 146 color: var(--mb-input-type-select-text); 147 148 &.is-selected { 149 color: var(--mb-input-type-select-text-active); 150 background: var(--mb-background-modifier-active); 151 152 &:hover { 153 color: var(--mb-input-type-select-text-active-hover); 154 background: var(--mb-background-modifier-active-hover); 155 } 156 } 157 158 &:hover { 159 color: var(--mb-input-type-select-text-hover); 160 background: var(--background-modifier-hover); 161 } 162 163 &:not(.mb-mod-multi) > input[type='checkbox'] { 164 border-radius: 50%; 165 } 166 167 & > input[type='checkbox'] { 168 margin: 0; 169 } 170 } 171 172 /* List Input */ 173 .mb-list-input { 174 display: flex; 175 gap: var(--size-4-2); 176 } 177 178 .mb-list-input > input { 179 flex-grow: 1; 180 } 181 182 .mb-list-input > textarea { 183 flex-grow: 1; 184 resize: vertical; 185 } 186 187 .mb-list-empty { 188 color: var(--text-faint); 189 } 190 191 .mb-list-items { 192 margin-bottom: var(--size-4-4); 193 display: flex; 194 flex-direction: column; 195 gap: var(--size-4-1); 196 } 197 198 .mb-list-item { 199 display: flex; 200 padding: var(--size-4-1) var(--size-4-2); 201 border-radius: var(--mb-border-radius); 202 user-select: text; 203 204 & > span { 205 flex-grow: 1; 206 } 207 208 &:hover { 209 background: var(--background-modifier-hover); 210 } 211 } 212 213 /* Inline List */ 214 .mb-inline-list { 215 display: inline; 216 font-size: 0; 217 218 & > .mb-inline-list-item { 219 border: var(--mb-border-width) solid var(--background-modifier-border); 220 border-radius: var(--mb-border-radius); 221 display: inline-flex; 222 align-items: center; 223 gap: var(--size-4-2); 224 padding-inline: var(--size-4-2); 225 padding-block: var(--size-4-1); 226 font-size: var(--font-ui-small); 227 vertical-align: bottom; 228 user-select: text; 229 230 &:not(:last-child) { 231 margin-right: var(--size-4-2); 232 } 233 234 &:hover { 235 border-color: var(--background-modifier-border-hover); 236 background-color: var(--background-modifier-hover); 237 transition: 238 box-shadow 0.15s ease-in-out, 239 border 0.15s ease-in-out; 240 } 241 } 242 243 & > .mb-inline-list-add { 244 border: var(--mb-border-width) solid var(--background-modifier-border); 245 border-radius: var(--mb-border-radius); 246 display: inline-flex; 247 align-items: center; 248 padding-inline: var(--size-4-2); 249 padding-block: var(--size-4-1); 250 font-size: var(--font-ui-small); 251 252 &:hover { 253 border-color: var(--background-modifier-border-hover); 254 background-color: var(--background-modifier-hover); 255 transition: 256 box-shadow 0.15s ease-in-out, 257 border 0.15s ease-in-out; 258 } 259 260 &:focus, 261 &:focus-visible { 262 box-shadow: 0 0 0 2px var(--background-modifier-border-focus); 263 color: var(--text-normal); 264 } 265 } 266 } 267 268 /* Suggester Input */ 269 .mb-suggest-input { 270 background: var(--background-modifier-form-field); 271 border-radius: var(--mb-border-radius); 272 border: var(--mb-border-width) solid var(--background-modifier-border); 273 padding: var(--size-4-1) var(--size-4-2); 274 position: relative; 275 color: var(--text-normal); 276 display: inline-flex; 277 align-items: center; 278 gap: var(--size-4-1); 279 user-select: text; 280 281 &:hover { 282 border-color: var(--background-modifier-border-hover); 283 transition: 284 box-shadow 0.15s ease-in-out, 285 border 0.15s ease-in-out; 286 } 287 } 288 289 .mb-suggest-input > button { 290 padding: 0; 291 height: 20px; 292 } 293 294 .mb-suggest-text { 295 display: inline-block; 296 } 297 298 /* Progress Bar Input */ 299 300 .mb-progress-bar-input { 301 height: var(--input-height); 302 width: 100%; 303 border-radius: var(--mb-border-radius); 304 border: var(--mb-border-width) solid var(--background-modifier-border); 305 position: relative; 306 cursor: col-resize; 307 } 308 309 .mb-progress-bar-input:focus-visible { 310 box-shadow: 0 0 0 3px var(--background-modifier-border-focus); 311 } 312 313 .mb-progress-bar-progress { 314 height: 100%; 315 background: var(--color-accent); 316 border-radius: var(--mb-border-radius); 317 } 318 319 .mb-progress-bar-value { 320 position: absolute; 321 top: 50%; 322 left: 50%; 323 transform: translate(-50%, -50%); 324 } 325 326 .mb-progress-bar-label-left { 327 position: absolute; 328 top: 50%; 329 transform: translate(0, -50%); 330 left: var(--size-4-2); 331 } 332 333 .mb-progress-bar-label-right { 334 position: absolute; 335 top: 50%; 336 transform: translate(0, -50%); 337 right: var(--size-4-2); 338 } 339 340 /* Text Area Input */ 341 342 .mb-input-textarea { 343 width: 100%; 344 height: 100px; 345 resize: vertical; 346 } 347 348 /* Card */ 349 .mb-card { 350 padding: var(--size-4-2); 351 margin: var(--size-4-2) 0; 352 border-radius: var(--mb-border-radius); 353 border: var(--mb-border-width) solid var(--background-modifier-border); 354 display: flex; 355 flex-direction: column; 356 width: 100%; 357 gap: var(--size-4-2); 358 } 359 360 [class*='block-language-'] > .mb-card { 361 display: flex; 362 } 363 364 .mb-card > :first-child { 365 margin-top: 0; 366 } 367 368 .mb-card > :last-child { 369 margin-bottom: 0; 370 } 371 372 .mb-card > code { 373 display: block; 374 } 375 376 .mb-card > pre { 377 margin: 0; 378 } 379 380 .mb-card > h3 { 381 margin-top: 0; 382 } 383 384 .mb-card.mb-card-full-width { 385 width: 100%; 386 } 387 388 /* Image */ 389 .mb-image-search-container { 390 margin-bottom: var(--size-4-4); 391 } 392 393 .mb-image-card-grid { 394 display: grid; 395 grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); 396 gap: var(--size-4-4); 397 } 398 399 .mb-image-suggester-modal { 400 width: 80%; 401 } 402 403 .mb-image-card-image { 404 width: 100%; 405 height: fit-content; 406 max-height: 500px; 407 object-fit: contain; 408 } 409 410 .mb-image-card-text { 411 display: block; 412 margin: var(--size-4-2); 413 margin-bottom: var(--size-4-4); 414 } 415 416 .mb-image-card-footer { 417 display: flex; 418 align-items: center; 419 420 & > span { 421 padding-left: var(--size-4-2); 422 font-size: var(--font-ui-small); 423 color: var(--text-muted); 424 min-width: 0; 425 text-overflow-ellipsis: true; 426 flex: 1; 427 } 428 } 429 430 .mb-image-suggest-input { 431 background: var(--background-secondary); 432 border-radius: var(--mb-border-radius); 433 border: var(--mb-border-width) solid var(--background-modifier-border); 434 padding: var(--size-4-2); 435 width: 100%; 436 } 437 438 /* Time Input */ 439 440 .mb-input-type-time { 441 input[type='time'] { 442 -webkit-app-region: no-drag; 443 background: var(--background-modifier-form-field); 444 border: var(--input-border-width) solid var(--background-modifier-border); 445 color: var(--text-normal); 446 font-family: inherit; 447 padding: var(--size-4-1) var(--size-4-2); 448 font-size: var(--font-ui-small); 449 border-radius: var(--input-radius); 450 outline: none; 451 452 &:hover { 453 border-color: var(--background-modifier-border-hover); 454 transition: 455 box-shadow 0.15s ease-in-out, 456 border 0.15s ease-in-out; 457 } 458 459 &:focus, 460 &:focus-visible { 461 box-shadow: 0 0 0 2px var(--background-modifier-border-focus); 462 } 463 } 464 } 465 466 /* Date Picker Input */ 467 468 .date-picker-input { 469 background: var(--background-modifier-form-field); 470 border: var(--mb-border-width) solid var(--background-modifier-border); 471 color: var(--text-normal); 472 font-family: inherit; 473 padding: var(--size-4-1) var(--size-4-2); 474 font-size: var(--font-ui-small); 475 border-radius: var(--input-radius); 476 outline: none; 477 478 position: relative; 479 display: inline-flex; 480 align-items: center; 481 gap: 5px; 482 483 &:hover { 484 border-color: var(--background-modifier-border-hover); 485 transition: 486 box-shadow 0.15s ease-in-out, 487 border 0.15s ease-in-out; 488 } 489 490 &:focus, 491 &:focus-visible { 492 box-shadow: 0 0 0 2px var(--background-modifier-border-focus); 493 } 494 } 495 496 .date-picker-text { 497 display: inline-block; 498 } 499 500 /* Error */ 501 .mb-error { 502 color: var(--text-error) !important; 503 font-weight: bold; 504 font-family: var(--font-monospace); 505 } 506 507 code.mb-error { 508 color: var(--text-error) !important; 509 } 510 511 .mb-warning { 512 color: var(--text-warning) !important; 513 font-weight: bold; 514 font-family: var(--font-monospace); 515 } 516 517 code.mb-warning { 518 color: var(--text-warning) !important; 519 } 520 521 /* Code */ 522 .mb-code { 523 color: var(--text-normal); 524 font-family: var(--font-monospace); 525 } 526 527 /* Error Collection */ 528 .mb-error-collection-card { 529 padding: var(--size-4-2); 530 margin: var(--size-4-2) 0; 531 border-radius: var(--mb-border-radius); 532 border: var(--mb-border-width) solid var(--background-modifier-border); 533 color: var(--text-normal); 534 font-family: var(--font-default); 535 } 536 537 .mb-error-collection { 538 display: inline-block; 539 position: relative; 540 cursor: pointer; 541 margin-inline: var(--size-4-2); 542 } 543 544 .publish-renderer .mb-error-collection { 545 margin-inline: 0; 546 } 547 548 .mb-error-collection > svg { 549 width: var(--font-text-size); 550 height: var(--font-text-size); 551 vertical-align: text-bottom; 552 } 553 554 .mb-error-collection > svg.lucide-alert-circle { 555 color: var(--text-error); 556 } 557 558 .mb-error-collection > svg.lucide-alert-triangle { 559 color: var(--text-warning); 560 } 561 562 .mb-error-collection > svg.lucide-info { 563 color: var(--text-normal); 564 } 565 566 .mb-pre { 567 overflow-x: scroll; 568 } 569 570 .mb-pre > code { 571 white-space: pre; 572 } 573 574 .mb-error-collection-modal { 575 width: 80%; 576 } 577 578 .mb-error-text { 579 color: var(--text-error) !important; 580 } 581 582 .mb-warning-text { 583 color: var(--text-warning) !important; 584 } 585 586 /* --- Misc --- */ 587 588 .mb-icon-wrapper { 589 display: block; 590 position: relative; 591 width: 18px; 592 height: 18px; 593 } 594 595 .mb-icon-wrapper.mb-icon-wrapper-inline { 596 display: inline-block; 597 } 598 599 .mb-icon-wrapper > svg { 600 position: absolute; 601 top: 0; 602 bottom: 0; 603 left: 0; 604 right: 0; 605 } 606 607 .mb-faq-view { 608 max-width: var(--file-line-width); 609 margin-left: auto; 610 margin-right: auto; 611 } 612 613 a.mb-no-link { 614 color: var(--code-normal); 615 text-decoration: none; 616 } 617 618 table.mb-html-table { 619 } 620 621 td.mb-html-table-button-cell { 622 --table-column-min-width: 10px; 623 } 624 625 th.mb-html-table-button-cell { 626 --table-column-min-width: 10px; 627 } 628 629 .mb-table-wrapper { 630 overflow-x: auto; 631 } 632 633 .mb-flex-row { 634 display: flex; 635 flex-direction: row; 636 justify-content: space-between; 637 align-items: center; 638 gap: var(--size-4-2); 639 } 640 641 .mb-flex-row.mb-flex-row-stretch > :first-child { 642 flex: 1; 643 } 644 645 .mb-flex-row-reverse { 646 display: flex; 647 flex-direction: row-reverse; 648 justify-content: space-between; 649 align-items: center; 650 gap: var(--size-4-2); 651 } 652 653 .mb-flex-row-reverse.mb-flex-row-stretch > :last-child { 654 flex: 1; 655 } 656 657 .mb-full-width-text-input { 658 width: 100%; 659 } 660 661 .mb-full-width-text-input > input { 662 width: 100%; 663 } 664 665 .mb-full-width-text-input > textarea { 666 width: 100%; 667 height: 200px; 668 resize: vertical; 669 } 670 671 /* --- HIGHLIGHTING CLASSES --- */ 672 .mb-highlight-test { 673 color: #00bfbc; 674 } 675 676 .mb-highlight-ident, 677 .cm-mb-highlight-ident { 678 color: var(--code-normal); 679 } 680 681 .mb-highlight-control, 682 .cm-mb-highlight-control { 683 color: var(--code-keyword); 684 } 685 686 .mb-highlight-string, 687 .cm-mb-highlight-string { 688 color: var(--code-string); 689 } 690 691 .mb-highlight-keyword, 692 .cm-mb-highlight-keyword { 693 color: var(--code-property); 694 } 695 696 .mb-highlight-error, 697 .cm-mb-highlight-error { 698 color: var(--text-error); 699 } 700 701 /* --- UTIL CLASSES --- */ 702 703 .meta-bind-full-width > * { 704 width: 100%; 705 } 706 707 .meta-bind-high > * { 708 height: 200px; 709 } 710 711 .meta-bind-small-width > * { 712 width: 80px; 713 } 714 715 /* --- PUBLISH STUFF --- */ 716 717 .published-container { 718 .mb-input-type-toggle > div { 719 display: inline-block; 720 vertical-align: sub; 721 } 722 }