|
62 | 62 | --ifm-color-success: #34C263; |
63 | 63 | --ifm-color-success-dark: #27914A; |
64 | 64 | --ifm-button-background-color: #5851DB; |
| 65 | + /* Infima defaults this to `transparent` (relying on the browser's white |
| 66 | + canvas). An explicit opaque value is needed so that sticky elements |
| 67 | + like search-page controls can hide content scrolling behind them. */ |
| 68 | + --ifm-background-color: #fff; |
65 | 69 | } |
66 | 70 |
|
67 | 71 | .table-of-contents { |
@@ -382,8 +386,102 @@ html { |
382 | 386 | position: relative; |
383 | 387 | } |
384 | 388 |
|
385 | | -/* Responsive improvements */ |
| 389 | +/* Transfer the search-area visual chrome (background, bottom border, top radius) |
| 390 | + from .DocSearch-Form to .DocSearch-SearchBar now that our custom controls are |
| 391 | + siblings of the form rather than children of it. */ |
| 392 | +.DocSearch-SearchBar { |
| 393 | + background: var(--docsearch-searchbox-focus-background); |
| 394 | + border-bottom: 1px solid var(--docsearch-subtle-color); |
| 395 | + border-radius: 4px 4px 0 0; |
| 396 | + align-items: center; |
| 397 | +} |
| 398 | + |
| 399 | +/* Fix .DocSearch-Title — the library sets line-height: 0.5em which causes |
| 400 | + wrapped lines to overlap, and no word-break so long queries overflow horizontally. */ |
| 401 | +.DocSearch-Title { |
| 402 | + line-height: 1.4 !important; |
| 403 | + white-space: normal !important; |
| 404 | + word-break: break-word; |
| 405 | + overflow-wrap: break-word; |
| 406 | +} |
| 407 | + |
| 408 | +/* Hide the "close the query" text label — keep only the × icon. |
| 409 | + !important is needed because DocSearch styles are dynamically imported |
| 410 | + after our CSS, so they would otherwise win the cascade. */ |
| 411 | +.DocSearch-Clear { |
| 412 | + font-size: 0 !important; |
| 413 | +} |
| 414 | + |
| 415 | +/* Strip the duplicate chrome from the form itself. |
| 416 | + width: auto !important overrides DocSearch's dynamically-loaded width: 100%, |
| 417 | + which would otherwise force the form to consume the entire first flex row and |
| 418 | + push the × button onto its own line on mobile. */ |
| 419 | +.DocSearch-Form { |
| 420 | + flex: 1 1 auto; |
| 421 | + width: auto !important; |
| 422 | + background: transparent; |
| 423 | + border-block-end: none !important; |
| 424 | + border-radius: 0; |
| 425 | +} |
| 426 | + |
| 427 | +/* Hide the DocSearch-owned close button — we render our own in the portal so |
| 428 | + we never mutate React-owned DOM nodes (which causes reconciliation crashes). */ |
| 429 | +.DocSearch-Close { |
| 430 | + display: none !important; |
| 431 | +} |
| 432 | + |
| 433 | +/* Custom controls (Typo Tolerance toggle + product filter) portaled into the search bar. */ |
| 434 | +.search-custom-controls { |
| 435 | + display: flex; |
| 436 | + align-items: center; |
| 437 | + gap: 8px; |
| 438 | + margin-right: 8px; |
| 439 | +} |
| 440 | + |
| 441 | +/* Our replacement close button rendered inside the portal. */ |
| 442 | +.search-modal-close { |
| 443 | + display: flex; |
| 444 | + align-items: center; |
| 445 | + justify-content: center; |
| 446 | + flex-shrink: 0; |
| 447 | + background: none; |
| 448 | + border: none; |
| 449 | + cursor: pointer; |
| 450 | + color: var(--docsearch-muted-color); |
| 451 | + padding: 0; |
| 452 | + margin: 0 16px 0 8px; |
| 453 | +} |
| 454 | +.search-modal-close:hover { |
| 455 | + color: var(--docsearch-text-color); |
| 456 | +} |
| 457 | +[data-theme='dark'] .search-modal-close { |
| 458 | + color: white; |
| 459 | +} |
| 460 | + |
| 461 | +/* On mobile, wrap the custom controls onto their own row below the search input, |
| 462 | + but keep the × button on the first row (upper-right corner). */ |
386 | 463 | @media (max-width: 768px) { |
| 464 | + .DocSearch-SearchBar { |
| 465 | + flex-wrap: wrap; |
| 466 | + } |
| 467 | + |
| 468 | + .DocSearch-Form { |
| 469 | + order: 1; |
| 470 | + } |
| 471 | + |
| 472 | + .search-modal-close { |
| 473 | + order: 2; |
| 474 | + margin: 0 16px 0 8px; |
| 475 | + } |
| 476 | + |
| 477 | + .search-custom-controls { |
| 478 | + order: 3; |
| 479 | + flex: 0 0 100%; |
| 480 | + margin-right: 0; |
| 481 | + padding: 6px 16px 8px; |
| 482 | + border-bottom: 1px solid var(--docsearch-subtle-color); |
| 483 | + } |
| 484 | + |
387 | 485 | .DocSearch-Button-Keys { |
388 | 486 | display: none; |
389 | 487 | } |
|
0 commit comments