← All changes | assets/css/recycle-bin.css +145 -23 1.0.0 → 1.1.10 View file →

		@@ -37,12 +37,14 @@
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	*/
	46	+.os-recycle-bin__toolbar[hidden],
45	47	.os-recycle-bin__toolbar-right[hidden] {
46	48	display: none;
47	49	}
48	50
		@@ -66,43 +68,163 @@
66	68	}
67	69
68	70	.os-recycle-bin__body os-table {
69	71	flex: 1 1 auto;
	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;
70	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`. `<os-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		-.os-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( --os-ui-fg-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		-.os-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		-.os-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	229	* root via `data-os-trash-drop-active`. Returns to
108	230	* normal on pointer-up or when the cursor leaves the window.
		@@ -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: var( --os-ui-fg-on-accent, #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 );