style.css (16963B)
1 /* ========================================================================== 2 GLOBAL / BASE 3 ========================================================================== */ 4 5 * { 6 -webkit-tap-highlight-color: transparent; 7 } 8 9 ::-webkit-scrollbar { 10 width: 8px; 11 height: 8px; 12 } 13 ::-webkit-scrollbar-track { 14 background: transparent; 15 } 16 ::-webkit-scrollbar-thumb { 17 background: var(--vp-c-divider); 18 border-radius: 4px; 19 } 20 ::-webkit-scrollbar-thumb:hover { 21 background: var(--vp-c-brand-1); 22 } 23 24 ::selection { 25 background: #fab38733; /* Mocha Peach with opacity */ 26 color: var(--vp-c-text-1); 27 } 28 29 30 /* ========================================================================== 31 THEME COLORS — LIGHT MODE (ported from vitepress-carbon) 32 ========================================================================== */ 33 34 :root { 35 /* Backgrounds */ 36 --vp-c-bg: #ffffff; 37 --vp-c-bg-alt: #f6f6f7; 38 --vp-c-bg-elv: #ffffff; 39 --vp-c-bg-soft: #f6f6f7; 40 --vp-c-divider: #d1d9e0; 41 --vp-c-b-divider: #1f2328; 42 43 /* GitHub's real sidebar matches the main canvas color — the divider line 44 does the separating, not a darker shade. Override so it doesn't 45 inherit the darker --vp-c-bg-alt (which GitHub reserves for insets). */ 46 --vp-sidebar-bg-color: var(--vp-c-bg); 47 48 /* Brand (GitHub-blue accent used by Carbon) */ 49 --vp-c-brand-1: #2f81f7; 50 --vp-c-brand-2: #1f6feb; 51 --vp-c-brand-3: #30a46c; /* Carbon's green-3, used for hero name + brand-3 refs */ 52 --vp-c-brand: #2f81f7; 53 --banner-bg: #2f81f7; 54 55 /* Primary buttons are GitHub-green in Carbon, not blue — links/sidebar stay blue */ 56 --vp-button-brand-border: rgba(31, 35, 40, 0.1); 57 --vp-button-brand-text: #ffffff; 58 --vp-button-brand-bg: #1f883d; 59 --vp-button-brand-hover-border: rgba(31, 35, 40, 0.1); 60 --vp-button-brand-hover-text: #ffffff; 61 --vp-button-brand-hover-bg: #1a7f37; 62 --vp-button-brand-active-border: rgba(31, 35, 40, 0.1); 63 --vp-button-brand-active-text: #ffffff; 64 --vp-button-brand-active-bg: #197935; 65 66 /* Homepage feature-card icons pick up the same green touch */ 67 --vp-home-card-icon-bg: rgba(16, 185, 129, 0.14); 68 --vp-home-card-icon-color: #3fb950; 69 --vp-home-card-border-hover-color: #2ea043; 70 71 --vp-home-hero-name-background: #30A46C; 72 --vp-home-hero-name-color: transparent; 73 74 /* DocSearch hit colors (light) */ 75 --docsearch-hit-color: #1f2328; 76 --docsearch-hit-active-color: #1f2328; 77 --docsearch-hit-background: #f6f6f7; 78 79 /* Semantic (Carbon/GitHub accents) */ 80 --vp-c-success: #3fb950; 81 --vp-c-warning: #9a6700; 82 --vp-c-danger: #d1242f; 83 --vp-c-info: #2f81f7; 84 85 /* Font */ 86 --vp-font-family-base: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 87 --vp-font-family-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', monospace; 88 } 89 90 91 /* ========================================================================== 92 THEME COLORS — DARK MODE (ported from vitepress-carbon) 93 ========================================================================== */ 94 95 .dark { 96 /* Backgrounds — softened from pure GitHub-dark: #010409 was near-black and 97 created a harsh jump against #0d1117. #0a0e14 keeps the same hierarchy 98 with less contrast shock, easier on the eyes over long reading. */ 99 --vp-c-bg: #0d1117; 100 --vp-c-bg-alt: #0a0e14; 101 --vp-c-bg-elv: #161b22; 102 103 /* Same GitHub-sidebar fix as light mode — match canvas, not the inset tone. */ 104 --vp-sidebar-bg-color: var(--vp-c-bg); 105 106 --vp-c-bg-soft: #161b22; 107 --vp-c-divider: #2a313a; 108 --vp-c-b-divider: #c9d1d9; 109 110 /* Body text: pure-white-on-black is high-fatigue; ease it slightly warm/soft. */ 111 --vp-c-text-1: #d8dee8; 112 --vp-c-text-2: #9aa4b2; 113 --vp-c-text-3: #6b7684; 114 115 /* Brand */ 116 --vp-c-brand-1: #58a6ff; 117 --vp-c-brand-2: #79c0ff; 118 --vp-c-brand-3: #3fb950; 119 --vp-c-brand: #58a6ff; 120 121 /* Primary buttons: Carbon uses the identical green in both modes, no dark variant */ 122 --vp-button-brand-border: rgba(240, 246, 252, 0.1); 123 --vp-button-brand-text: #ffffff; 124 --vp-button-brand-bg: #1f883d; 125 --vp-button-brand-hover-border: rgba(240, 246, 252, 0.1); 126 --vp-button-brand-hover-text: #ffffff; 127 --vp-button-brand-hover-bg: #1a7f37; 128 --vp-button-brand-active-border: rgba(240, 246, 252, 0.1); 129 --vp-button-brand-active-text: #ffffff; 130 --vp-button-brand-active-bg: #197935; 131 132 --vp-home-card-icon-bg: rgba(63, 185, 80, 0.12); 133 --vp-home-card-icon-color: #3fb950; 134 --vp-home-card-border-hover-color: #3fb950; 135 136 --vp-home-hero-name-background: #30A46C; 137 --vp-home-hero-name-color: transparent; 138 139 /* DocSearch hit colors (dark) */ 140 --docsearch-hit-color: #c9d1d9; 141 --docsearch-hit-active-color: #c9d1d9; 142 --docsearch-hit-background: #161b22; 143 --docsearch-modal-background: #0d1117 !important; 144 145 /* Semantic (Carbon/GitHub dark accents) */ 146 --vp-c-success: #3fb950; 147 --vp-c-warning: #f9b44e; 148 --vp-c-danger: #f66f81; 149 --vp-c-info: #58a6ff; 150 } 151 152 .dark ::-webkit-scrollbar-track { 153 background: var(--vp-c-bg-soft); 154 } 155 156 157 /* ========================================================================== 158 CUSTOM COMPONENTS — .bsc-* (file/problem cards, buttons) 159 ========================================================================== */ 160 161 .bsc-header { 162 margin-bottom: 1.4rem; 163 } 164 165 .bsc-header-top { 166 display: flex; 167 align-items: center; 168 gap: 10px; 169 margin-bottom: 12px; 170 } 171 172 .bsc-file-icon { 173 width: 36px; 174 height: 36px; 175 border-radius: 8px; 176 background-color: var(--vp-c-bg-soft); 177 border: 1px solid var(--vp-c-divider); 178 display: flex; 179 align-items: center; 180 justify-content: center; 181 flex-shrink: 0; 182 color: var(--vp-c-text-2); 183 } 184 185 .bsc-filename { 186 margin: 0 !important; 187 padding: 0 !important; 188 border: none !important; 189 font-size: 1.15rem !important; 190 font-weight: 500 !important; 191 line-height: 1.3 !important; 192 letter-spacing: 0 !important; 193 } 194 195 .bsc-filename code { 196 font-size: inherit !important; 197 background: none !important; 198 padding: 0 !important; 199 color: var(--vp-c-text-1) !important; 200 border-radius: 0 !important; 201 } 202 203 /* Metadata grid */ 204 .bsc-meta { 205 border-top: 1px solid var(--vp-c-divider); 206 padding-top: 10px; 207 display: grid; 208 grid-template-columns: 1fr 1fr; 209 gap: 6px 24px; 210 } 211 212 @media (max-width: 540px) { 213 .bsc-meta { 214 grid-template-columns: 1fr; 215 } 216 } 217 218 .bsc-meta-row { 219 display: flex; 220 align-items: center; 221 gap: 6px; 222 } 223 224 .bsc-meta-icon { 225 display: flex; 226 align-items: center; 227 color: var(--vp-c-text-3); 228 flex-shrink: 0; 229 } 230 231 .bsc-meta-key { 232 font-size: 11px; 233 color: var(--vp-c-text-3); 234 min-width: 46px; 235 } 236 237 .bsc-meta-val { 238 font-size: 12px; 239 font-weight: 500; 240 color: var(--vp-c-text-1); 241 } 242 243 .bsc-problem { 244 border-left: 3px solid var(--vp-c-brand-1); 245 border-radius: 0 8px 8px 0; 246 background-color: var(--vp-c-bg-soft); 247 padding: 10px 14px; 248 margin-bottom: 1.2rem; 249 } 250 251 .bsc-problem-label { 252 display: flex; 253 align-items: center; 254 gap: 5px; 255 font-size: 10px; 256 font-weight: 600; 257 letter-spacing: 0.06em; 258 text-transform: uppercase; 259 color: var(--vp-c-brand-1); 260 margin-bottom: 5px; 261 } 262 263 .bsc-problem p { 264 margin: 0; 265 font-size: 0.85rem; 266 line-height: 1.65; 267 color: var(--vp-c-text-1); 268 } 269 270 .bsc-actions { 271 display: flex; 272 gap: 8px; 273 flex-wrap: wrap; 274 margin-bottom: 1.4rem; 275 } 276 277 .bsc-btn { 278 display: inline-flex; 279 align-items: center; 280 gap: 6px; 281 padding: 7px 14px; 282 border-radius: 8px; 283 font-size: 0.82rem; 284 font-weight: 500; 285 font-family: inherit; 286 text-decoration: none !important; 287 cursor: pointer; 288 border: 1px solid var(--vp-c-divider); 289 background-color: var(--vp-c-bg); 290 color: var(--vp-c-text-1) !important; 291 transition: border-color 0.15s, background-color 0.15s; 292 -webkit-tap-highlight-color: transparent; 293 outline: none; 294 } 295 296 .bsc-btn:hover { 297 border-color: var(--vp-c-brand-1); 298 background-color: var(--vp-c-bg-soft); 299 color: var(--vp-c-text-1) !important; 300 } 301 302 .bsc-btn:active { 303 background-color: var(--vp-c-bg-mute); 304 } 305 306 .bsc-btn-primary { 307 background-color: var(--vp-c-brand-1); 308 border-color: var(--vp-c-brand-1); 309 color: var(--vp-c-white) !important; 310 } 311 312 .bsc-btn-primary:hover { 313 background-color: var(--vp-c-brand-2); 314 border-color: var(--vp-c-brand-2); 315 color: var(--vp-c-white) !important; 316 } 317 318 .bsc-btn-primary:active { 319 background-color: var(--vp-c-brand-3); 320 } 321 322 /* Dark mode: peach (#fab387) is too light for white text (~1.8:1 contrast). 323 Use near-black text instead for proper AA contrast (~13:1). */ 324 .dark .bsc-btn-primary, 325 .dark .bsc-btn-primary:hover { 326 color: var(--vp-c-bg-elv) !important; /* #11111b */ 327 } 328 329 330 /* ========================================================================== 331 VITEPRESS UI TWEAKS 332 ========================================================================== */ 333 334 .VPFeature:hover { 335 border-color: #2ea043 !important; 336 transition: border-color 0.2s; 337 } 338 339 .VPFeature .icon { 340 background-color: rgba(16, 185, 129, 0.14) !important; 341 color: #3fb950 !important; 342 } 343 344 .dark .VPFeature .icon { 345 background-color: rgba(63, 185, 80, 0.12) !important; 346 color: #3fb950 !important; 347 } 348 349 /* Hero action buttons: stock VitePress uses flex-wrap with content-width 350 buttons, which staggers into a jagged staircase on narrow screens when 351 labels are different lengths. Stack to one full-width button per row, 352 matching the default VitePress mobile behavior. */ 353 @media (max-width: 639px) { 354 .VPHero .actions { 355 flex-direction: column; 356 } 357 358 .VPHero .actions .action { 359 width: 100%; 360 padding: 6px 0; 361 } 362 363 .VPHero .actions .action .VPButton { 364 display: block; 365 width: 100%; 366 } 367 } 368 369 /* ========================================================================== 370 HOMEPAGE "WHY" SECTION (Carbon-style benefit grid) 371 ========================================================================== */ 372 373 .why-section { 374 max-width: 1152px; 375 margin: 0 auto; 376 padding: 64px 24px 16px; 377 } 378 379 @media (min-width: 640px) { 380 .why-section { padding: 64px 48px 16px; } 381 } 382 383 @media (min-width: 960px) { 384 .why-section { padding: 64px 64px 16px; } 385 } 386 387 .why-eyebrow { 388 color: var(--vp-c-brand-1); 389 font-size: 13px; 390 font-weight: 700; 391 letter-spacing: 0.06em; 392 text-transform: uppercase; 393 margin: 0 0 8px; 394 } 395 396 .why-title { 397 font-size: 28px; 398 font-weight: 700; 399 letter-spacing: -0.02em; 400 margin: 0 0 40px; 401 max-width: 640px; 402 } 403 404 .why-grid { 405 display: grid; 406 grid-template-columns: 1fr; 407 gap: 24px; 408 } 409 410 @media (min-width: 640px) { 411 .why-grid { grid-template-columns: repeat(2, 1fr); } 412 } 413 414 @media (min-width: 960px) { 415 .why-grid { grid-template-columns: repeat(3, 1fr); } 416 } 417 418 .why-card { 419 border: 1px solid var(--vp-c-divider); 420 border-radius: 12px; 421 padding: 24px; 422 background-color: var(--vp-c-bg-soft); 423 transition: border-color 0.2s; 424 } 425 426 .why-card:hover { 427 border-color: #2ea043; 428 } 429 430 .why-card h3 { 431 font-size: 16px; 432 font-weight: 600; 433 margin: 0 0 8px; 434 border: none; 435 padding: 0; 436 } 437 438 .why-card p { 439 font-size: 14px; 440 line-height: 24px; 441 color: var(--vp-c-text-2); 442 margin: 0; 443 } 444 445 446 @media (hover: none) and (pointer: coarse) { 447 .vp-doc [class*="language-"] > button.copy { 448 opacity: 1 !important; 449 } 450 } 451 452 /* ========================================================================== 453 ALGOLIA DOCSEARCH — RESULTS / HITS 454 ========================================================================== */ 455 456 .DocSearch-Dropdown { 457 padding-top: 0px !important; 458 } 459 460 .DocSearch-Input::placeholder { 461 font-size: 15px; 462 } 463 464 .DocSearch-Hit[aria-selected="true"] a { 465 background-color: var(--docsearch-hit-background) !important; 466 box-shadow: var(--docsearch-hit-shadow) !important; 467 color: var(--docsearch-hit-color) !important; 468 } 469 470 .DocSearch-Hit a:hover { 471 background-color: var(--vp-c-brand-soft) !important; 472 color: var(--vp-c-text-1) !important; 473 } 474 475 .DocSearch-Hit-title { 476 font-size: 14px !important; 477 } 478 .DocSearch-Hit-source { 479 font-size: 12px !important; 480 text-transform: uppercase; 481 letter-spacing: 0.5px; 482 } 483 .DocSearch-Hit-path { 484 font-size: 12px !important; 485 } 486 487 488 /* ========================================================================== 489 ALGOLIA DOCSEARCH — NO RESULTS SCREEN 490 ========================================================================== */ 491 492 .DocSearch-NoResults-Prefill-List { 493 display: none !important; 494 } 495 496 497 /* ========================================================================== 498 ALGOLIA DOCSEARCH — MOBILE LAYOUT (footer above dropdown, right-aligned) 499 ========================================================================== */ 500 501 @media (max-width: 767px) { 502 .DocSearch-Modal { 503 display: flex !important; 504 flex-direction: column !important; 505 } 506 507 .DocSearch-SearchBar { 508 order: 1 !important; 509 } 510 511 .DocSearch-Footer { 512 display: flex !important; 513 justify-content: flex-end !important; 514 align-items: center !important; 515 order: 2 !important; 516 position: static !important; 517 width: auto !important; 518 box-shadow: none !important; 519 border-top: none !important; 520 border-bottom: 1px solid var(--vp-c-divider) !important; 521 padding: 8px 16px !important; 522 } 523 524 .DocSearch-Dropdown { 525 order: 3 !important; 526 flex: 1 !important; 527 } 528 529 .DocSearch-Logo { 530 margin-left: auto !important; 531 } 532 } 533 534 .bsc-doc-toolbar { 535 display: flex; 536 align-items: center; 537 justify-content: space-between; 538 gap: 12px; 539 margin-bottom: 16px; 540 } 541 542 .bsc-doc-toolbar .bsc-breadcrumbs { 543 margin-bottom: 0; 544 flex: 1; 545 min-width: 0; 546 } 547 548 .VPNavBarSearchButton:focus, 549 .VPNavBarSearchButton:focus-visible, 550 .VPNavBarAskAiButton:focus, 551 .VPNavBarAskAiButton:focus-visible { 552 outline: none !important; 553 box-shadow: none !important; 554 } 555 556 /* Button-brand colors (green) and white button text are set directly in the 557 theme-color blocks above — no override needed, unlike the old peach brand 558 which couldn't carry white text at proper contrast. */ 559 560 /* ========================================================================== 561 FORCE FONT ON DOCSEARCH & AI MODALS 562 ========================================================================== */ 563 .DocSearch-Container, 564 .DocSearch-Container *, 565 .DocSearch-Modal, 566 .DocSearch-Modal * { 567 font-family: var(--vp-font-family-base) !important; 568 } 569 570 /* ========================================================================== 571 SEARCH BUTTON LOADING STATE 572 ========================================================================== */ 573 574 /* Hide the default icon when loading (search button uses .vpi-search, 575 Ask AI button uses .vpi-sparkles - VitePress's own icon classes, not 576 DocSearch's) */ 577 .VPNavBarSearchButton.is-loading .vpi-search, 578 .VPNavBarAskAiButton.is-loading .vpi-sparkles { 579 display: none !important; 580 } 581 582 /* Create the spinning animation */ 583 .VPNavBarSearchButton.is-loading::before, 584 .VPNavBarAskAiButton.is-loading::before { 585 content: ""; 586 display: inline-block; 587 width: 16px; 588 height: 16px; 589 border: 2px solid var(--vp-c-text-3); 590 border-top-color: var(--vp-c-brand-1); /* Uses the Peach color */ 591 border-radius: 50%; 592 animation: docsearch-spin 0.8s linear infinite; 593 margin-right: 8px; /* Spaces it exactly like the original icon */ 594 } 595 596 @keyframes docsearch-spin { 597 to { transform: rotate(360deg); } 598 } 599 600 /* ========================================================================== 601 FORCE FONT ON DOCSEARCH & ASK AI MODALS 602 ========================================================================== */ 603 .DocSearch-Portal * { 604 font-family: var(--vp-font-family-base) !important; 605 } 606 607 /* Fallback just in case standard container is used */ 608 .DocSearch-Container * { 609 font-family: var(--vp-font-family-base) !important; 610 } 611 612 /* ========================================================================== 613 CLOSING CTA SECTION (centered "Read the guide" style band) 614 ========================================================================== */ 615 616 .bsc-cta-section { 617 text-align: center; 618 max-width: 640px; 619 margin: 80px auto; 620 padding: 0 24px; 621 } 622 623 .bsc-cta-title { 624 font-size: 28px; 625 font-weight: 700; 626 letter-spacing: -0.02em; 627 margin: 0 0 12px; 628 border: none; 629 padding: 0; 630 } 631 632 .bsc-cta-subtitle { 633 font-size: 16px; 634 line-height: 1.6; 635 color: var(--vp-c-text-2); 636 margin: 0 0 28px; 637 } 638 639 .bsc-cta-actions { 640 display: flex; 641 justify-content: center; 642 gap: 12px; 643 flex-wrap: wrap; 644 } 645 646 .bsc-cta-btn { 647 display: inline-flex; 648 align-items: center; 649 padding: 10px 22px; 650 border-radius: 999px; 651 font-size: 14px; 652 font-weight: 600; 653 text-decoration: none !important; 654 border: 1px solid var(--vp-c-divider); 655 color: var(--vp-c-text-1) !important; 656 background-color: transparent; 657 transition: border-color 0.15s, background-color 0.15s; 658 } 659 660 .bsc-cta-btn:hover { 661 border-color: var(--vp-c-brand-1); 662 background-color: var(--vp-c-bg-soft); 663 } 664 665 .bsc-cta-btn-brand { 666 background-color: var(--vp-button-brand-bg); 667 border-color: var(--vp-button-brand-bg); 668 color: #ffffff !important; 669 } 670 671 .bsc-cta-btn-brand:hover { 672 background-color: var(--vp-button-brand-hover-bg); 673 border-color: var(--vp-button-brand-hover-bg); 674 }