max / goingson
- Co-Authored-By
- Claude Opus 5 (1M context) <noreply@anthropic.com>
1 file changed,
+15 insertions,
-38 deletions
| @@ -571,14 +571,15 @@ | |||
| 571 | 571 | ||
| 572 | 572 | /* 7. Tab Navigation (wide shell only) WIDTH | |
| 573 | 573 | The top tab strip belongs to the wide shell; the compact shell uses the | |
| 574 | - | bottom tab bar. | |
| 574 | + | bottom tab bar. Tabs run from the left edge, which is the pane's left edge. | |
| 575 | 575 | ||
| 576 | - | Folder tabs, not toggles. A pressed toggle says "this control is on" and | |
| 577 | - | says nothing about what is below it; a folder tab's selected state removes | |
| 578 | - | the line between itself and the pane, so the two read as one object. That | |
| 579 | - | is the whole semantic, and it is why the tab carries no bevel: a bevel | |
| 580 | - | makes it an object sitting on the strip rather than the front edge of the | |
| 581 | - | pane. Tabs run from the left edge, which is the pane's left edge. */ | |
| 576 | + | Box and text only. Fill and edge come from the generated .tab / .tab.chosen | |
| 577 | + | in layout.css, unchanged: an unchosen tab is Depth::Sunken and the chosen one | |
| 578 | + | is Depth::Raised. This file used to merge the chosen tab into the pane with a | |
| 579 | + | real border, a bevel suppression and top-only corners, which was one app out | |
| 580 | + | of three doing it; removed 2026-08-05 (makeover-layout task d7cd4410). The | |
| 581 | + | chosen tab is a raised chip, the shape Balanced Breakfast already renders. | |
| 582 | + | Nothing here may cancel a token the selector emits. */ | |
| 582 | 583 | @media (min-width: 600px) { | |
| 583 | 584 | .tab-navigation { | |
| 584 | 585 | display: flex; | |
| @@ -586,15 +587,6 @@ | |||
| 586 | 587 | gap: var(--gap-bound); | |
| 587 | 588 | } | |
| 588 | 589 | ||
| 589 | - | /* Fills come from the generated layout.css: makeover-layout 0.3.0 | |
| 590 | - | describes both halves of a selector, so an unchosen tab is | |
| 591 | - | Depth::Sunken and the chosen one is Depth::Raised. Those are the same | |
| 592 | - | two tokens this file used to spell by hand, so nothing moves visually. | |
| 593 | - | ||
| 594 | - | The border stays here, and so does the bevel suppression below. A | |
| 595 | - | folder tab needs its bottom edge open to merge with the pane, and a | |
| 596 | - | four-sided bevel cannot do that -- which is why these tabs were drawn | |
| 597 | - | with a real border in the first place. */ | |
| 598 | 590 | .tab { | |
| 599 | 591 | display: flex; | |
| 600 | 592 | align-items: center; | |
| @@ -602,9 +594,6 @@ | |||
| 602 | 594 | padding: var(--gap-peer) var(--gap-section); | |
| 603 | 595 | text-decoration: none; | |
| 604 | 596 | color: var(--content-secondary); | |
| 605 | - | border: var(--border-width) solid var(--border); | |
| 606 | - | border-bottom: 0; | |
| 607 | - | border-radius: var(--radius-sm) var(--radius-sm) 0 0; | |
| 608 | 597 | font-weight: 600; | |
| 609 | 598 | } | |
| 610 | 599 | ||
| @@ -612,22 +601,8 @@ | |||
| 612 | 601 | color: var(--content); | |
| 613 | 602 | } | |
| 614 | 603 | ||
| 615 | - | /* The selected tab is filled with the pane's own surface and overlaps the | |
| 616 | - | strip's bottom line, breaking it: tab and pane become one shape. The | |
| 617 | - | specimen writes the overlap as `top: 1px` on the unselected tabs; a | |
| 618 | - | negative bottom margin says the same thing with the direction explicit, | |
| 619 | - | and the matching padding keeps every tab's label on one baseline. | |
| 620 | - | ||
| 621 | - | box-shadow: none is load-bearing, not tidying. The generated | |
| 622 | - | .tab.chosen carries Bevel::Raised, whose dark half lands on the bottom | |
| 623 | - | edge and would draw a line straight across the join this rule exists to | |
| 624 | - | break. */ | |
| 625 | 604 | .tab.chosen { | |
| 626 | - | position: relative; | |
| 627 | 605 | color: var(--content); | |
| 628 | - | box-shadow: none; | |
| 629 | - | margin-bottom: calc(-1 * var(--border-width)); | |
| 630 | - | padding-bottom: calc(var(--gap-peer) + var(--border-width)); | |
| 631 | 606 | } | |
| 632 | 607 | ||
| 633 | 608 | .tab-label { | |
| @@ -642,7 +617,7 @@ | |||
| 642 | 617 | } | |
| 643 | 618 | ||
| 644 | 619 | /* --- Pill Sub-Navigation (wide shell only; compact uses the slide menu) --- */ | |
| 645 | - | /* An underline strip, not a second row of folder tabs. Two tab rows put two | |
| 620 | + | /* An underline strip, not a second row of tabs. Two tab rows put two | |
| 646 | 621 | competing "this contains what follows" claims on the screen and give back | |
| 647 | 622 | the ambiguity the top row just resolved, so the sub-level says selected | |
| 648 | 623 | with a rule under the label and nothing else. Classic Platinum did nest | |
| @@ -696,14 +671,16 @@ | |||
| 696 | 671 | } | |
| 697 | 672 | ||
| 698 | 673 | /* The pane the tab strip belongs to. Same width as the strip (§6), so the | |
| 699 | - | two share a left and a right edge; no top border, because the strip's | |
| 700 | - | border-bottom already is that line and drawing it twice would show. Follows | |
| 701 | - | the strip: no strip in a compact window, so no pane either. WIDTH */ | |
| 674 | + | two share a left and a right edge. Follows the strip: no strip in a compact | |
| 675 | + | window, so no pane either. WIDTH | |
| 676 | + | ||
| 677 | + | The top border is drawn here. It used to be left open because the chosen | |
| 678 | + | tab's own border stood in for it while the two were merged; that merge is | |
| 679 | + | gone (§7), so the pane closes its own shape. */ | |
| 702 | 680 | @media (min-width: 600px) { | |
| 703 | 681 | .main-content { | |
| 704 | 682 | background: var(--surface-raised); | |
| 705 | 683 | border: var(--border-width) solid var(--border); | |
| 706 | - | border-top: 0; | |
| 707 | 684 | } | |
| 708 | 685 | } | |
| 709 | 686 |