| @@ -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; |
| @@ -32,15 +39,20 @@ | ||
| 32 | 39 | * the screen edge and a line would draw a lid on it. Without the |
| 33 | 40 | * border the surface disappeared into the default wallpaper — Void |
| 34 | 41 | * on Void, with only the shadow separating them. |
| 35 | 42 | */ |
| 36 | - 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 ) ); | |
| 37 | 44 | border-top: 0; |
| 38 | 45 | /* Square at the top, round below — it reads as hanging from the |
| 39 | 46 | screen edge rather than floating near it. */ |
| 40 | 47 | border-radius: 0 0 15px 15px; |
| 41 | - background: var( --os-ui-surface-raised, rgba( 20, 18, 24, 0.92 ) ); | |
| 42 | - 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 ) ); | |
| 43 | 55 | color: var( --os-ui-fg, #fffbff ); |
| 44 | 56 | font-size: 13px; |
| 45 | 57 | line-height: 1; |
| 46 | 58 | cursor: pointer; |
| @@ -53,9 +65,9 @@ | ||
| 53 | 65 | } |
| 54 | 66 | |
| 55 | 67 | .os-notch:hover, |
| 56 | 68 | .os-notch:focus-visible { |
| 57 | - 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 ) ); | |
| 58 | 70 | border-color: var( --os-ui-accent-dim, rgba( 242, 82, 252, 0.5 ) ); |
| 59 | 71 | } |
| 60 | 72 | |
| 61 | 73 | .os-notch:focus-visible { |
| @@ -112,19 +124,8 @@ | ||
| 112 | 124 | max-width: 320px; |
| 113 | 125 | } |
| 114 | 126 | |
| 115 | 127 | /* |
| 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 | 128 | * Overview is the shell talking about itself — a zoomed-out view of |
| 128 | 129 | * every window and desktop. A pill hanging over that view is chrome |
| 129 | 130 | * on top of chrome, and it lands squarely on the desktop thumbnails. |
| 130 | 131 | * Mio steps aside for the same reason and in the same way. |
| @@ -166,9 +167,11 @@ | ||
| 166 | 167 | body.os-active.os-admin-bar-dynamic:has( #wpadminbar:hover ) .os-notch, |
| 167 | 168 | body.os-active.os-admin-bar-dynamic:has( #wpadminbar:focus-within ) .os-notch, |
| 168 | 169 | body.os-active.os-admin-bar-dynamic:has( .os-notch:hover ) .os-notch, |
| 169 | 170 | body.os-active.os-admin-bar-dynamic:has( .os-notch:focus-visible ) .os-notch { |
| 170 | - 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 ) ); | |
| 171 | 174 | } |
| 172 | 175 | |
| 173 | 176 | /* |
| 174 | 177 | * The hover bridge, and it is what makes the step stable. |
| @@ -189,6 +192,6 @@ | ||
| 189 | 192 | content: ""; |
| 190 | 193 | position: absolute; |
| 191 | 194 | inset-inline: 0; |
| 192 | 195 | inset-block-end: 100%; |
| 193 | - height: var( --wp-admin--admin-bar--height, 32px ); | |
| 196 | + height: var( --os-admin-bar-height, var( --wp-admin--admin-bar--height, 32px ) ); | |
| 194 | 197 | } |
