custom.css
1 @import 'tailwindcss'; 2 3 /** 4 * MLflow Documentation Styling 5 * Organized by section and functionality 6 * 7 * Any CSS included here will be global. The classic template 8 * bundles Infima by default. Infima is a CSS framework designed to 9 * work well for content-centric websites. 10 */ 11 :root { 12 --color-brand-red: #eb1700; 13 } 14 15 /* -------------------------------- 16 * 0. Override tailwinds reset of li and ul elements styling 17 * --------------------------------*/ 18 .markdown ul, 19 .theme-doc-markdown ul, 20 article ul { 21 list-style-type: disc; 22 padding-left: 1.5rem; 23 margin-bottom: 1rem; 24 } 25 26 .markdown ol, 27 .theme-doc-markdown ol, 28 article ol { 29 list-style-type: decimal; 30 padding-left: 1.5rem; 31 margin-bottom: 1rem; 32 } 33 34 .markdown li, 35 .theme-doc-markdown li, 36 article li { 37 margin-bottom: 0.25rem; 38 } 39 40 /* Nested lists */ 41 .markdown ul ul, 42 .theme-doc-markdown ul ul, 43 article ul ul { 44 list-style-type: circle; 45 margin-bottom: 0.5rem; 46 } 47 48 .markdown ul ul ul, 49 .theme-doc-markdown ul ul ul, 50 article ul ul ul { 51 list-style-type: square; 52 } 53 54 /* -------------------------------- 55 * 1. Font Imports and Typography 56 * -------------------------------- */ 57 /* Import DM Sans for body text and DM Mono for code */ 58 @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); 59 60 :root[data-theme='light'] { 61 --background-color: var(--background-color-light); 62 } 63 64 /* Apply fonts */ 65 :root { 66 --background-color-light: white; 67 --background-color-dark: rgb(14, 20, 22); 68 --background-color: var(--background-color-dark); 69 background-color: var(--background-color); 70 71 /* Font family variables */ 72 --ifm-font-family-base: 73 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 74 'Helvetica Neue', sans-serif; 75 --ifm-font-family-monospace: 76 'DM Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; 77 --ifm-navbar-background-color: var(--background-color); 78 79 /* Font weight variables - per designer specs */ 80 --font-weight-light: 300; 81 --font-weight-regular: 400; 82 --font-weight-medium: 500; 83 --font-weight-semibold: 600; 84 --font-weight-bold: 700; 85 86 /* Typography scale based on designer specs */ 87 /* the font variables are overwritten by Docusaurus */ 88 /* https://github.com/facebook/docusaurus/issues/6934 */ 89 --font-size-h1: 3rem; 90 --font-size-h2: 2rem; 91 --font-size-h3: 1.5rem; 92 --font-size-h4: 1.3rem; 93 --font-size-h5: 1.2rem; 94 --font-size-body-l: 18px; 95 --font-size-body-m: 16px; 96 --font-size-body-s: 14px; 97 --font-size-label-l: 14px; 98 --font-size-label-s: 12px; 99 100 /* Line heights per designer specs */ 101 --line-height-h1: 100%; 102 --line-height-h2: 120%; 103 --line-height-h3: 120%; 104 --line-height-h4: 120%; 105 --line-height-h5: 120%; 106 --line-height-body: 140%; 107 --line-height-label: 120%; 108 109 /* Letter spacing per designer specs */ 110 --letter-spacing-h1: -3%; 111 --letter-spacing-h2: -1%; 112 --letter-spacing-h3: -1%; 113 --letter-spacing-h4: 0; 114 --letter-spacing-h5: 0; 115 --letter-spacing-body: 0; 116 --letter-spacing-label: 8%; 117 118 /* Map to Docusaurus variables */ 119 --ifm-font-size-base: var(--font-size-body-s); 120 --ifm-line-height-base: 1.4; 121 --ifm-h1-font-size: var(--font-size-h1); 122 --ifm-h2-font-size: var(--font-size-h2); 123 --ifm-h3-font-size: var(--font-size-h3); 124 --ifm-h4-font-size: var(--font-size-h4); 125 --ifm-h5-font-size: var(--font-size-h5); 126 127 /* Common layout variables */ 128 --card-border-radius: 4px; 129 --card-shadow1: rgba(50, 50, 93, 0.05); 130 --card-shadow2: rgba(50, 50, 93, 0.08); 131 --card-shadow3: rgba(0, 0, 0, 0.05); 132 --card-hover-shadow: 133 0 0 0 1px var(--card-shadow1), 0 0 14px 5px var(--card-shadow2), 0 0 10px 3px var(--card-shadow3); 134 --padding-xs: 4px; 135 --padding-sm: 8px; 136 --padding-md: 16px; 137 --padding-lg: 24px; 138 --ifm-code-font-size: 95%; 139 --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); 140 141 /* Color system */ 142 /* Light mode colors */ 143 --ifm-border-color: #6b7280; 144 --ifm-color-emphasis-hover: #000000; 145 --ifm-link-color: #0194e2; 146 147 /* Site-wide shadow colors */ 148 --ifm-shadow-light: rgba(0, 0, 0, 0.1); 149 --ifm-shadow-medium: rgba(0, 0, 0, 0.15); 150 --ifm-shadow-heavy: rgba(0, 0, 0, 0.25); 151 --ifm-shadow-tile-hover: 0 10px 30px var(--ifm-shadow-light); 152 153 /* Dynamic Coloring based on theme selection */ 154 --ifm-color-primary: #0194e2; 155 --ifm-color-primary-dark: #0086cf; 156 --ifm-color-primary-darker: #0072b0; 157 --ifm-color-primary-darkest: #02659c; 158 --ifm-color-primary-light: #43c9ed; 159 --ifm-color-primary-lighter: #4accf0; 160 --ifm-color-primary-lightest: #54cef0; 161 162 /* ML - Blue theme */ 163 --ml-color-primary: #0194e2; 164 165 /* GenAI - Red theme */ 166 --genai-color-primary: #eb1700; 167 --genai-color-primary-dark: #d21400; 168 --genai-color-primary-darker: #b91100; 169 --genai-color-primary-darkest: #9f0f00; 170 --genai-color-primary-light: #ff3a23; 171 --genai-color-primary-lighter: #ff6c59; 172 --genai-color-primary-lightest: #ff9d8f; 173 174 /* Secondary colors */ 175 --ifm-color-secondary: #85552e; 176 --ifm-color-secondary-dark: #784c29; 177 --ifm-color-secondary-darker: #714827; 178 --ifm-color-secondary-darkest: #5d3b20; 179 --ifm-color-secondary-light: #925d33; 180 --ifm-color-secondary-lighter: #996235; 181 --ifm-color-secondary-lightest: #ad6e3c; 182 183 /* Danger colors */ 184 --ifm-color-danger: #852e5e; 185 --ifm-color-danger-dark: #782955; 186 --ifm-color-danger-darker: #712750; 187 --ifm-color-danger-darkest: #5d2042; 188 --ifm-color-danger-light: #923368; 189 --ifm-color-danger-lighter: #99356c; 190 --ifm-color-danger-lightest: #ad3c7b; 191 192 /* Info colors */ 193 --ifm-color-info: #2e8581; 194 --ifm-color-info-dark: #297873; 195 --ifm-color-info-darker: #27716d; 196 --ifm-color-info-darkest: #205d5a; 197 --ifm-color-info-light: #33928c; 198 --ifm-color-info-lighter: #359994; 199 --ifm-color-info-lightest: #3cada7; 200 201 /* Footer colors */ 202 --ifm-footer-background-color: #303846; 203 --ifm-footer-color: #ebedf0; 204 --ifm-footer-link-color: #ebedf0; 205 } 206 207 body { 208 font-family: var(--ifm-font-family-base); 209 font-size: var(--font-size-body-s); 210 font-weight: var(--font-weight-regular); 211 line-height: var(--line-height-body); 212 letter-spacing: var(--letter-spacing-body); 213 } 214 215 /* Unified link styling for both Classic ML and GenAI modes */ 216 a { 217 color: var(--ifm-link-color); 218 text-decoration: none; 219 transition: color 0.2s ease; 220 } 221 222 a:hover { 223 color: var(--ifm-color-emphasis-hover); 224 text-decoration: none; 225 } 226 227 /* Exception for sidebar links which have their own styling */ 228 .menu__link { 229 color: var(--ifm-border-color); 230 } 231 232 .menu__link:hover { 233 color: var(--ifm-color-emphasis-hover); 234 } 235 236 h1 { 237 font-family: var(--ifm-font-family-base); 238 font-weight: var(--font-weight-light); 239 line-height: var(--line-height-h1); 240 letter-spacing: -0.03em; /* -3% */ 241 margin-top: 1.5rem; 242 margin-bottom: 1rem; 243 } 244 245 h2 { 246 font-family: var(--ifm-font-family-base); 247 font-size: var(--ifm-h2-font-size) !important; 248 font-weight: var(--font-weight-light); 249 line-height: var(--line-height-h2); 250 letter-spacing: -0.01em; /* -1% */ 251 margin-top: 1.5rem; 252 margin-bottom: 1rem; 253 } 254 255 h3 { 256 font-family: var(--ifm-font-family-base); 257 font-size: var(--ifm-h3-font-size); 258 font-weight: var(--font-weight-regular); 259 line-height: var(--line-height-h3); 260 letter-spacing: -0.01em; /* -1% */ 261 margin-top: 1.5rem; 262 margin-bottom: 1rem; 263 } 264 265 h4 { 266 font-family: var(--ifm-font-family-base); 267 font-size: var(--ifm-h4-font-size); 268 font-weight: var(--font-weight-regular); 269 line-height: var(--line-height-h4); 270 letter-spacing: 0; /* 0% */ 271 margin-top: 1.5rem; 272 margin-bottom: 1rem; 273 } 274 275 h5 { 276 font-family: var(--ifm-font-family-base); 277 font-size: var(--ifm-h5-font-size); 278 font-weight: var(--font-weight-medium); 279 line-height: var(--line-height-h5); 280 letter-spacing: 0; /* 0% */ 281 margin-top: 1.5rem; 282 margin-bottom: 1rem; 283 } 284 285 /* Body text classes */ 286 .body-large { 287 font-size: var(--font-size-body-l); 288 font-weight: var(--font-weight-regular); 289 line-height: var(--line-height-body); 290 letter-spacing: var(--letter-spacing-body); 291 } 292 293 .body-medium { 294 font-size: var(--font-size-body-m); 295 font-weight: var(--font-weight-regular); 296 line-height: var(--line-height-body); 297 letter-spacing: var(--letter-spacing-body); 298 } 299 300 .body-small { 301 font-size: var(--font-size-body-s); 302 font-weight: var(--font-weight-regular); 303 line-height: var(--line-height-body); 304 letter-spacing: var(--letter-spacing-body); 305 } 306 307 /* Label classes */ 308 .label-large { 309 font-size: var(--font-size-label-l); 310 font-weight: var(--font-weight-medium); 311 line-height: var(--line-height-label); 312 letter-spacing: 0.08em; /* 8% */ 313 text-transform: uppercase; 314 } 315 316 .label-small { 317 font-size: var(--font-size-label-s); 318 font-weight: var(--font-weight-semibold); 319 line-height: var(--line-height-label); 320 letter-spacing: 0.08em; /* 8% */ 321 text-transform: uppercase; 322 } 323 324 code, 325 pre, 326 kbd { 327 font-family: var(--ifm-font-family-monospace); 328 } 329 330 /* Dark mode overrides */ 331 [data-theme='dark'] { 332 --ifm-color-primary: #0194e2; 333 --ifm-color-primary-dark: #0086cf; 334 --ifm-color-primary-darker: #0072b0; 335 --ifm-color-primary-darkest: #02659c; 336 --ifm-color-primary-light: #43c9ed; 337 --ifm-color-primary-lighter: #4accf0; 338 --ifm-color-primary-lightest: #54cef0; 339 340 /* Dark mode colors */ 341 --ifm-border-color: #9ca3af; 342 --ifm-color-emphasis-hover: #ffffff; 343 --ifm-link-color: #43c9ed; 344 345 /* Dark mode shadow colors */ 346 --ifm-shadow-light: rgba(255, 255, 255, 0.1); 347 --ifm-shadow-medium: rgba(255, 255, 255, 0.15); 348 --ifm-shadow-heavy: rgba(255, 255, 255, 0.25); 349 --ifm-shadow-tile-hover: 0 10px 30px var(--ifm-shadow-light); 350 351 /* Inverted shadows */ 352 --card-shadow1: rgba(162, 162, 162, 0.5); 353 --card-shadow2: rgba(162, 162, 162, 0.5); 354 --card-shadow3: rgba(255, 255, 255, 0.3); 355 356 /* Secondary colors */ 357 --ifm-color-secondary: #c2a025; 358 --ifm-color-secondary-dark: #af9021; 359 --ifm-color-secondary-darker: #a5881f; 360 --ifm-color-secondary-darkest: #88701a; 361 --ifm-color-secondary-light: #d5b029; 362 --ifm-color-secondary-lighter: #d8b432; 363 --ifm-color-secondary-lightest: #ddbf4f; 364 365 /* Danger colors */ 366 --ifm-color-danger: #c22547; 367 --ifm-color-danger-dark: #af2140; 368 --ifm-color-danger-darker: #a51f3c; 369 --ifm-color-danger-darkest: #881a32; 370 --ifm-color-danger-light: #d5294e; 371 --ifm-color-danger-lighter: #d83256; 372 --ifm-color-danger-lightest: #dd4f6d; 373 374 --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); 375 376 /* Info colors */ 377 --ifm-color-info: #2595c2; 378 --ifm-color-info-dark: #2187af; 379 --ifm-color-info-darker: #1f7fa5; 380 --ifm-color-info-darkest: #1a6988; 381 --ifm-color-info-light: #29a4d5; 382 --ifm-color-info-lighter: #32a9d8; 383 --ifm-color-info-lightest: #4fb4dd; 384 } 385 386 /* -------------------------------- 387 * 2. Theme Switching 388 * -------------------------------- */ 389 390 /* GenAI theme activation */ 391 html[data-genai-theme='true'] { 392 --ifm-color-primary: var(--genai-color-primary); 393 --ifm-color-primary-dark: var(--genai-color-primary-dark); 394 --ifm-color-primary-darker: var(--genai-color-primary-darker); 395 --ifm-color-primary-darkest: var(--genai-color-primary-darkest); 396 --ifm-color-primary-light: var(--genai-color-primary-light); 397 --ifm-color-primary-lighter: var(--genai-color-primary-lighter); 398 --ifm-color-primary-lightest: var(--genai-color-primary-lightest); 399 } 400 401 /* -------------------------------- 402 * 3. Navigation Bar Styling 403 * -------------------------------- */ 404 405 /* Base styling for all navbar links */ 406 .navbar__link { 407 color: var(--ifm-border-color); 408 position: relative; 409 transition: color 0.2s ease; 410 } 411 412 /* Hover state for navbar links */ 413 .navbar__link:not(.navbar__link--active):hover { 414 color: var(--ifm-color-emphasis-hover); 415 background-color: transparent; 416 } 417 418 .navbar__item:hover::before { 419 content: ''; 420 position: absolute; 421 bottom: 0; 422 left: 0; 423 right: 0; 424 height: 2px; 425 background-color: var(--ifm-border-color); 426 opacity: 0.5; 427 } 428 429 .github-link { 430 display: flex; 431 align-items: center; 432 flex-wrap: nowrap; 433 } 434 435 /* -------------------------------- 436 * 4. Sidebar Styling 437 * -------------------------------- */ 438 439 /* Sidebar background color and spacing */ 440 .theme-doc-sidebar-container { 441 background-color: transparent; 442 border-right: none !important; 443 padding-top: 1rem; 444 margin-right: 2rem; 445 } 446 447 /* Common sidebar styles for both themes */ 448 .menu__list { 449 padding-left: 0.5rem; 450 } 451 452 .sidebar-top-level-category > .menu__link, 453 .sidebar-top-level-category > .menu__list-item-collapsible > .menu__link { 454 font-size: var(--font-size-body-s); 455 font-weight: var(--font-weight-medium); 456 padding-top: 0.5rem; 457 padding-bottom: 0.5rem; 458 padding-left: 1.5rem; 459 } 460 461 /* Style Overview doc link to match bold HTML section headers (e.g., "Getting Started") 462 Used in docs/sidebarsGenAI.ts */ 463 .sidebar-overview.menu__list-item { 464 padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal) !important; 465 } 466 467 .sidebar-overview.menu__list-item > .menu__link { 468 font-weight: bolder !important; 469 padding-left: 0 !important; 470 } 471 472 .menu__list-item:not(.sidebar-top-level-category):not(.sidebar-overview) > .menu__link, 473 .menu__list-item:not(.sidebar-top-level-category):not(.sidebar-overview) > .menu__list-item-collapsible > .menu__link { 474 font-size: var(--font-size-body-s); 475 padding-left: 1.5rem; 476 padding-top: 0.5rem; 477 padding-bottom: 0.5rem; 478 } 479 480 /* Regular menu links */ 481 .menu__link { 482 color: var(--ifm-border-color); 483 transition: color 0.2s ease; 484 } 485 486 /* Active link styling for light and dark modes */ 487 .menu__link--active { 488 position: relative; 489 } 490 491 /* Light mode */ 492 html[data-theme='light'] .menu__link--active { 493 color: #000000; /* Pure black text */ 494 background-color: transparent; /* No background color */ 495 font-weight: var(--font-weight-medium); 496 } 497 498 /* Dark mode */ 499 html[data-theme='dark'] .menu__link--active { 500 color: #ffffff; /* Pure white text */ 501 background-color: transparent; /* No background color */ 502 font-weight: var(--font-weight-medium); 503 } 504 505 /* Make the collapse button smaller */ 506 .menu__caret:before, 507 .menu__link--sublist-caret:after { 508 background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem; 509 } 510 511 /* Hover states */ 512 .menu__link:hover:not(.menu__link--active) { 513 color: var(--ifm-color-emphasis-hover); /* Use hover variable */ 514 background-color: transparent; 515 } 516 517 /* External link icon in sidebar - make existing icon smaller */ 518 .menu__link--external svg, 519 .menu__link[href^='http'] svg, 520 .menu__link[href^='https'] svg, 521 .menu a[target='_blank'] svg, 522 .menu a[rel*='noopener'] svg { 523 width: 10px; 524 height: 10px; 525 vertical-align: middle; 526 margin-left: 0.2em; 527 } 528 529 /* -------------------------------- 530 * 5. Content Navigation 531 * -------------------------------- */ 532 533 /* Align breadcrumb items */ 534 .breadcrumbs { 535 display: flex; 536 } 537 538 .breadcrumbs__item { 539 display: inline-flex; 540 align-items: center; 541 } 542 543 /* Breadcrumbs - make uniform with the link color scheme */ 544 .breadcrumbs__link { 545 color: var(--ifm-border-color); 546 } 547 548 .breadcrumbs__link:hover { 549 color: var(--ifm-color-emphasis-hover); 550 } 551 552 /* Active breadcrumb - consistent with active sidebar styling */ 553 .breadcrumbs__link--active { 554 color: var(--ifm-color-emphasis-hover); /* Black in light mode, White in dark mode */ 555 } 556 557 /* Breadcrumb separator */ 558 .breadcrumbs__item--active .breadcrumbs__link { 559 background: none; 560 color: var(--ifm-color-emphasis-hover); 561 } 562 563 .pagination-nav { 564 gap: 0; 565 } 566 567 /* Make pagination consistent with the link colors */ 568 .pagination-nav__link { 569 color: var(--ifm-border-color); 570 border-radius: 0; 571 padding-block: 2rem; 572 position: relative; 573 } 574 575 .pagination-nav__link:hover { 576 background-color: var(--ifm-background-color); 577 border-color: var(--ifm-color-emphasis-300); 578 } 579 580 .pagination-nav__link .pagination-nav__sublabel { 581 font-size: var(--font-size-base); 582 color: var(--ifm-border-color); 583 padding-top: 0.5rem; 584 } 585 586 .pagination-nav__link .pagination-nav__label { 587 font-size: var(--font-size-h5); 588 color: var(--ifm-color-emphasis-hover); 589 } 590 591 .pagination-nav__link--next { 592 padding-right: 3rem; 593 } 594 595 .pagination-nav__link--prev { 596 padding-left: 3rem; 597 } 598 599 /* Pagination arrows now use the same color scheme instead of theme colors */ 600 .pagination-nav__link--next .pagination-nav__label::after { 601 content: ''; 602 } 603 .pagination-nav__link--prev .pagination-nav__label::before { 604 content: ''; 605 } 606 607 .pagination-nav__link--next::after { 608 content: '>'; 609 color: var(--ifm-border-color); 610 font-size: 2rem; 611 position: absolute; 612 right: 1rem; 613 top: 33%; 614 } 615 616 .pagination-nav__link--prev::before { 617 content: '<'; 618 color: var(--ifm-border-color); 619 font-size: 2rem; 620 position: absolute; 621 left: 1rem; 622 top: 33%; 623 } 624 625 /* Hover state for pagination arrows */ 626 .pagination-nav__link:hover .pagination-nav__label::after, 627 .pagination-nav__link:hover .pagination-nav__label::before { 628 color: var(--ifm-color-emphasis-hover); 629 } 630 631 /* -------------------------------- 632 * 6. Layout Utilities 633 * -------------------------------- */ 634 635 .flex-column { 636 display: flex; 637 flex-direction: column; 638 } 639 640 .flex-row { 641 display: flex; 642 flex-direction: row; 643 } 644 645 .flex-item { 646 box-sizing: border-box; 647 flex: 1; 648 } 649 650 .padding-md { 651 padding: var(--padding-md); 652 } 653 654 .center-div { 655 margin-inline: auto; 656 } 657 658 /* -------------------------------- 659 * 6.1. Modern Landing Page Components 660 * -------------------------------- */ 661 662 /* Hero Section */ 663 .hero-section { 664 max-width: 1200px; 665 margin: 0 auto; 666 padding: 4rem 2rem; 667 } 668 669 .hero-content { 670 display: flex; 671 align-items: center; 672 gap: 4rem; 673 min-height: 400px; 674 } 675 676 .hero-text { 677 flex: 1; 678 max-width: 600px; 679 } 680 681 .hero-text h1 { 682 font-size: 3.5rem; 683 font-weight: 300; 684 line-height: 1.1; 685 margin-bottom: 1.5rem; 686 color: var(--ifm-color-emphasis-hover); 687 } 688 689 .hero-text p { 690 font-size: 1.25rem; 691 line-height: 1.6; 692 color: var(--ifm-border-color); 693 margin-bottom: 2.5rem; 694 } 695 696 .hero-image { 697 flex: 1; 698 max-width: 500px; 699 display: flex; 700 justify-content: center; 701 align-items: center; 702 } 703 704 .hero-image img { 705 width: 100%; 706 height: auto; 707 border-radius: 12px; 708 box-shadow: var(--ifm-shadow-tile-hover); 709 } 710 711 /* Tiles Grid */ 712 .tiles-grid { 713 display: grid; 714 grid-template-columns: repeat(3, 1fr); 715 gap: 2rem; 716 max-width: 1200px; 717 margin: 0 auto; 718 padding: 2rem; 719 } 720 721 /* Responsive Design */ 722 @media (max-width: 996px) { 723 .hero-content { 724 flex-direction: column; 725 text-align: center; 726 gap: 2rem; 727 } 728 729 .hero-text h1 { 730 font-size: 2.5rem; 731 } 732 733 .tiles-grid { 734 grid-template-columns: repeat(2, 1fr); 735 gap: 1.5rem; 736 } 737 738 .why-content { 739 flex-direction: column; 740 gap: 2rem; 741 } 742 743 .value-prop-badge { 744 justify-content: center; 745 } 746 747 .feature-highlights { 748 grid-template-columns: 1fr; 749 gap: 1.5rem; 750 } 751 } 752 753 @media (max-width: 768px) { 754 .hero-section { 755 padding: 2rem 1rem; 756 } 757 758 .hero-text h1 { 759 font-size: 2rem; 760 } 761 762 .tiles-grid { 763 grid-template-columns: 1fr; 764 gap: 1rem; 765 padding: 1rem; 766 } 767 768 .tile-card { 769 padding: 1.5rem; 770 } 771 } 772 773 /* -------------------------------- 774 * 7. Image Styling 775 * -------------------------------- */ 776 777 /* Most of our images are PNGs with transparent 778 backgrounds so they look bad in dark mode */ 779 main img { 780 background-color: white; 781 } 782 783 /* We need to this class to limit image size using max-height. The class 784 must be applied to the wrapping div along with the desired max-height */ 785 .max-height-img-container { 786 display: flex; 787 } 788 789 .max-height-img-container > * { 790 display: flex; 791 justify-content: center; 792 } 793 794 .max-height-img-container img { 795 max-height: 100%; 796 width: auto; 797 } 798 799 /* -------------------------------- 800 * 7.1. Video Styling 801 * -------------------------------- */ 802 803 video { 804 border-radius: 12px; 805 border: 1px solid var(--ifm-color-gray-300); 806 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); 807 } 808 809 /* -------------------------------- 810 * 8. Accessibility 811 * -------------------------------- */ 812 813 /* This class is to be used in non-heading elements that contain a hash link reference. 814 In headlines Docusaurus adds this for us. */ 815 .anchor-with-sticky-navbar { 816 scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem); 817 } 818 819 /* -------------------------------- 820 * 9. Landing Page Specific Styles 821 * -------------------------------- */ 822 .homepage .megaHeading { 823 font-family: var(--ifm-font-family-base); 824 font-size: var(--font-size-h1); 825 font-weight: var(--font-weight-semibold); 826 line-height: var(--line-height-h1); 827 letter-spacing: -0.03em; /* -3% */ 828 } 829 830 /* -------------------------------- 831 * 10. Code Blocks & Syntax Highlighting 832 * -------------------------------- */ 833 834 /* Code blocks */ 835 .codeBlockContainer { 836 margin-bottom: 1.5rem; 837 } 838 839 .theme-code-block { 840 max-width: 100%; 841 min-width: 0; 842 } 843 844 /* Inline code */ 845 :not(pre) > code { 846 border-radius: 4px; 847 padding: 0.2em 0.4em; 848 font-size: 85%; 849 } 850 851 /* -------------------------------- 852 * 11. Table Styles 853 * -------------------------------- */ 854 855 table { 856 width: 100%; 857 margin-bottom: 1.5rem; 858 display: table; 859 border-collapse: separate; 860 border-spacing: 0; 861 } 862 863 th, 864 td { 865 padding: var(--padding-sm) var(--padding-md); 866 border: 1px solid var(--ifm-border-color); 867 } 868 869 th { 870 font-weight: var(--font-weight-semibold); 871 text-align: left; 872 } 873 874 /* -------------------------------- 875 * 12. Tabs Component 876 * -------------------------------- */ 877 878 .tabs { 879 margin-bottom: 1.5rem; 880 } 881 882 .tabs__item { 883 padding: var(--padding-sm) var(--padding-md); 884 border-radius: 0; 885 color: var(--ifm-border-color); 886 } 887 888 .tabs__item:hover { 889 color: var(--ifm-color-emphasis-hover); 890 background-color: transparent; 891 } 892 893 .tabs__item--active { 894 color: var(--ifm-color-emphasis-hover); 895 border-bottom: 2px solid var(--ifm-color-emphasis-hover); 896 } 897 898 [role='tabpanel'] { 899 padding-left: 1.5rem; 900 margin-top: 0.5rem; 901 margin-left: 0.5rem; 902 } 903 904 /* -------------------------------- 905 * 13. Admonitions (Callouts) 906 * -------------------------------- */ 907 908 .admonition { 909 margin-bottom: 1.5rem; 910 border-radius: 8px; 911 border-left: 8px solid; 912 box-shadow: var(--card-hover-shadow); 913 } 914 915 .admonition-heading { 916 font-weight: var(--font-weight-medium); 917 text-transform: uppercase; 918 letter-spacing: 0.05em; 919 } 920 921 .admonition-content { 922 color: inherit; 923 } 924 925 /* Add underline to admonition links for better visibility */ 926 .theme-admonition a { 927 text-decoration: underline; 928 } 929 930 .theme-admonition a:hover { 931 color: var(--ifm-color-emphasis-hover); 932 } 933 934 /* -------------------------------- 935 * 14. Footer 936 * -------------------------------- */ 937 938 .footer { 939 padding: 3rem 1rem; 940 } 941 942 .footer__title { 943 font-weight: var(--font-weight-medium); 944 margin-bottom: 1rem; 945 } 946 947 .footer__link-item { 948 color: var(--ifm-footer-link-color); 949 } 950 951 .footer__link-item:hover { 952 color: #ffffff; 953 text-decoration: none; 954 } 955 956 .footer__copyright { 957 margin-top: 2rem; 958 font-size: var(--font-size-body-s); 959 } 960 961 /* -------------------------------- 962 * 15. Documentation body 963 * -------------------------------- */ 964 [class*='docItemCol'] { 965 padding-inline: 2rem; 966 } 967 968 .col--3 { 969 padding-left: 0; 970 } 971 972 .theme-layout-main { 973 margin-left: auto; 974 margin-right: auto; 975 }