chore: updated css variables
3d63fb08
3 file(s) · +47 −47
| 403 | 403 | this.shadowRoot.innerHTML = ` |
|
| 404 | 404 | <style> |
|
| 405 | 405 | :host { |
|
| 406 | - | --color-background: ${background}; |
|
| 407 | - | --color-foreground: ${foreground}; |
|
| 408 | - | --color-primary: ${primary}; |
|
| 409 | - | --color-secondary: ${secondary}; |
|
| 410 | - | --border-radius: ${borderRadius}; |
|
| 411 | - | --bg-color: ${this.connected ? "var(--color-background)" : "var(--color-primary)"}; |
|
| 412 | - | --bg-hover-color: ${this.connected ? "var(--color-background)" : "var(--color-secondary)"}; |
|
| 406 | + | --norns-color-background: ${background}; |
|
| 407 | + | --norns-color-foreground: ${foreground}; |
|
| 408 | + | --norns-color-primary: ${primary}; |
|
| 409 | + | --norns-color-secondary: ${secondary}; |
|
| 410 | + | --norns-border-radius: ${borderRadius}; |
|
| 411 | + | --norns-bg-color: ${this.connected ? "var(--norns-color-background)" : "var(--norns-color-primary)"}; |
|
| 412 | + | --norns-bg-hover-color: ${this.connected ? "var(--norns-color-background)" : "var(--norns-color-secondary)"}; |
|
| 413 | 413 | display: inline-block; |
|
| 414 | 414 | } |
|
| 415 | 415 | ||
| 416 | 416 | button { |
|
| 417 | 417 | padding: 10px 20px; |
|
| 418 | - | background: var(--bg-color); |
|
| 419 | - | color: var(--color-foreground); |
|
| 418 | + | background: var(--norns-bg-color); |
|
| 419 | + | color: var(--norns-color-foreground); |
|
| 420 | 420 | border: none; |
|
| 421 | - | border-radius: var(--border-radius); |
|
| 421 | + | border-radius: var(--norns-border-radius); |
|
| 422 | 422 | cursor: pointer; |
|
| 423 | 423 | font-size: 16px; |
|
| 424 | 424 | transition: background-color 0.3s ease; |
|
| 425 | 425 | } |
|
| 426 | 426 | ||
| 427 | 427 | button:hover { |
|
| 428 | - | background: var(--bg-hover-color); |
|
| 428 | + | background: var(--norns-bg-hover-color); |
|
| 429 | 429 | } |
|
| 430 | 430 | ||
| 431 | 431 | button:disabled { |
|
| 444 | 444 | align-items: center; |
|
| 445 | 445 | gap: 8px; |
|
| 446 | 446 | padding: 10px 20px; |
|
| 447 | - | background: var(--bg-color); |
|
| 448 | - | border-radius: var(--border-radius); |
|
| 449 | - | color: var(--color-foreground); |
|
| 447 | + | background: var(--norns-bg-color); |
|
| 448 | + | border-radius: var(--norns-border-radius); |
|
| 449 | + | color: var(--norns-color-foreground); |
|
| 450 | 450 | min-width: auto; |
|
| 451 | 451 | transition: background-color 0.3s ease; |
|
| 452 | 452 | cursor: pointer; |
|
| 453 | 453 | } |
|
| 454 | 454 | ||
| 455 | 455 | .profile:hover { |
|
| 456 | - | background: var(--bg-hover-color); |
|
| 456 | + | background: var(--norns-bg-hover-color); |
|
| 457 | 457 | } |
|
| 458 | 458 | ||
| 459 | 459 | .popover { |
|
| 461 | 461 | top: 100%; |
|
| 462 | 462 | left: 0; |
|
| 463 | 463 | right: 0; |
|
| 464 | - | background: var(--bg-color); |
|
| 464 | + | background: var(--norns-bg-color); |
|
| 465 | 465 | border: 1px solid rgba(255, 255, 255, 0.1); |
|
| 466 | - | border-radius: var(--border-radius); |
|
| 466 | + | border-radius: var(--norns-border-radius); |
|
| 467 | 467 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); |
|
| 468 | 468 | z-index: 1000; |
|
| 469 | 469 | margin-top: 4px; |
|
| 476 | 476 | gap: 8px; |
|
| 477 | 477 | width: 100%; |
|
| 478 | 478 | padding: 10px 16px; |
|
| 479 | - | background: var(--bg-color); |
|
| 479 | + | background: var(--norns-bg-color); |
|
| 480 | 480 | border: none; |
|
| 481 | - | color: var(--color-foreground); |
|
| 481 | + | color: var(--norns-color-foreground); |
|
| 482 | 482 | font-size: 14px; |
|
| 483 | 483 | cursor: pointer; |
|
| 484 | 484 | transition: background-color 0.2s ease; |
|
| 485 | 485 | } |
|
| 486 | 486 | ||
| 487 | 487 | .popover-button:hover { |
|
| 488 | - | background: var(--bg-hover-color); |
|
| 488 | + | background: var(--norns-bg-hover-color); |
|
| 489 | 489 | } |
|
| 490 | 490 | ||
| 491 | 491 | .popover-button:not(:last-child) { |
|
| 507 | 507 | width: 32px; |
|
| 508 | 508 | height: 32px; |
|
| 509 | 509 | border-radius: 50%; |
|
| 510 | - | background: linear-gradient(45deg, var(--color-primary), var(--color-secondary)); |
|
| 510 | + | background: linear-gradient(45deg, var(--norns-color-primary), var(--norns-color-secondary)); |
|
| 511 | 511 | display: flex; |
|
| 512 | 512 | align-items: center; |
|
| 513 | 513 | justify-content: center; |
|
| 514 | - | color: var(--color-foreground); |
|
| 514 | + | color: var(--norns-color-foreground); |
|
| 515 | 515 | font-weight: bold; |
|
| 516 | 516 | font-size: 12px; |
|
| 517 | 517 | } |
|
| 550 | 550 | width: 16px; |
|
| 551 | 551 | height: 16px; |
|
| 552 | 552 | border: 2px solid rgba(255, 255, 255, 0.3); |
|
| 553 | - | border-top: 2px solid var(--color-foreground); |
|
| 553 | + | border-top: 2px solid var(--norns-color-foreground); |
|
| 554 | 554 | border-radius: 50%; |
|
| 555 | 555 | animation: spin 1s linear infinite; |
|
| 556 | 556 | } |
|
| 518 | 518 | this.shadowRoot.innerHTML = ` |
|
| 519 | 519 | <style> |
|
| 520 | 520 | :host { |
|
| 521 | - | --color-background: ${background}; |
|
| 522 | - | --color-foreground: ${foreground}; |
|
| 523 | - | --color-primary: ${primary}; |
|
| 524 | - | --color-secondary: ${secondary}; |
|
| 525 | - | --border-radius: ${borderRadius}; |
|
| 521 | + | --norns-color-background: ${background}; |
|
| 522 | + | --norns-color-foreground: ${foreground}; |
|
| 523 | + | --norns-color-primary: ${primary}; |
|
| 524 | + | --norns-color-secondary: ${secondary}; |
|
| 525 | + | --norns-border-radius: ${borderRadius}; |
|
| 526 | 526 | display: inline-block; |
|
| 527 | 527 | font-family: sans-serif; |
|
| 528 | 528 | } |
|
| 532 | 532 | flex-direction: column; |
|
| 533 | 533 | gap: 12px; |
|
| 534 | 534 | padding: 16px; |
|
| 535 | - | background: var(--color-background); |
|
| 535 | + | background: var(--norns-color-background); |
|
| 536 | 536 | border: 1px solid rgba(255, 255, 255, 0.1); |
|
| 537 | - | border-radius: var(--border-radius); |
|
| 538 | - | color: var(--color-foreground); |
|
| 537 | + | border-radius: var(--norns-border-radius); |
|
| 538 | + | color: var(--norns-color-foreground); |
|
| 539 | 539 | width: 320px; |
|
| 540 | 540 | box-sizing: border-box; |
|
| 541 | 541 | } |
|
| 594 | 594 | ||
| 595 | 595 | button { |
|
| 596 | 596 | padding: 12px 20px; |
|
| 597 | - | background: var(--color-primary); |
|
| 598 | - | color: var(--color-foreground); |
|
| 597 | + | background: var(--norns-color-primary); |
|
| 598 | + | color: var(--norns-color-foreground); |
|
| 599 | 599 | border: none; |
|
| 600 | - | border-radius: var(--border-radius); |
|
| 600 | + | border-radius: var(--norns-border-radius); |
|
| 601 | 601 | cursor: pointer; |
|
| 602 | 602 | font-size: 16px; |
|
| 603 | 603 | transition: background-color 0.3s ease; |
|
| 604 | 604 | } |
|
| 605 | 605 | ||
| 606 | 606 | button:hover:not(:disabled) { |
|
| 607 | - | background: var(--color-secondary); |
|
| 607 | + | background: var(--norns-color-secondary); |
|
| 608 | 608 | } |
|
| 609 | 609 | ||
| 610 | 610 | button:disabled { |
|
| 613 | 613 | } |
|
| 614 | 614 | ||
| 615 | 615 | .status { |
|
| 616 | - | border-radius: calc(var(--border-radius) / 2); |
|
| 616 | + | border-radius: calc(var(--norns-border-radius) / 2); |
|
| 617 | 617 | font-size: 12px; |
|
| 618 | 618 | font-family: monospace; |
|
| 619 | 619 | word-break: break-all; |
|
| 634 | 634 | width: 16px; |
|
| 635 | 635 | height: 16px; |
|
| 636 | 636 | border: 2px solid rgba(255, 255, 255, 0.3); |
|
| 637 | - | border-top: 2px solid var(--color-foreground); |
|
| 637 | + | border-top: 2px solid var(--norns-color-foreground); |
|
| 638 | 638 | border-radius: 50%; |
|
| 639 | 639 | animation: spin 1s linear infinite; |
|
| 640 | 640 | } |
|
| 516 | 516 | this.shadowRoot.innerHTML = ` |
|
| 517 | 517 | <style> |
|
| 518 | 518 | :host { |
|
| 519 | - | --color-background: ${background}; |
|
| 520 | - | --color-foreground: ${foreground}; |
|
| 521 | - | --color-primary: ${primary}; |
|
| 522 | - | --border-radius: ${borderRadius}; |
|
| 519 | + | --norns-color-background: ${background}; |
|
| 520 | + | --norns-color-foreground: ${foreground}; |
|
| 521 | + | --norns-color-primary: ${primary}; |
|
| 522 | + | --norns-border-radius: ${borderRadius}; |
|
| 523 | 523 | display: inline-block; |
|
| 524 | 524 | font-family: sans-serif; |
|
| 525 | 525 | } |
|
| 529 | 529 | flex-direction: column; |
|
| 530 | 530 | gap: 12px; |
|
| 531 | 531 | padding: 16px; |
|
| 532 | - | background: var(--color-background); |
|
| 532 | + | background: var(--norns-color-background); |
|
| 533 | 533 | border: 1px solid rgba(255, 255, 255, 0.1); |
|
| 534 | - | border-radius: var(--border-radius); |
|
| 535 | - | color: var(--color-foreground); |
|
| 534 | + | border-radius: var(--norns-border-radius); |
|
| 535 | + | color: var(--norns-color-foreground); |
|
| 536 | 536 | width: 300px; |
|
| 537 | 537 | box-sizing: border-box; |
|
| 538 | 538 | } |
|
| 602 | 602 | display: flex; |
|
| 603 | 603 | align-items: center; |
|
| 604 | 604 | gap: 8px; |
|
| 605 | - | color: var(--color-primary); |
|
| 605 | + | color: var(--norns-color-primary); |
|
| 606 | 606 | } |
|
| 607 | 607 | ||
| 608 | 608 | .spinner { |
|
| 609 | 609 | width: 16px; |
|
| 610 | 610 | height: 16px; |
|
| 611 | 611 | border: 2px solid rgba(255, 255, 255, 0.3); |
|
| 612 | - | border-top: 2px solid var(--color-foreground); |
|
| 612 | + | border-top: 2px solid var(--norns-color-foreground); |
|
| 613 | 613 | border-radius: 50%; |
|
| 614 | 614 | animation: spin 1s linear infinite; |
|
| 615 | 615 | } |
|
| 636 | 636 | .result-value { |
|
| 637 | 637 | font-family: monospace; |
|
| 638 | 638 | font-size: 14px; |
|
| 639 | - | color: var(--color-primary); |
|
| 639 | + | color: var(--norns-color-primary); |
|
| 640 | 640 | } |
|
| 641 | 641 | </style> |
|
| 642 | 642 | `; |
|