| @@ -741,9 +741,13 @@ | ||
| 741 | 741 | /* The CHOICE's own checked state, not any checked thing in the card: |
| 742 | 742 | every card now holds a segmented control, and its picked segment |
| 743 | 743 | is `aria-checked` too. */ |
| 744 | 744 | .os-settings__layout-card:has( .os-settings__layout-choice[ aria-checked='true' ] ) { |
| 745 | - box-shadow: 0 0 0 2px var( --os-ui-accent, #2271b1 ); | |
| 745 | + /* The same two layers a chosen swatch wears (an accent ring the | |
| 746 | + palette can zero, and a lift it can declare), so every picked | |
| 747 | + card on this page says "this one" the same way. */ | |
| 748 | + box-shadow: 0 0 0 var( --os-ui-swatch-ring-width, 2px ) var( --os-ui-accent, #2271b1 ), | |
| 749 | + var( --os-ui-swatch-lift, 0 0 0 0 transparent ); | |
| 746 | 750 | } |
| 747 | 751 | |
| 748 | 752 | /* The radio: everything in the card that means "this layout". */ |
| 749 | 753 | .os-settings__layout-choice { |
| @@ -2821,9 +2825,10 @@ | ||
| 2821 | 2825 | } |
| 2822 | 2826 | |
| 2823 | 2827 | .os-settings__theme-card[ aria-pressed="true" ] { |
| 2824 | 2828 | border-color: transparent; |
| 2825 | - box-shadow: 0 0 0 2px var( --os-ui-accent, #2271b1 ); | |
| 2829 | + box-shadow: 0 0 0 var( --os-ui-swatch-ring-width, 2px ) var( --os-ui-accent, #2271b1 ), | |
| 2830 | + var( --os-ui-swatch-lift, 0 0 0 0 transparent ); | |
| 2826 | 2831 | } |
| 2827 | 2832 | |
| 2828 | 2833 | .os-settings__theme-preview { |
| 2829 | 2834 | display: flex; |
| @@ -2967,5 +2972,23 @@ | ||
| 2967 | 2972 | |
| 2968 | 2973 | .os-settings__theme-upload-plus { |
| 2969 | 2974 | font-size: 22px; |
| 2970 | 2975 | line-height: 1; |
| 2976 | +} | |
| 2977 | + | |
| 2978 | +/* The best search result: its page, enclosing section and one control. */ | |
| 2979 | +.os-settings [ data-settings-search-page ] { | |
| 2980 | + outline: 2px solid var( --os-ui-accent, #2271b1 ); | |
| 2981 | + outline-offset: -2px; | |
| 2982 | + border-radius: 6px; | |
| 2983 | +} | |
| 2984 | + | |
| 2985 | +.os-settings os-section[ data-settings-search-section ]::part( body ) { | |
| 2986 | + border-color: var( --os-ui-accent, #2271b1 ); | |
| 2987 | +} | |
| 2988 | + | |
| 2989 | +.os-settings [ data-settings-search-control ] { | |
| 2990 | + outline: 2px solid var( --os-ui-accent, #2271b1 ); | |
| 2991 | + outline-offset: 4px; | |
| 2992 | + border-radius: 4px; | |
| 2993 | + scroll-margin-block: 24px; | |
| 2971 | 2994 | } |
