| @@ -1,11 +1,18 @@ | ||
| 1 | 1 | /* |
| 2 | 2 | * The notch — top-centre, floating, never reserving. |
| 3 | 3 | * |
| 4 | 4 | * The load-bearing rule in this file is that nothing here touches |
| 5 | - * `.os-area`. Reserving height would make the notch another hardcoded | |
| 6 | - * claimant on a work-area rectangle that already has several | |
| 7 | - * disagreeing answers. It floats, and it gets out of the way instead. | |
| 5 | + * `.os-area`. The desktop has one work-area rectangle now | |
| 6 | + * (`src/work-area/index.ts`, carved out of the area by the dock), | |
| 7 | + * and it stays useful only while few things carve it; a notch that | |
| 8 | + * reserved height would be a second claimant on the top edge for | |
| 9 | + * the sake of a pill a window may cover. It floats, and it gets out | |
| 10 | + * of the way instead. | |
| 11 | + * | |
| 12 | + * Getting out of the way is also what the stacking order says: the | |
| 13 | + * notch is on the desk, under the window layer, so a window reaching | |
| 14 | + * the top edge covers the pill instead of the pill hanging over it. | |
| 8 | 15 | */ |
| 9 | 16 | |
| 10 | 17 | /* |
| 11 | 18 | * Anchored to the SHELL, not the viewport. `.os-shell` starts below |
| @@ -18,9 +25,9 @@ | ||
| 18 | 25 | position: absolute; |
| 19 | 26 | top: 0; |
| 20 | 27 | left: 50%; |
| 21 | 28 | transform: translateX( -50% ); |
| 22 | - z-index: var( --os-z-notch, 9000 ); | |
| 29 | + z-index: var( --os-z-notch, 60 ); | |
| 23 | 30 | |
| 24 | 31 | display: flex; |
| 25 | 32 | align-items: center; |
| 26 | 33 | gap: 7px; |
| @@ -112,19 +119,8 @@ | ||
| 112 | 119 | max-width: 320px; |
| 113 | 120 | } |
| 114 | 121 | |
| 115 | 122 | /* |
| 116 | - * Out of the way of a maximized window. The notch overlaps the top | |
| 117 | - * edge, and a maximized window's title bar is right under it — so it | |
| 118 | - * fades rather than pushing the window down, which is the one thing | |
| 119 | - * this surface must never do. | |
| 120 | - */ | |
| 121 | -.os-shell:has( .os-window--maximized ) .os-notch:not( :hover ):not( .os-notch--speaking ), | |
| 122 | -.os-shell:has( .os-window--fullscreen ) .os-notch:not( :hover ):not( .os-notch--speaking ) { | |
| 123 | - opacity: 0.35; | |
| 124 | -} | |
| 125 | - | |
| 126 | -/* | |
| 127 | 123 | * Overview is the shell talking about itself — a zoomed-out view of |
| 128 | 124 | * every window and desktop. A pill hanging over that view is chrome |
| 129 | 125 | * on top of chrome, and it lands squarely on the desktop thumbnails. |
| 130 | 126 | * Mio steps aside for the same reason and in the same way. |
| @@ -166,9 +162,11 @@ | ||
| 166 | 162 | body.os-active.os-admin-bar-dynamic:has( #wpadminbar:hover ) .os-notch, |
| 167 | 163 | body.os-active.os-admin-bar-dynamic:has( #wpadminbar:focus-within ) .os-notch, |
| 168 | 164 | body.os-active.os-admin-bar-dynamic:has( .os-notch:hover ) .os-notch, |
| 169 | 165 | body.os-active.os-admin-bar-dynamic:has( .os-notch:focus-visible ) .os-notch { |
| 170 | - top: var( --wp-admin--admin-bar--height, 32px ); | |
| 166 | + /* The bar's measured edge (src/admin-bar-height.ts), Core's token | |
| 167 | + behind it — a host that made the bar taller moved this step too. */ | |
| 168 | + top: var( --os-admin-bar-height, var( --wp-admin--admin-bar--height, 32px ) ); | |
| 171 | 169 | } |
| 172 | 170 | |
| 173 | 171 | /* |
| 174 | 172 | * The hover bridge, and it is what makes the step stable. |
| @@ -189,6 +187,6 @@ | ||
| 189 | 187 | content: ""; |
| 190 | 188 | position: absolute; |
| 191 | 189 | inset-inline: 0; |
| 192 | 190 | inset-block-end: 100%; |
| 193 | - height: var( --wp-admin--admin-bar--height, 32px ); | |
| 191 | + height: var( --os-admin-bar-height, var( --wp-admin--admin-bar--height, 32px ) ); | |
| 194 | 192 | } |
