← All changes | assets/css/recycle-bin.css +137 -1 1.1.5 → 1.1.11 View file →

		@@ -68,12 +68,148 @@
68	68	}
69	69
70	70	.os-recycle-bin__body os-table {
71	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;
72	81	--os-ui-table-max-height: 100%;
73	82	}
74	83
75	84	/*
	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`).
	91	+ */
	92	+@container ( max-width: 560px ) {
	93	+ .os-recycle-bin__toolbar {
	94	+ gap: 8px;
	95	+ padding: 8px 10px;
	96	+ }
	97	+
	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 {
	188	+ display: flex;
	189	+ flex-wrap: wrap;
	190	+ align-items: center;
	191	+ gap: 8px;
	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 );
	196	+}
	197	+
	198	+.os-recycle-bin__bulk[hidden] {
	199	+ display: none;
	200	+}
	201	+
	202	+.os-recycle-bin__bulk .os-recycle-bin__count {
	203	+ flex: 1 1 100%;
	204	+ padding-inline-end: 0;
	205	+}
	206	+
	207	+.os-recycle-bin__bulk os-button {
	208	+ flex: 1 1 auto;
	209	+}
	210	+
	211	+/*
76	212	* NOTE — cell-content styles are now inlined in `src/recycle-bin/
77	213	* index.ts`. `<os-table>` renders into its own shadow DOM, which
78	214	* blocks document-level stylesheets (and Dashicons) from reaching
79	215	* any node we return from a `column.render` callback. The empty-
		@@ -141,9 +277,9 @@
141	277	transform: translate( -50%, -50% );
142	278	padding: 10px 18px;
143	279	border-radius: 999px;
144	280	background: var( --wp-admin-theme-color, #2271b1 );
145		- color: var( --os-ui-fg-on-accent, #fff );
	281	+ color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) );
146	282	font-weight: 600;
147	283	font-size: 13px;
148	284	letter-spacing: 0.2px;
149	285	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );