| @@ -202,17 +202,18 @@ | ||
| 202 | 202 | } |
| 203 | 203 | |
| 204 | 204 | /* The CANONICAL selection pair every tile in the shell wears |
| 205 | 205 | * (`.os-file-tile--selected` in desktop-files.css): the |
| 206 | - * `--os-tile-selected-bg` wash under an inset `--os-tile-focus-ring` | |
| 207 | - * ring that resolves to the admin scheme colour. The root folder | |
| 208 | - * tiles are plain buttons rather than `<os-tile>`s, so they restate | |
| 209 | - * the same chains — reading `--os-ui-accent` here painted the raw | |
| 210 | - * brand Pulse instead of the theme's selection, which is exactly the | |
| 211 | - * divergence the shared tokens exist to prevent. */ | |
| 206 | + * `--os-tile-selected-bg` fill under an inset `--os-tile-focus-ring` | |
| 207 | + * ring whose width the palette decides (0 on OpenStation's, 1px on | |
| 208 | + * Legacy). The root folder tiles are plain buttons rather than | |
| 209 | + * `<os-tile>`s, so they restate the same chains — reading | |
| 210 | + * `--os-ui-accent` here painted the raw brand Pulse instead of the | |
| 211 | + * theme's selection, which is exactly the divergence the shared | |
| 212 | + * tokens exist to prevent. */ | |
| 212 | 213 | .os-mywp__tile.is-selected { |
| 213 | 214 | background: var( --os-tile-selected-bg, rgba( 34, 113, 177, 0.14 ) ); |
| 214 | - box-shadow: inset 0 0 0 1px | |
| 215 | + box-shadow: inset 0 0 0 var( --os-tile-selected-ring-width, 1px ) | |
| 215 | 216 | var( --os-tile-focus-ring, var( --wp-admin-theme-color, #2271b1 ) ); |
| 216 | 217 | } |
| 217 | 218 | |
| 218 | 219 | /* The icon well matches WP Explorer's `.os-file-tile__icon` / |
| @@ -254,8 +255,15 @@ | ||
| 254 | 255 | flex: 1 1 auto; |
| 255 | 256 | min-block-size: 0; |
| 256 | 257 | } |
| 257 | 258 | |
| 259 | +/* Nothing open, no pane: the list has the whole window until a | |
| 260 | + * click needs the preview beside it (`splitView()` in | |
| 261 | + * `parts/dossier-views.ts` leaves the aside out entirely). */ | |
| 262 | +.os-mywp__split--solo { | |
| 263 | + grid-template-columns: minmax( 0, 1fr ); | |
| 264 | +} | |
| 265 | + | |
| 258 | 266 | .os-mywp__list-pane { |
| 259 | 267 | min-inline-size: 0; |
| 260 | 268 | /* Grid items default to min-size auto; without the 0 the row |
| 261 | 269 | grows with a tall list instead of letting the canvas scroll. */ |
| @@ -274,11 +282,11 @@ | ||
| 274 | 282 | /* |
| 275 | 283 | * A narrow window — a phone, or a desktop window pulled in under |
| 276 | 284 | * the two floors above (240px list + 430px pane). The panes stack: |
| 277 | 285 | * the list takes the window and the preview becomes a sheet along |
| 278 | - * the bottom, at most 45% tall and scrolling on its own, that is | |
| 279 | - * there only while something is selected. An empty pane on a phone | |
| 280 | - * is a bar of nothing over the list. The container is the app root | |
| 286 | + * the bottom, at most 45% tall and scrolling on its own. It is only | |
| 287 | + * rendered while something is selected, so the list alone fills the | |
| 288 | + * single row the rest of the time. The container is the app root | |
| 281 | 289 | * (`.os-app`, `app-runtime.css`). |
| 282 | 290 | */ |
| 283 | 291 | @container ( max-width: 640px ) { |
| 284 | 292 | .os-mywp__split { |
| @@ -290,12 +298,8 @@ | ||
| 290 | 298 | border-inline-start: 0; |
| 291 | 299 | border-block-start: 1px solid var( --os-ui-border, #dcdcde ); |
| 292 | 300 | max-block-size: 45%; |
| 293 | 301 | } |
| 294 | - | |
| 295 | - .os-mywp__detail-pane:has( > .os-mywp__pane-empty ) { | |
| 296 | - display: none; | |
| 297 | - } | |
| 298 | 302 | } |
| 299 | 303 | |
| 300 | 304 | /* |
| 301 | 305 | * The phone's item page (`renderBody` in `my-wordpress.os.ts`): the |
| @@ -918,28 +922,8 @@ | ||
| 918 | 922 | gap: 10px; |
| 919 | 923 | margin: 0; |
| 920 | 924 | } |
| 921 | 925 | |
| 922 | -.os-mywp__facts { | |
| 923 | - display: grid; | |
| 924 | - grid-template-columns: max-content 1fr; | |
| 925 | - gap: 6px 14px; | |
| 926 | - margin: 0; | |
| 927 | - font-size: 13px; | |
| 928 | -} | |
| 929 | - | |
| 930 | -.os-mywp__fact { | |
| 931 | - display: contents; | |
| 932 | -} | |
| 933 | - | |
| 934 | -.os-mywp__fact dt { | |
| 935 | - color: var( --os-ui-fg-muted, #646970 ); | |
| 936 | -} | |
| 937 | - | |
| 938 | -.os-mywp__fact dd { | |
| 939 | - margin: 0; | |
| 940 | -} | |
| 941 | - | |
| 942 | 926 | .os-mywp__pane-h { |
| 943 | 927 | margin: 4px 0 0; |
| 944 | 928 | font-size: 12px; |
| 945 | 929 | text-transform: uppercase; |
| @@ -1208,19 +1192,8 @@ | ||
| 1208 | 1192 | font-size: 11px; |
| 1209 | 1193 | color: var( --os-ui-fg-muted, #646970 ); |
| 1210 | 1194 | border-block-start: 1px solid var( --os-ui-border, #dcdcde ); |
| 1211 | 1195 | flex: 0 0 auto; |
| 1212 | -} | |
| 1213 | - | |
| 1214 | -.os-mywp__pane-empty { | |
| 1215 | - margin: 0; | |
| 1216 | - block-size: 100%; | |
| 1217 | - display: grid; | |
| 1218 | - place-items: center; | |
| 1219 | - padding: 24px; | |
| 1220 | - text-align: center; | |
| 1221 | - color: var( --os-ui-fg-muted, #646970 ); | |
| 1222 | - font-size: 13px; | |
| 1223 | 1196 | } |
| 1224 | 1197 | |
| 1225 | 1198 | /* ------------------------------------------------------------------ */ |
| 1226 | 1199 | /* Agents section — WP Explorer's `dm-agents` design, ported 1:1 */ |
