max / goingson
- Co-Authored-By
- Claude Opus 5 (1M context) <noreply@anthropic.com>
1 file changed,
+21 insertions,
-30 deletions
| @@ -640,7 +640,15 @@ | |||
| 640 | 640 | display: block; | |
| 641 | 641 | } | |
| 642 | 642 | ||
| 643 | - | /* 9. Buttons */ | |
| 643 | + | /* 9. Buttons | |
| 644 | + | ||
| 645 | + | Depth lives in the generated layout.css now: `.button`, `.button:hover` and | |
| 646 | + | `.button:active` come from makeover-webview, which emits the fill and the | |
| 647 | + | edge together so they cannot disagree. What stays here is everything that is | |
| 648 | + | not depth -- box model, type, cursor -- plus the disabled overrides below. | |
| 649 | + | ||
| 650 | + | Pressing therefore reads as a well rather than as --surface-sunken, which is | |
| 651 | + | the description's answer (Depth::pressed) rather than this file's. */ | |
| 644 | 652 | .button { | |
| 645 | 653 | display: inline-flex; | |
| 646 | 654 | align-items: center; | |
| @@ -653,20 +661,7 @@ | |||
| 653 | 661 | font-weight: 600; | |
| 654 | 662 | cursor: pointer; | |
| 655 | 663 | text-decoration: none; | |
| 656 | - | background: var(--surface-raised); | |
| 657 | 664 | color: var(--content); | |
| 658 | - | box-shadow: var(--bevel-raised); | |
| 659 | - | } | |
| 660 | - | ||
| 661 | - | .button:hover { | |
| 662 | - | background: var(--surface-overlay); | |
| 663 | - | } | |
| 664 | - | ||
| 665 | - | /* Pressed inverts the bevel and drops the fill a step, which is the whole | |
| 666 | - | idiom: no offset, no translate, the button reads as pushed into the page. */ | |
| 667 | - | .button:active { | |
| 668 | - | background: var(--surface-sunken); | |
| 669 | - | box-shadow: var(--bevel-inset); | |
| 670 | 665 | } | |
| 671 | 666 | ||
| 672 | 667 | /* Disabled keeps its bevel. The object is still there, its label is just | |
| @@ -677,11 +672,14 @@ | |||
| 677 | 672 | cursor: not-allowed; | |
| 678 | 673 | } | |
| 679 | 674 | ||
| 680 | - | .button:disabled:hover { | |
| 681 | - | background: var(--surface-raised); | |
| 682 | - | } | |
| 683 | - | ||
| 675 | + | /* Inert on both, and both properties on both selectors. Overriding only | |
| 676 | + | box-shadow on :active left a disabled button taking the pressed fill while | |
| 677 | + | keeping the raised edge, which is the fill-and-edge disagreement the | |
| 678 | + | generated rules exist to prevent. Higher specificity than the generated | |
| 679 | + | .button:hover and .button:active, so these win. */ | |
| 680 | + | .button:disabled:hover, | |
| 684 | 681 | .button:disabled:active { | |
| 682 | + | background: var(--surface-raised); | |
| 685 | 683 | box-shadow: var(--bevel-raised); | |
| 686 | 684 | } | |
| 687 | 685 | ||
| @@ -765,25 +763,18 @@ | |||
| 765 | 763 | font-size: var(--font-size-sm); | |
| 766 | 764 | } | |
| 767 | 765 | ||
| 766 | + | /* Depth comes from the generated layout.css, same as .button: a card and a | |
| 767 | + | button are one composition with two names, which is why this file used to | |
| 768 | + | hold two hand-written copies of it. The variants below still override the | |
| 769 | + | generated :hover and :active -- equal specificity, and this file loads | |
| 770 | + | after layout.css, so they win. */ | |
| 768 | 771 | .card { | |
| 769 | - | background-color: var(--surface-raised); | |
| 770 | 772 | border: var(--border-width) solid var(--border); | |
| 771 | 773 | border-radius: var(--radius-md); | |
| 772 | 774 | padding: var(--gap-group); | |
| 773 | - | box-shadow: var(--bevel-raised); | |
| 774 | 775 | cursor: pointer; | |
| 775 | 776 | } | |
| 776 | 777 | ||
| 777 | - | .card:hover { | |
| 778 | - | background-color: var(--surface-overlay); | |
| 779 | - | } | |
| 780 | - | ||
| 781 | - | /* A clickable card presses like a button. */ | |
| 782 | - | .card:active { | |
| 783 | - | background-color: var(--surface-sunken); | |
| 784 | - | box-shadow: var(--bevel-inset); | |
| 785 | - | } | |
| 786 | - | ||
| 787 | 778 | /* Compact card for use in dense vertical lists (e.g. Project Dashboard). | |
| 788 | 779 | Tighter padding, adds list spacing. */ | |
| 789 | 780 | .card--list-item { |