| @@ -1,11 +1,11 @@ | ||
| 1 | 1 | /** |
| 2 | - * Desktop Mode — Recycle Bin window styles. | |
| 2 | + * OpenStation — Recycle Bin window styles. | |
| 3 | 3 | * |
| 4 | 4 | * Scoped to `.desktop-mode-recycle-bin` so the rules can't leak into other |
| 5 | 5 | * windows. Layout: a sticky toolbar across the top, then a flex-1 |
| 6 | - * body that hosts a `<wpd-table>`. The table is told to size to the | |
| 7 | - * body via `--wpd-table-max-height: 100%` so its sticky header | |
| 6 | + * body that hosts a `<os-table>`. The table is told to size to the | |
| 7 | + * body via `--os-ui-table-max-height: 100%` so its sticky header | |
| 8 | 8 | * engages. |
| 9 | 9 | */ |
| 10 | 10 | |
| 11 | 11 | .desktop-mode-recycle-bin { |
| @@ -12,25 +12,25 @@ | ||
| 12 | 12 | display: flex; |
| 13 | 13 | flex-direction: column; |
| 14 | 14 | height: 100%; |
| 15 | 15 | width: 100%; |
| 16 | - background: var( --wpd-surface, #fff ); | |
| 17 | - color: var( --wpd-text, #1d2327 ); | |
| 16 | + background: var( --os-ui-surface, #fff ); | |
| 17 | + color: var( --os-ui-fg, #1d2327 ); | |
| 18 | 18 | } |
| 19 | 19 | |
| 20 | -.desktop-mode-recycle-bin__toolbar { | |
| 20 | +.os-recycle-bin__toolbar { | |
| 21 | 21 | display: flex; |
| 22 | 22 | flex-wrap: wrap; |
| 23 | 23 | align-items: center; |
| 24 | 24 | gap: 12px; |
| 25 | 25 | padding: 10px 14px; |
| 26 | - border-bottom: 1px solid var( --wpd-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 27 | - background: var( --wpd-surface-elevated, #f6f7f7 ); | |
| 26 | + border-bottom: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 27 | + background: var( --os-ui-surface-elevated, #f6f7f7 ); | |
| 28 | 28 | } |
| 29 | 29 | |
| 30 | -.desktop-mode-recycle-bin__toolbar-left, | |
| 31 | -.desktop-mode-recycle-bin__toolbar-right, | |
| 32 | -.desktop-mode-recycle-bin__toolbar-trailing { | |
| 30 | +.os-recycle-bin__toolbar-left, | |
| 31 | +.os-recycle-bin__toolbar-right, | |
| 32 | +.os-recycle-bin__toolbar-trailing { | |
| 33 | 33 | display: flex; |
| 34 | 34 | align-items: center; |
| 35 | 35 | gap: 8px; |
| 36 | 36 | } |
| @@ -37,29 +37,31 @@ | ||
| 37 | 37 | |
| 38 | 38 | /* |
| 39 | 39 | * Honour the `hidden` attribute. The browser's UA stylesheet |
| 40 | 40 | * sets `[hidden] { display: none }`, but our explicit |
| 41 | - * `display: flex` above wins on specificity. This rule restores | |
| 42 | - * the expected behaviour so `bulk.hidden = true` from JS | |
| 43 | - * actually hides the bulk action group when nothing is selected. | |
| 41 | + * `display: flex` above wins on specificity. These rules restore | |
| 42 | + * the expected behaviour for the two groups the JS hides: the bulk | |
| 43 | + * actions (nothing selected) and the whole toolbar (nothing in the | |
| 44 | + * bin). `<os-empty-state>` handles its own. | |
| 44 | 45 | */ |
| 45 | -.desktop-mode-recycle-bin__toolbar-right[hidden] { | |
| 46 | +.os-recycle-bin__toolbar[hidden], | |
| 47 | +.os-recycle-bin__toolbar-right[hidden] { | |
| 46 | 48 | display: none; |
| 47 | 49 | } |
| 48 | 50 | |
| 49 | -.desktop-mode-recycle-bin__toolbar-trailing { | |
| 51 | +.os-recycle-bin__toolbar-trailing { | |
| 50 | 52 | margin-inline-start: auto; |
| 51 | 53 | } |
| 52 | 54 | |
| 53 | -.desktop-mode-recycle-bin__count { | |
| 55 | +.os-recycle-bin__count { | |
| 54 | 56 | font-size: 12px; |
| 55 | 57 | font-weight: 600; |
| 56 | - color: var( --wpd-text-muted, #50575e ); | |
| 58 | + color: var( --os-ui-fg-muted, #50575e ); | |
| 57 | 59 | font-variant-numeric: tabular-nums; |
| 58 | 60 | padding-inline-end: 4px; |
| 59 | 61 | } |
| 60 | 62 | |
| 61 | -.desktop-mode-recycle-bin__body { | |
| 63 | +.os-recycle-bin__body { | |
| 62 | 64 | flex: 1 1 auto; |
| 63 | 65 | min-height: 0; |
| 64 | 66 | display: flex; |
| 65 | 67 | padding: 8px 12px 12px; |
| @@ -64,51 +66,171 @@ | ||
| 64 | 66 | display: flex; |
| 65 | 67 | padding: 8px 12px 12px; |
| 66 | 68 | } |
| 67 | 69 | |
| 68 | -.desktop-mode-recycle-bin__body wpd-table { | |
| 70 | +.os-recycle-bin__body os-table { | |
| 69 | 71 | flex: 1 1 auto; |
| 70 | - --wpd-table-max-height: 100%; | |
| 72 | + /* | |
| 73 | + * A flex item's minimum size is its content's, and this content | |
| 74 | + * is a table whose columns refuse to wrap: without the 0 the | |
| 75 | + * table grows past the body, the body (which does not scroll) | |
| 76 | + * clips it, and the table's own scroller — the one thing that can | |
| 77 | + * scroll sideways — never overflows. This is what made a long | |
| 78 | + * title unreachable in a narrow window. | |
| 79 | + */ | |
| 80 | + min-inline-size: 0; | |
| 81 | + --os-ui-table-max-height: 100%; | |
| 71 | 82 | } |
| 72 | 83 | |
| 73 | 84 | /* |
| 74 | - * NOTE — cell-content styles are now inlined in `src/recycle-bin/ | |
| 75 | - * index.ts`. `<wpd-table>` renders into its own shadow DOM, which | |
| 76 | - * blocks document-level stylesheets (and Dashicons) from reaching | |
| 77 | - * any node we return from a `column.render` callback. The empty- | |
| 78 | - * state, toolbar, and body styles below remain CSS because they | |
| 79 | - * live in the bin window's light-DOM template. | |
| 85 | + * A narrow window — a phone, or a desktop window pulled in. The | |
| 86 | + * toolbar's three groups each take a whole row instead of sharing | |
| 87 | + * one: the type filter scrolls sideways under the search, the | |
| 88 | + * selection actions share their row, and Empty Trash keeps the last | |
| 89 | + * row's end. Nothing overflows the window's edge. The container is | |
| 90 | + * the app root (`.os-app`, `app-runtime.css`). | |
| 80 | 91 | */ |
| 92 | +@container ( max-width: 560px ) { | |
| 93 | + .os-recycle-bin__toolbar { | |
| 94 | + gap: 8px; | |
| 95 | + padding: 8px 10px; | |
| 96 | + } | |
| 81 | 97 | |
| 82 | -.desktop-mode-recycle-bin__empty { | |
| 98 | + .os-recycle-bin__toolbar-left, | |
| 99 | + .os-recycle-bin__toolbar-right, | |
| 100 | + .os-recycle-bin__toolbar-trailing { | |
| 101 | + flex: 1 1 100%; | |
| 102 | + min-inline-size: 0; | |
| 103 | + } | |
| 104 | + | |
| 105 | + .os-recycle-bin__toolbar-left { | |
| 106 | + flex-wrap: wrap; | |
| 107 | + } | |
| 108 | + | |
| 109 | + .os-recycle-bin__toolbar-left os-segmented { | |
| 110 | + flex: 1 1 100%; | |
| 111 | + max-inline-size: 100%; | |
| 112 | + overflow-x: auto; | |
| 113 | + scrollbar-width: none; | |
| 114 | + } | |
| 115 | + | |
| 116 | + .os-recycle-bin__toolbar-left os-text-field { | |
| 117 | + flex: 1 1 100%; | |
| 118 | + } | |
| 119 | + | |
| 120 | + .os-recycle-bin__toolbar-right { | |
| 121 | + flex-wrap: wrap; | |
| 122 | + } | |
| 123 | + | |
| 124 | + .os-recycle-bin__toolbar-right os-button { | |
| 125 | + flex: 1 1 auto; | |
| 126 | + } | |
| 127 | + | |
| 128 | + .os-recycle-bin__count { | |
| 129 | + flex: 1 1 100%; | |
| 130 | + } | |
| 131 | + | |
| 132 | + .os-recycle-bin__toolbar-trailing { | |
| 133 | + margin-inline-start: 0; | |
| 134 | + justify-content: flex-end; | |
| 135 | + } | |
| 136 | + | |
| 137 | + .os-recycle-bin__body { | |
| 138 | + padding: 6px 8px 8px; | |
| 139 | + } | |
| 140 | +} | |
| 141 | + | |
| 142 | +/* | |
| 143 | + * The phone (the shell's mode stamp, at any width). The list is a | |
| 144 | + * card per row (`<os-table stacked>`, set by the app) running edge to | |
| 145 | + * edge; the search leads the toolbar, with the type chips scrolling | |
| 146 | + * under it; and the selection's actions are a bar along the bottom | |
| 147 | + * of the window, under the thumb, instead of a row in the toolbar | |
| 148 | + * the list has scrolled away from. The bar is a flex sibling of the | |
| 149 | + * body, so the cards end where it begins. | |
| 150 | + */ | |
| 151 | +html[data-os-mode="mobile"] .os-recycle-bin__toolbar { | |
| 152 | + gap: 8px; | |
| 153 | + padding: 8px 10px; | |
| 154 | +} | |
| 155 | + | |
| 156 | +html[data-os-mode="mobile"] .os-recycle-bin__toolbar-left, | |
| 157 | +html[data-os-mode="mobile"] .os-recycle-bin__toolbar-trailing { | |
| 158 | + flex: 1 1 100%; | |
| 159 | + min-inline-size: 0; | |
| 160 | +} | |
| 161 | + | |
| 162 | +html[data-os-mode="mobile"] .os-recycle-bin__toolbar-left { | |
| 163 | + flex-wrap: wrap; | |
| 164 | +} | |
| 165 | + | |
| 166 | +html[data-os-mode="mobile"] .os-recycle-bin__toolbar-left os-text-field { | |
| 167 | + order: -1; | |
| 168 | + flex: 1 1 100%; | |
| 169 | +} | |
| 170 | + | |
| 171 | +html[data-os-mode="mobile"] .os-recycle-bin__toolbar-left os-segmented { | |
| 172 | + flex: 1 1 100%; | |
| 173 | + max-inline-size: 100%; | |
| 174 | + overflow-x: auto; | |
| 175 | + scrollbar-width: none; | |
| 176 | +} | |
| 177 | + | |
| 178 | +html[data-os-mode="mobile"] .os-recycle-bin__toolbar-trailing { | |
| 179 | + margin-inline-start: 0; | |
| 180 | + justify-content: flex-end; | |
| 181 | +} | |
| 182 | + | |
| 183 | +html[data-os-mode="mobile"] .os-recycle-bin__body { | |
| 184 | + padding: 0; | |
| 185 | +} | |
| 186 | + | |
| 187 | +.os-recycle-bin__bulk { | |
| 83 | 188 | display: flex; |
| 84 | - flex-direction: column; | |
| 189 | + flex-wrap: wrap; | |
| 85 | 190 | align-items: center; |
| 86 | 191 | gap: 8px; |
| 87 | - padding: 32px 16px; | |
| 88 | - color: var( --wpd-text-muted, #50575e ); | |
| 89 | - text-align: center; | |
| 192 | + padding: 10px 12px calc( 10px + env( safe-area-inset-bottom, 0px ) ); | |
| 193 | + border-block-start: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 194 | + background: var( --os-ui-surface-elevated, #f6f7f7 ); | |
| 195 | + box-shadow: 0 -6px 18px rgba( 0, 0, 0, 0.06 ); | |
| 90 | 196 | } |
| 91 | 197 | |
| 92 | -.desktop-mode-recycle-bin__empty .dashicons { | |
| 93 | - font-size: 32px; | |
| 94 | - width: 32px; | |
| 95 | - height: 32px; | |
| 96 | - opacity: 0.6; | |
| 198 | +.os-recycle-bin__bulk[hidden] { | |
| 199 | + display: none; | |
| 97 | 200 | } |
| 98 | 201 | |
| 99 | -.desktop-mode-recycle-bin__empty-hint { | |
| 100 | - font-size: 12px; | |
| 101 | - max-width: 360px; | |
| 202 | +.os-recycle-bin__bulk .os-recycle-bin__count { | |
| 203 | + flex: 1 1 100%; | |
| 204 | + padding-inline-end: 0; | |
| 102 | 205 | } |
| 103 | 206 | |
| 207 | +.os-recycle-bin__bulk os-button { | |
| 208 | + flex: 1 1 auto; | |
| 209 | +} | |
| 210 | + | |
| 104 | 211 | /* |
| 212 | + * NOTE — cell-content styles are now inlined in `src/recycle-bin/ | |
| 213 | + * index.ts`. `<os-table>` renders into its own shadow DOM, which | |
| 214 | + * blocks document-level stylesheets (and Dashicons) from reaching | |
| 215 | + * any node we return from a `column.render` callback. The empty- | |
| 216 | + * state, toolbar, and body styles below remain CSS because they | |
| 217 | + * live in the bin window's light-DOM template. | |
| 218 | + */ | |
| 219 | + | |
| 220 | +/* `<os-empty-state>` centres its own contents; this makes it fill | |
| 221 | + * the body once the table beside it is hidden. */ | |
| 222 | +.os-recycle-bin__body os-empty-state { | |
| 223 | + flex: 1 1 auto; | |
| 224 | +} | |
| 225 | + | |
| 226 | +/* | |
| 105 | 227 | * Drop-target highlight for cross-window drag-to-trash. Set when |
| 106 | 228 | * the desktop drag handler hit-tests the cursor over the bin's |
| 107 | - * root via `data-desktop-mode-trash-drop-active`. Returns to | |
| 229 | + * root via `data-os-trash-drop-active`. Returns to | |
| 108 | 230 | * normal on pointer-up or when the cursor leaves the window. |
| 109 | 231 | */ |
| 110 | -.desktop-mode-recycle-bin[ data-desktop-mode-trash-drop-active ] { | |
| 232 | +.desktop-mode-recycle-bin[ data-os-trash-drop-active ] { | |
| 111 | 233 | position: relative; |
| 112 | 234 | box-shadow: inset 0 0 0 2px var( --wp-admin-theme-color, #2271b1 ); |
| 113 | 235 | transition: box-shadow 80ms ease; |
| 114 | 236 | } |
| @@ -119,9 +241,9 @@ | ||
| 119 | 241 | * as a valid drop target without needing to open the window |
| 120 | 242 | * first. The selector matches the dock tile's `data-system-id` |
| 121 | 243 | * so this CSS applies wherever the recycle-bin dock entry |
| 122 | 244 | * renders (left rail, bottom rail, future placements). */ |
| 123 | -.desktop-mode-dock__item[ data-system-id="desktop-mode-recycle-bin" ][ data-desktop-mode-trash-drop-active ] { | |
| 245 | +.os-dock__item[ data-system-id="desktop-mode-recycle-bin" ][ data-os-trash-drop-active ] { | |
| 124 | 246 | outline: 2px solid var( --wp-admin-theme-color, #2271b1 ); |
| 125 | 247 | outline-offset: 2px; |
| 126 | 248 | border-radius: 12px; |
| 127 | 249 | background: color-mix( |
| @@ -133,9 +255,9 @@ | ||
| 133 | 255 | outline-color 80ms ease, |
| 134 | 256 | background 80ms ease; |
| 135 | 257 | } |
| 136 | 258 | |
| 137 | -.desktop-mode-recycle-bin[ data-desktop-mode-trash-drop-active ]::before { | |
| 259 | +.desktop-mode-recycle-bin[ data-os-trash-drop-active ]::before { | |
| 138 | 260 | content: ''; |
| 139 | 261 | position: absolute; |
| 140 | 262 | inset: 0; |
| 141 | 263 | pointer-events: none; |
| @@ -146,9 +268,9 @@ | ||
| 146 | 268 | ); |
| 147 | 269 | z-index: 1; |
| 148 | 270 | } |
| 149 | 271 | |
| 150 | -.desktop-mode-recycle-bin[ data-desktop-mode-trash-drop-active ]::after { | |
| 272 | +.desktop-mode-recycle-bin[ data-os-trash-drop-active ]::after { | |
| 151 | 273 | content: '🗑 Drop to move to Trash'; |
| 152 | 274 | position: absolute; |
| 153 | 275 | left: 50%; |
| 154 | 276 | top: 50%; |
| @@ -155,9 +277,9 @@ | ||
| 155 | 277 | transform: translate( -50%, -50% ); |
| 156 | 278 | padding: 10px 18px; |
| 157 | 279 | border-radius: 999px; |
| 158 | 280 | background: var( --wp-admin-theme-color, #2271b1 ); |
| 159 | - color: #fff; | |
| 281 | + color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) ); | |
| 160 | 282 | font-weight: 600; |
| 161 | 283 | font-size: 13px; |
| 162 | 284 | letter-spacing: 0.2px; |
| 163 | 285 | box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 ); |
