← All changes | assets/css/desktop.css +41 -18 1.1.9 → 1.1.12 View file →

		@@ -226,17 +226,9 @@
226	226	}
227	227
228	228	body.os-active.os-admin-bar-dynamic #wpadminbar:hover,
229	229	body.os-active.os-admin-bar-dynamic #wpadminbar:focus-within,
230		-body.os-active.os-admin-bar-dynamic #wpadminbar:active,
231		-/*
232		- * …and while the notch is being used. The notch hangs from the same
233		- * edge and steps down to sit under the bar when it appears (see
234		- * notch.css), so letting the bar retract out from over it mid-reach
235		- * would drop the notch back up under the pointer.
236		- */
237		-body.os-active.os-admin-bar-dynamic:has( .os-notch:hover ) #wpadminbar,
238		-body.os-active.os-admin-bar-dynamic:has( .os-notch:focus-visible ) #wpadminbar {
	230	+body.os-active.os-admin-bar-dynamic #wpadminbar:active {
239	231	inset-block-start: 0 !important;
240	232	}
241	233
242	234	/*
		@@ -359,8 +351,12 @@
359	351	* W inside, so the two columns share an axis. `--os-dock-width`
360	352	* is now set on :root (see settings.ts → apply()) so it reaches
361	353	* siblings of #os-shell like the admin bar.
362	354	*/
	355	+body.os-active #wpadminbar #wp-admin-bar-menu-toggle {
	356	+ display: none;
	357	+}
	358	+
363	359	body.os-active #wpadminbar #wp-admin-bar-wp-logo {
364	360	width: var( --os-dock-width, 56px );
365	361	}
366	362
		@@ -828,9 +824,10 @@
828	824	background-image: var(--os-tile-image, none);
829	825	background-repeat: var(--os-tile-image-repeat, no-repeat);
830	826	background-size: var(--os-tile-image-size, auto);
831	827	background-position: var(--os-tile-image-position, center);
832		- color: var(--os-fg, #fff);
	828	+ /* Also the glyph: silhouette art is masked with `currentColor`. */
	829	+ color: var(--os-desk-fg, var(--os-fg, #fff));
833	830	cursor: pointer;
834	831	border-radius: 8px;
835	832	transition: background-color 0.15s ease;
836	833	/* Positioning context for `.os-icon__badge`. */
		@@ -892,9 +889,9 @@
892	889	.os-icon:focus-visible {
893	890	/* background-COLOR, not the shorthand: the shorthand would reset
894	891	* the ICON_TILE texture declared above, so a themed tile would
895	892	* vanish on hover. */
896		- background-color: rgba(255, 255, 255, 0.12);
	893	+ background-color: var(--os-icon-hover-bg, rgba(255, 255, 255, 0.12));
897	894	outline: none;
898	895	}
899	896
900	897	.os-icon:focus-visible {
		@@ -918,12 +915,20 @@
918	915	max-height: 48px;
919	916	object-fit: contain;
920	917	}
921	918
	919	+.os-icon__image {
	920	+ filter: var(--os-icon-glyph-shadow, none);
	921	+}
	922	+
922	923	.os-icon__label {
923	924	font-size: 12px;
924	925	text-align: center;
925		- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	926	+ background: var(--os-icon-label-bg, transparent);
	927	+ border-radius: 6px;
	928	+ /* Inline only: a two-line caption already fills the 96px grid row. */
	929	+ padding: 0 6px;
	930	+ text-shadow: var(--os-icon-label-shadow, 0 1px 2px rgba(0, 0, 0, 0.45));
926	931	line-height: 1.2;
927	932	word-break: break-word;
928	933	}
929	934
		@@ -1074,8 +1079,21 @@
1074	1079	.os-widgets__card-close:focus-visible {
1075	1080	opacity: 1;
1076	1081	}
1077	1082
	1083	+/*
	1084	+ * The corner close button rests at `opacity: 0` and only the card's
	1085	+ * hover reveals it, so on touch it is invisible and the widget cannot
	1086	+ * be dismissed at all. Rest it at the same 0.7 the chrome header's
	1087	+ * close button uses there, rather than a full 1, so a card that is
	1088	+ * only being read does not wear a hard × in its corner.
	1089	+ */
	1090	+@media ( hover: none ) {
	1091	+ .os-widgets__card-close {
	1092	+ opacity: 0.7;
	1093	+ }
	1094	+}
	1095	+
1078	1096	.os-widgets__card-close:hover {
1079	1097	background: var( --os-ui-danger, #d63638 );
1080	1098	color: var( --os-ui-fg-on-accent, #fff );
1081	1099	}
		@@ -1188,9 +1206,9 @@
1188	1206	.os-widgets__card-redock:hover,
1189	1207	.os-widgets__card-redock:focus-visible {
1190	1208	opacity: 1;
1191	1209	background: var( --wp-admin-theme-color, #2271b1 );
1192		- color: var( --os-ui-fg-on-accent, #fff );
	1210	+ color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) );
1193	1211	}
1194	1212
1195	1213	/*
1196	1214	* Floating widgets — absolute-positioned, inline top/left/width/height
		@@ -1328,12 +1346,17 @@
1328	1346	align-items: center;
1329	1347	justify-content: center;
1330	1348	gap: 7px;
1331	1349	pointer-events: none;
1332		- background: transparent;
1333		- border: 1px dashed rgba( 255, 255, 255, 0.22 );
	1350	+ /* `.os-widgets__card`'s glass, to the number: the pill trails a
	1351	+ stack of those cards. Its dashed edge is what makes it a slot. */
	1352	+ background: var( --os-widgets-add-bg, transparent );
	1353	+ backdrop-filter: blur( 18px ) saturate( 140% );
	1354	+ -webkit-backdrop-filter: blur( 18px ) saturate( 140% );
	1355	+ box-shadow: 0 8px 28px var( --os-widgets-add-shadow, rgba( 0, 0, 0, 0.35 ) );
	1356	+ border: 1px dashed var( --os-widgets-add-border, rgba( 255, 255, 255, 0.22 ) );
1334	1357	border-radius: 10px;
1335		- color: rgba( 255, 255, 255, 0.72 );
	1358	+ color: var( --os-ui-color-text, var( --os-fg, #fff ) );
1336	1359	font: inherit;
1337	1360	font-weight: 500;
1338	1361	cursor: pointer;
1339	1362	opacity: 0;
		@@ -1371,10 +1394,10 @@
1371	1394	}
1372	1395
1373	1396	.os-widgets__add:hover {
1374	1397	border-color: rgba( 255, 255, 255, 0.4 );
1375		- background: rgba( 255, 255, 255, 0.06 );
1376		- color: var( --os-ui-fg-on-accent, #fff );
	1398	+ background: var( --os-widgets-add-bg-hover, rgba( 255, 255, 255, 0.06 ) );
	1399	+ color: var( --os-fg, #fff );
1377	1400	}
1378	1401
1379	1402	.os-widgets__add:focus-visible {
1380	1403	outline: 2px solid var( --wp-admin-theme-color, #2271b1 );