demo.css (11786B)
1 @charset "UTF-8"; 2 @import url(theme.css); 3 4 * { 5 box-sizing: border-box; 6 } 7 8 html { 9 min-width: 18rem; 10 background: var(--taler-background); 11 color: var(--taler-on-background); 12 font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 13 font-synthesis: none; 14 } 15 16 body { 17 min-height: 100vh; 18 margin: 0; 19 display: flex; 20 flex-direction: column; 21 overflow-x: hidden; 22 background: var(--taler-background); 23 line-height: 1.55; 24 } 25 26 button, 27 input, 28 select { 29 font: inherit; 30 } 31 32 a { 33 color: var(--demo-accent); 34 text-decoration-thickness: 0.07em; 35 text-underline-offset: 0.14em; 36 } 37 38 a:hover { 39 color: var(--demo-accent-hover); 40 } 41 42 a:focus-visible, 43 button:focus-visible, 44 input:focus-visible, 45 select:focus-visible { 46 outline: 0.18rem solid var(--focus-ring); 47 outline-offset: 0.14rem; 48 } 49 50 h1, 51 h2, 52 h3 { 53 margin-block: 1.5em 0.55em; 54 color: var(--taler-on-background); 55 line-height: 1.2; 56 } 57 58 h1 { 59 font-size: clamp(1.85rem, 4vw, 2.4rem); 60 font-weight: 680; 61 letter-spacing: -0.025em; 62 } 63 64 h2 { 65 font-size: clamp(1.35rem, 2.5vw, 1.65rem); 66 font-weight: 680; 67 letter-spacing: -0.015em; 68 } 69 70 h3 { 71 font-size: 1.1rem; 72 font-weight: 680; 73 } 74 75 p, 76 ul, 77 ol { 78 margin-block: 0 1rem; 79 } 80 81 p + p { 82 margin-top: 1.15rem; 83 } 84 85 hr { 86 margin: 2.25rem 0; 87 border: 0; 88 border-top: 1px solid var(--taler-outline-variant); 89 } 90 91 pre { 92 max-width: 100%; 93 padding: 0.9rem; 94 overflow: auto; 95 border: 1px solid var(--taler-outline-variant); 96 border-radius: 0.2rem; 97 background: var(--taler-surface-muted); 98 white-space: pre-wrap; 99 overflow-wrap: anywhere; 100 } 101 102 .skip-link { 103 position: fixed; 104 z-index: 1000; 105 top: 0.5rem; 106 left: 0.5rem; 107 padding: 0.55rem 0.75rem; 108 background: var(--taler-on-background); 109 color: var(--taler-background); 110 font-weight: 650; 111 transform: translateY(-160%); 112 } 113 114 .skip-link:focus { 115 color: var(--taler-background); 116 transform: translateY(0); 117 } 118 119 .site-header { 120 border-top: 0.2rem solid var(--demo-accent); 121 background: var(--demo-accent-soft); 122 } 123 124 .header-inner, 125 .nav-inner, 126 .content, 127 .footer-inner { 128 width: min(68rem, calc(100% - 2rem)); 129 margin-inline: auto; 130 } 131 132 .header-inner { 133 min-height: 6.25rem; 134 display: flex; 135 align-items: center; 136 padding-block: 1rem; 137 } 138 139 .heading-lockup { 140 min-width: 0; 141 display: flex; 142 align-items: center; 143 gap: 1.5rem; 144 } 145 146 .demo-heading { 147 min-width: 0; 148 } 149 150 .demo-heading h1 { 151 margin: 0; 152 font-size: clamp(1.55rem, 3vw, 2rem); 153 font-weight: 680; 154 } 155 156 .demo-heading h1 a { 157 color: inherit; 158 text-decoration: none; 159 } 160 161 .demo-heading p { 162 max-width: 48rem; 163 margin: 0.25rem 0 0; 164 color: var(--taler-secondary); 165 font-size: 0.95rem; 166 } 167 168 .taler-brand { 169 flex: 0 0 auto; 170 display: inline-flex; 171 align-items: center; 172 } 173 174 .taler-brand img { 175 display: block; 176 width: clamp(5.25rem, 9vw, 6.25rem); 177 height: auto; 178 } 179 180 .nav-shell { 181 position: sticky; 182 z-index: 30; 183 top: 0; 184 border-bottom: 1px solid var(--taler-outline-variant); 185 background: var(--demo-accent-soft); 186 } 187 188 .nav-inner { 189 min-height: 3.15rem; 190 display: flex; 191 align-items: stretch; 192 justify-content: space-between; 193 gap: 1rem; 194 } 195 196 .demo-nav { 197 display: flex; 198 align-items: stretch; 199 gap: 1.4rem; 200 } 201 202 .demo-nav a, 203 .language-button, 204 .language-menu a { 205 min-height: 2.75rem; 206 display: inline-flex; 207 align-items: center; 208 justify-content: center; 209 padding: 0; 210 border: 0; 211 color: var(--taler-on-background); 212 background: transparent; 213 font-weight: 600; 214 text-decoration: none; 215 cursor: pointer; 216 } 217 218 .demo-nav a { 219 border-bottom: 0.15rem solid transparent; 220 } 221 222 .demo-nav .link-icon { 223 width: 0.82rem; 224 height: 0.82rem; 225 flex: 0 0 auto; 226 margin-left: 0.4rem; 227 fill: currentColor; 228 stroke: currentColor; 229 stroke-width: 0.5; 230 stroke-linejoin: round; 231 paint-order: stroke fill; 232 } 233 234 .demo-nav a:hover, 235 .language-button:hover, 236 .language-menu a:hover { 237 color: var(--demo-accent); 238 } 239 240 .demo-nav a.active { 241 border-bottom-color: var(--demo-accent); 242 color: var(--demo-accent); 243 } 244 245 .language-switcher { 246 position: relative; 247 display: flex; 248 align-items: center; 249 } 250 251 .language-button::after { 252 content: ""; 253 width: 0.4rem; 254 height: 0.4rem; 255 margin: -0.2rem 0 0 0.5rem; 256 border-right: 0.1rem solid currentColor; 257 border-bottom: 0.1rem solid currentColor; 258 transform: rotate(45deg); 259 } 260 261 .language-button[aria-expanded="true"]::after { 262 margin-top: 0.2rem; 263 transform: rotate(225deg); 264 } 265 266 .language-menu { 267 position: absolute; 268 z-index: 20; 269 top: calc(100% - 0.1rem); 270 right: 0; 271 width: 9.5rem; 272 max-width: calc(100vw - 2rem); 273 max-height: min(60vh, 24rem); 274 padding: 0.3rem 0; 275 overflow-y: auto; 276 border: 1px solid var(--taler-outline-variant); 277 border-radius: 0.2rem; 278 background: var(--taler-surface); 279 box-shadow: 0 0.4rem 1.2rem rgb(0 0 0 / 14%); 280 } 281 282 .language-menu[hidden] { 283 display: none; 284 } 285 286 .language-menu a { 287 display: flex; 288 min-height: 2.4rem; 289 justify-content: flex-start; 290 padding-inline: 0.75rem; 291 } 292 293 .content { 294 flex: 1; 295 padding-block: clamp(2.25rem, 5vw, 3.75rem); 296 scroll-margin-top: 3.5rem; 297 } 298 299 .content > :first-child, 300 .content > article:first-child > :first-child { 301 margin-top: 0; 302 } 303 304 .page-intro { 305 max-width: 47rem; 306 margin-bottom: 2.25rem; 307 } 308 309 .page-intro h1, 310 .page-intro h2 { 311 margin-bottom: 0.8rem; 312 } 313 314 .page-intro > :first-child { 315 margin-top: 0; 316 } 317 318 .page-intro p { 319 color: var(--taler-secondary); 320 } 321 322 .step-list, 323 .article-list { 324 display: block; 325 } 326 327 .step-card { 328 max-width: 54rem; 329 padding-block: 2rem; 330 border-top: 1px solid var(--taler-outline-variant); 331 } 332 333 .step-card:first-child { 334 padding-top: 0; 335 border-top: 0; 336 } 337 338 .step-card h2, 339 .article-card h3, 340 .status-card h1, 341 .status-card h2, 342 .error-card h1 { 343 margin-top: 0; 344 } 345 346 .step-card h2 { 347 color: var(--demo-accent); 348 } 349 350 .step-card p:last-child, 351 .article-card p:last-child, 352 .status-card p:last-child, 353 .error-card p:last-child { 354 margin-bottom: 0; 355 } 356 357 .form-card, 358 .checkout-card, 359 .status-card, 360 .error-card { 361 padding: clamp(1.15rem, 3vw, 1.6rem); 362 border: 1px solid var(--taler-outline-variant); 363 border-radius: 0.25rem; 364 background: var(--taler-surface); 365 } 366 367 .form-card, 368 .checkout-card { 369 max-width: 54rem; 370 } 371 372 .checkout-card { 373 margin-inline: auto; 374 } 375 376 .helper-text { 377 color: var(--taler-secondary); 378 font-size: 0.95rem; 379 } 380 381 .action-row + .helper-text { 382 margin-top: 1.15rem; 383 } 384 385 .notice, 386 .informational-ok, 387 .informational-fail { 388 max-width: 54rem; 389 margin-block: 1.75rem; 390 padding: 1rem 1.1rem; 391 border: 1px solid var(--taler-outline); 392 border-radius: 0.2rem; 393 color: var(--taler-on-background); 394 } 395 396 .notice > strong:first-child { 397 display: block; 398 margin-bottom: 0.35rem; 399 } 400 401 .notice > :last-child { 402 margin-bottom: 0; 403 } 404 405 .notice-warning { 406 border-color: var(--taler-warning); 407 background: var(--taler-warning-container); 408 color: var(--taler-on-warning-container); 409 } 410 411 .informational-ok { 412 border-color: var(--taler-success); 413 background: var(--taler-success-container); 414 color: var(--taler-on-success-container); 415 } 416 417 .informational-fail { 418 border-color: var(--taler-error); 419 background: var(--taler-error-container); 420 color: var(--taler-on-error-container); 421 } 422 423 .demo-form { 424 display: grid; 425 gap: 1rem; 426 } 427 428 .form-grid { 429 display: grid; 430 grid-template-columns: repeat(3, minmax(0, 1fr)); 431 gap: 0.9rem; 432 } 433 434 .form-field { 435 display: grid; 436 gap: 0.3rem; 437 color: var(--taler-secondary); 438 font-size: 0.88rem; 439 font-weight: 650; 440 } 441 442 input[type="text"], 443 select { 444 width: 100%; 445 min-height: 2.7rem; 446 padding: 0.55rem 0.65rem; 447 border: 1px solid var(--taler-outline); 448 border-radius: 0.2rem; 449 background: var(--taler-background); 450 color: var(--taler-on-background); 451 font-weight: 450; 452 } 453 454 .button, 455 button[type="submit"], 456 input[type="submit"] { 457 width: fit-content; 458 min-height: 2.75rem; 459 display: inline-flex; 460 align-items: center; 461 justify-content: center; 462 padding: 0.6rem 1rem; 463 border: 2px solid var(--demo-accent); 464 border-radius: 0.7rem; 465 background: var(--demo-accent); 466 color: var(--demo-on-accent); 467 font-weight: 650; 468 line-height: 1.2; 469 text-decoration: none; 470 cursor: pointer; 471 } 472 473 .button-secondary { 474 background: transparent; 475 color: var(--demo-accent); 476 } 477 478 .button:hover, 479 button[type="submit"]:hover, 480 input[type="submit"]:hover { 481 border-color: var(--demo-accent-hover); 482 background: var(--demo-accent-hover); 483 color: var(--demo-on-accent); 484 } 485 486 .button-secondary:hover { 487 border-color: var(--demo-accent-hover); 488 background: var(--demo-accent-soft); 489 color: var(--demo-accent-hover); 490 } 491 492 .action-row { 493 display: flex; 494 flex-wrap: wrap; 495 align-items: center; 496 gap: 0.7rem; 497 margin-top: 1.25rem; 498 } 499 500 .action-row .link-icon { 501 width: 0.95rem; 502 height: 0.95rem; 503 margin-left: 0.55rem; 504 fill: currentColor; 505 stroke: none; 506 } 507 508 .demo-landing .action-row .link-icon { 509 stroke: currentColor; 510 stroke-width: 0.5; 511 stroke-linejoin: round; 512 paint-order: stroke fill; 513 } 514 515 .payment-options { 516 display: grid; 517 margin-block: 1.25rem; 518 border-top: 1px solid var(--taler-outline-variant); 519 } 520 521 .payment-option { 522 min-height: 3.25rem; 523 display: flex; 524 align-items: center; 525 gap: 0.7rem; 526 padding: 0.65rem 0.75rem; 527 border-bottom: 1px solid var(--taler-outline-variant); 528 background: transparent; 529 cursor: pointer; 530 } 531 532 .payment-option:hover { 533 background: var(--demo-accent-soft); 534 } 535 536 .payment-option:has(input:checked) { 537 background: var(--demo-accent-container); 538 color: var(--demo-on-accent-container); 539 } 540 541 .payment-option input { 542 width: 1.05rem; 543 height: 1.05rem; 544 margin: 0; 545 accent-color: var(--demo-accent); 546 } 547 548 .payment-option span { 549 font-weight: 600; 550 } 551 552 .status-card, 553 .error-card { 554 max-width: 48rem; 555 margin-inline: auto; 556 } 557 558 .status-card .action-row, 559 .error-card .action-row { 560 margin-top: 1.5rem; 561 } 562 563 .status-mark { 564 margin-bottom: 0.5rem; 565 color: var(--taler-success); 566 font-size: 1.5rem; 567 font-weight: 750; 568 line-height: 1; 569 } 570 571 .error-card { 572 border-color: var(--taler-error); 573 } 574 575 .copy-status { 576 margin-top: 0.85rem; 577 color: var(--taler-success); 578 font-size: 0.9rem; 579 font-weight: 600; 580 } 581 582 .copy-status[hidden] { 583 display: none; 584 } 585 586 .tt, 587 tt { 588 font-family: "Lucida Console", Monaco, monospace; 589 } 590 591 .site-footer { 592 margin-top: auto; 593 border-top: 1px solid var(--taler-outline-variant); 594 } 595 596 .footer-inner { 597 min-height: 4.25rem; 598 display: flex; 599 flex-wrap: wrap; 600 align-items: center; 601 justify-content: space-between; 602 gap: 0.5rem 1.25rem; 603 padding-block: 1rem; 604 color: var(--taler-secondary); 605 font-size: 0.82rem; 606 } 607 608 .footer-inner p { 609 margin: 0; 610 } 611 612 .footer-inner a { 613 color: inherit; 614 } 615 616 @media (max-width: 48rem) { 617 .header-inner { 618 min-height: 5.4rem; 619 } 620 621 .demo-heading p { 622 font-size: 0.88rem; 623 } 624 625 .nav-inner { 626 align-items: flex-start; 627 gap: 0.25rem; 628 padding-block: 0.15rem; 629 } 630 631 .content { 632 scroll-margin-top: 5rem; 633 } 634 635 .demo-nav { 636 min-width: 0; 637 flex: 1; 638 display: grid; 639 grid-template-columns: repeat(2, minmax(0, 1fr)); 640 gap: 0 1rem; 641 } 642 643 .demo-nav a { 644 min-height: 2.25rem; 645 justify-content: flex-start; 646 font-size: 0.9rem; 647 } 648 649 .language-button { 650 width: 2.5rem; 651 min-height: 2.25rem; 652 overflow: hidden; 653 color: var(--taler-on-background); 654 font-size: 0; 655 white-space: nowrap; 656 } 657 658 .language-button::before { 659 content: "文"; 660 font-size: 1rem; 661 } 662 663 .language-button::after { 664 display: none; 665 } 666 667 .form-grid { 668 grid-template-columns: 1fr; 669 } 670 671 .footer-inner { 672 align-items: flex-start; 673 flex-direction: column; 674 } 675 } 676 677 @media (max-width: 34rem) { 678 .header-inner { 679 min-height: 4.8rem; 680 } 681 682 .heading-lockup { 683 gap: 1rem; 684 } 685 686 .demo-heading h1 { 687 font-size: 1.4rem; 688 } 689 690 .demo-heading p { 691 display: none; 692 } 693 694 .taler-brand img { 695 width: 4.75rem; 696 } 697 698 .content { 699 padding-block: 2rem; 700 } 701 702 .checkout-card input[type="submit"] { 703 width: 100%; 704 } 705 }