| @@ -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 { |
