| @@ -39,15 +39,20 @@ | ||
| 39 | 39 | * the screen edge and a line would draw a lid on it. Without the |
| 40 | 40 | * border the surface disappeared into the default wallpaper — Void |
| 41 | 41 | * on Void, with only the shadow separating them. |
| 42 | 42 | */ |
| 43 | - border: 1px solid var( --os-ui-border-strong, rgba( 255, 251, 255, 0.22 ) ); | |
| 43 | + border: 1px solid var( --os-notch-border, rgba( 255, 251, 255, 0.22 ) ); | |
| 44 | 44 | border-top: 0; |
| 45 | 45 | /* Square at the top, round below — it reads as hanging from the |
| 46 | 46 | screen edge rather than floating near it. */ |
| 47 | 47 | border-radius: 0 0 15px 15px; |
| 48 | - background: var( --os-ui-surface-raised, rgba( 20, 18, 24, 0.92 ) ); | |
| 49 | - box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.4 ); | |
| 48 | + /* The bottom dock pill's glass, to the number: a pill hanging off | |
| 49 | + an edge should not be a second recipe. Its inset top highlight is | |
| 50 | + not copied, since this top edge is fused to the screen. */ | |
| 51 | + background: var( --os-notch-bg, rgba( 20, 18, 24, 0.92 ) ); | |
| 52 | + backdrop-filter: blur( 28px ) saturate( 170% ); | |
| 53 | + -webkit-backdrop-filter: blur( 28px ) saturate( 170% ); | |
| 54 | + box-shadow: 0 10px 32px var( --os-notch-shadow, rgba( 0, 0, 0, 0.4 ) ); | |
| 50 | 55 | color: var( --os-ui-fg, #fffbff ); |
| 51 | 56 | font-size: 13px; |
| 52 | 57 | line-height: 1; |
| 53 | 58 | cursor: pointer; |
| @@ -60,9 +65,9 @@ | ||
| 60 | 65 | } |
| 61 | 66 | |
| 62 | 67 | .os-notch:hover, |
| 63 | 68 | .os-notch:focus-visible { |
| 64 | - background: var( --os-ui-surface-elevated, rgba( 32, 29, 38, 0.96 ) ); | |
| 69 | + background: var( --os-notch-bg-hover, rgba( 32, 29, 38, 0.96 ) ); | |
| 65 | 70 | border-color: var( --os-ui-accent-dim, rgba( 242, 82, 252, 0.5 ) ); |
| 66 | 71 | } |
| 67 | 72 | |
| 68 | 73 | .os-notch:focus-visible { |
| @@ -162,9 +167,11 @@ | ||
| 162 | 167 | body.os-active.os-admin-bar-dynamic:has( #wpadminbar:hover ) .os-notch, |
| 163 | 168 | body.os-active.os-admin-bar-dynamic:has( #wpadminbar:focus-within ) .os-notch, |
| 164 | 169 | body.os-active.os-admin-bar-dynamic:has( .os-notch:hover ) .os-notch, |
| 165 | 170 | body.os-active.os-admin-bar-dynamic:has( .os-notch:focus-visible ) .os-notch { |
| 166 | - top: var( --wp-admin--admin-bar--height, 32px ); | |
| 171 | + /* The bar's measured edge (src/admin-bar-height.ts), Core's token | |
| 172 | + behind it — a host that made the bar taller moved this step too. */ | |
| 173 | + top: var( --os-admin-bar-height, var( --wp-admin--admin-bar--height, 32px ) ); | |
| 167 | 174 | } |
| 168 | 175 | |
| 169 | 176 | /* |
| 170 | 177 | * The hover bridge, and it is what makes the step stable. |
| @@ -185,6 +192,6 @@ | ||
| 185 | 192 | content: ""; |
| 186 | 193 | position: absolute; |
| 187 | 194 | inset-inline: 0; |
| 188 | 195 | inset-block-end: 100%; |
| 189 | - height: var( --wp-admin--admin-bar--height, 32px ); | |
| 196 | + height: var( --os-admin-bar-height, var( --wp-admin--admin-bar--height, 32px ) ); | |
| 190 | 197 | } |
