max / makenotwork
1 file changed,
+28 insertions,
-9 deletions
| @@ -787,12 +787,18 @@ | |||
| 787 | 787 | margin-bottom: 0; | |
| 788 | 788 | } | |
| 789 | 789 | ||
| 790 | - | /* Geometry and type only. The surface is layout.css's: `.tab` is sunken, | |
| 791 | - | `:hover` steps to --hover-surface on a fine pointer, `:active` insets. This | |
| 792 | - | rule used to restate the sunken background verbatim and then carry a second, | |
| 793 | - | redundant selection signal on top of it — opacity 0.6 unselected, 1 selected | |
| 794 | - | — so a tab said "not chosen" twice and the generated surface step did | |
| 795 | - | nothing. The opacity idiom is gone and the surface contrast is the signal. */ | |
| 790 | + | /* The background is layout.css's: `.tab` is sunken, `:hover` steps to | |
| 791 | + | --hover-surface on a fine pointer, `:active` insets. This rule used to | |
| 792 | + | restate the sunken value verbatim, which is what B2 deleted. | |
| 793 | + | ||
| 794 | + | The opacity stays, and it is NOT the same signal said twice. It dims the | |
| 795 | + | label; the surface step changes the plate. Selection needs both, because | |
| 796 | + | the plate step is not reliable across themes: sunken to raised is lighter | |
| 797 | + | on makenotwork, DARKER on nord, and on tokyonight raised equals | |
| 798 | + | --surface-page, so a selected tab has no plate contrast at all and reads as | |
| 799 | + | selected only by merging with the panel below it. Dimming the ink is the | |
| 800 | + | part that survives a theme whose ramp collapses here. See task A4 on | |
| 801 | + | makenotwork's ramp being the thinnest in the house. */ | |
| 796 | 802 | .tab { | |
| 797 | 803 | color: var(--content); | |
| 798 | 804 | border: none; | |
| @@ -803,11 +809,18 @@ | |||
| 803 | 809 | /* Tabs navigate, they don't commit, stay flat. Overrides the base | |
| 804 | 810 | `button` shadow if a tab is a <button>. */ | |
| 805 | 811 | box-shadow: none; | |
| 806 | - | transition: background 0.2s ease; | |
| 812 | + | transition: | |
| 813 | + | background 0.2s ease, | |
| 814 | + | opacity 0.2s ease; | |
| 815 | + | opacity: 0.6; | |
| 807 | 816 | white-space: nowrap; | |
| 808 | 817 | flex-shrink: 0; | |
| 809 | 818 | } | |
| 810 | 819 | ||
| 820 | + | .tab:hover { | |
| 821 | + | opacity: 1; | |
| 822 | + | } | |
| 823 | + | ||
| 811 | 824 | /* layout.css spells selection `.tab.chosen`; the site spells it | |
| 812 | 825 | `.is-selected`, and it spells it that way on git nav links, editor tabs, | |
| 813 | 826 | section tabs, issue tabs and filter buttons as well — one idiom across a | |
| @@ -819,6 +832,7 @@ | |||
| 819 | 832 | .tab.is-selected { | |
| 820 | 833 | background: var(--surface-raised); | |
| 821 | 834 | box-shadow: var(--bevel-raised); | |
| 835 | + | opacity: 1; | |
| 822 | 836 | } | |
| 823 | 837 | ||
| 824 | 838 | .tab-more-wrap { | |
| @@ -838,13 +852,18 @@ | |||
| 838 | 852 | } | |
| 839 | 853 | ||
| 840 | 854 | /* The overflow menu restates the tab as a menu row: block, full width, left | |
| 841 | - | aligned, tighter. It carried the same opacity pair the strip did and it goes | |
| 842 | - | for the same reason; hover and selection are the generated surface steps. */ | |
| 855 | + | aligned, tighter, and one step less dim than the strip because a menu row | |
| 856 | + | is already isolated on its own surface. */ | |
| 843 | 857 | .tab-overflow-menu .tab { | |
| 844 | 858 | display: block; | |
| 845 | 859 | width: 100%; | |
| 846 | 860 | text-align: left; | |
| 847 | 861 | padding: var(--gap-group) var(--gap-section); | |
| 862 | + | opacity: 0.7; | |
| 863 | + | } | |
| 864 | + | ||
| 865 | + | .tab-overflow-menu .tab.is-selected { | |
| 866 | + | opacity: 1; | |
| 848 | 867 | } | |
| 849 | 868 | ||
| 850 | 869 |