← All changes | assets/css/desktop.css +193 -24 1.1.12 → 1.1.13 View file →

		@@ -338,8 +338,132 @@
338	338	padding-top: 0 !important;
339	339	}
340	340
341	341	/*
	342	+ * A desktop theme that draws the toolbar.
	343	+ *
	344	+ * The toolbar's colours normally belong to the user's admin colour
	345	+ * scheme, whose own stylesheet paints it. A theme takes them over only
	346	+ * when it declares an `--os-toolbar-*` token, which is what puts
	347	+ * `os-toolbar-themed` on the body (PHP on first paint, the theme apply
	348	+ * pass on a live switch). Without that class none of this matches, so
	349	+ * a scheme's toolbar stays the scheme's under every other theme.
	350	+ *
	351	+ * The fallbacks are Core's own values for the default scheme.
	352	+ */
	353	+body.os-active.os-toolbar-themed #wpadminbar {
	354	+ background: var(--os-toolbar-bg, #1d2327);
	355	+ box-shadow: var(--os-toolbar-shadow, none);
	356	+ -webkit-font-smoothing: var(--os-font-smoothing, subpixel-antialiased);
	357	+}
	358	+
	359	+body.os-active.os-toolbar-themed #wpadminbar :not(.ab-icon):not([class*="dashicons"]) {
	360	+ font-family: var(--os-toolbar-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	361	+ font-size: var(--os-toolbar-font-size, 13px);
	362	+}
	363	+
	364	+/*
	365	+ * Core sets the bar's line heights in ems against its 13px type. A
	366	+ * face at another size keeps Core's pixel lines (the bar's height for a
	367	+ * top-level item, 26px for a menu row), or its labels ride high or low
	368	+ * against the icons. A face whose metrics sit differently from the
	369	+ * system font's nudges its labels with `--os-toolbar-line-height`.
	370	+ */
	371	+body.os-active.os-toolbar-themed #wpadminbar .ab-top-menu > li > .ab-item,
	372	+body.os-active.os-toolbar-themed #wpadminbar .ab-top-menu > li > .ab-item :not(.ab-icon):not(img) {
	373	+ line-height: var(--os-toolbar-line-height, var(--wp-admin--admin-bar--height, 32px));
	374	+}
	375	+
	376	+body.os-active.os-toolbar-themed #wpadminbar .quicklinks .menupop ul li .ab-item {
	377	+ line-height: 26px;
	378	+}
	379	+
	380	+body.os-active.os-toolbar-themed #wpadminbar .ab-empty-item,
	381	+body.os-active.os-toolbar-themed #wpadminbar a.ab-item,
	382	+body.os-active.os-toolbar-themed #wpadminbar > #wp-toolbar span.ab-label,
	383	+body.os-active.os-toolbar-themed #wpadminbar > #wp-toolbar span.noticon {
	384	+ color: var(--os-toolbar-fg, #f0f0f1);
	385	+}
	386	+
	387	+body.os-active.os-toolbar-themed #wpadminbar .ab-icon::before,
	388	+body.os-active.os-toolbar-themed #wpadminbar .ab-item::before,
	389	+body.os-active.os-toolbar-themed #wpadminbar #adminbarsearch::before {
	390	+ color: var(--os-toolbar-icon, rgba(240, 246, 252, 0.6));
	391	+}
	392	+
	393	+body.os-active.os-toolbar-themed #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
	394	+body.os-active.os-toolbar-themed #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
	395	+body.os-active.os-toolbar-themed #wpadminbar .ab-top-menu > li.hover > .ab-item {
	396	+ background: var(--os-toolbar-hover-bg, #2c3338);
	397	+ color: var(--os-toolbar-hover-fg, #72aee6);
	398	+}
	399	+
	400	+body.os-active.os-toolbar-themed #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
	401	+body.os-active.os-toolbar-themed #wpadminbar > #wp-toolbar li.hover span.ab-label,
	402	+body.os-active.os-toolbar-themed #wpadminbar li:hover .ab-icon::before,
	403	+body.os-active.os-toolbar-themed #wpadminbar li:hover .ab-item::before,
	404	+body.os-active.os-toolbar-themed #wpadminbar li.hover .ab-icon::before,
	405	+body.os-active.os-toolbar-themed #wpadminbar li.hover .ab-item::before {
	406	+ color: var(--os-toolbar-hover-fg, #72aee6);
	407	+}
	408	+
	409	+body.os-active.os-toolbar-themed #wpadminbar .menupop .ab-sub-wrapper {
	410	+ background: var(--os-toolbar-menu-bg, #2c3338);
	411	+ box-shadow: var(--os-toolbar-menu-shadow, 0 3px 5px rgba(0, 0, 0, 0.2));
	412	+}
	413	+
	414	+/* The WordPress menu's lower group sits on a darker panel of its own. */
	415	+body.os-active.os-toolbar-themed #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
	416	+body.os-active.os-toolbar-themed #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
	417	+ background: var(--os-toolbar-menu-bg, #3c434a);
	418	+}
	419	+
	420	+body.os-active.os-toolbar-themed #wpadminbar .ab-submenu .ab-item,
	421	+body.os-active.os-toolbar-themed #wpadminbar .quicklinks .menupop ul li a,
	422	+body.os-active.os-toolbar-themed #wpadminbar .quicklinks .menupop ul li a strong {
	423	+ color: var(--os-toolbar-menu-fg, rgba(240, 246, 252, 0.7));
	424	+}
	425	+
	426	+/*
	427	+ * The account menu's name lines. Core colours them by ID, which
	428	+ * out-ranks the rows above, so they are restated here, hover included.
	429	+ */
	430	+body.os-active.os-toolbar-themed #wpadminbar #wp-admin-bar-user-info .display-name {
	431	+ color: var(--os-toolbar-menu-fg, #fff);
	432	+}
	433	+
	434	+body.os-active.os-toolbar-themed #wpadminbar #wp-admin-bar-user-info .username {
	435	+ color: var(--os-toolbar-menu-fg-muted, #a7aaad);
	436	+}
	437	+
	438	+body.os-active.os-toolbar-themed #wpadminbar #wp-admin-bar-user-info a:hover span,
	439	+body.os-active.os-toolbar-themed #wpadminbar #wp-admin-bar-user-info a:focus span {
	440	+ color: var(--os-toolbar-menu-hover-fg, #72aee6);
	441	+}
	442	+
	443	+body.os-active.os-toolbar-themed #wpadminbar .quicklinks .menupop ul li a:hover,
	444	+body.os-active.os-toolbar-themed #wpadminbar .quicklinks .menupop ul li a:focus,
	445	+body.os-active.os-toolbar-themed #wpadminbar .quicklinks .menupop.hover ul li a:hover,
	446	+body.os-active.os-toolbar-themed #wpadminbar .quicklinks .menupop.hover ul li a:focus {
	447	+ background: var(--os-toolbar-menu-hover-bg, transparent);
	448	+ color: var(--os-toolbar-menu-hover-fg, #72aee6);
	449	+}
	450	+
	451	+/*
	452	+ * The time, for a theme that draws the toolbar as a menu bar
	453	+ * (`src/desktop-themes/toolbar-clock.ts`). It is not a control, so it
	454	+ * does not light up under the pointer.
	455	+ */
	456	+body.os-active.os-toolbar-themed #wpadminbar #wp-admin-bar-os-clock {
	457	+ display: var(--os-toolbar-clock-display, none);
	458	+}
	459	+
	460	+body.os-active.os-toolbar-themed #wpadminbar #wp-admin-bar-os-clock > .ab-item {
	461	+ background: none;
	462	+ color: var(--os-toolbar-fg, #f0f0f1);
	463	+}
	464	+
	465	+/*
342	466	* Align the admin-bar W logo with the dock below it.
343	467	*
344	468	* Without this rule the admin bar's leftmost item (the WordPress W)
345	469	* renders at its Core-dictated ~44 px width, while the dock below it
		@@ -376,8 +500,16 @@
376	500	margin: 0;
377	501	}
378	502
379	503	/*
	504	+ * Core nudges the W down 2px to centre it from the top of its cell.
	505	+ * The flex cell above already centres it, so the nudge would sit it low.
	506	+ */
	507	+body.os-active #wpadminbar #wp-admin-bar-wp-logo > .ab-item > .ab-icon::before {
	508	+ top: 0;
	509	+}
	510	+
	511	+/*
380	512	* Classic wpcontent carries a `margin-left: 160px` for the sidebar. With
381	513	* the sidebar hidden we let wpcontent fall back to flush — the shell is
382	514	* fixed-positioned anyway so this doesn't change the shell's layout, it
383	515	* just prevents a phantom sidebar gutter in any stray visible content.
		@@ -425,8 +557,14 @@
425	557	* See `--os-backstop`.
426	558	*/
427	559	background: var(--os-backstop, #1d2327);
428	560	/*
	561	+ * A bitmap face drawn on whole pixels wants plain greyscale
	562	+ * smoothing; the fallback is what the shell inherits from Core's
	563	+ * `#wpwrap` anyway.
	564	+ */
	565	+ -webkit-font-smoothing: var(--os-font-smoothing, subpixel-antialiased);
	566	+ /*
429	567	* Shell typeface. Every piece of chrome that doesn't set its own
430	568	* face inherits from here — dock labels, desktop icon labels,
431	569	* widgets, the overview. Windows override with `--os-ui-font` on
432	570	* their body, so a theme can run a display face on the desk and a
		@@ -920,14 +1058,14 @@
920	1058	filter: var(--os-icon-glyph-shadow, none);
921	1059	}
922	1060
923	1061	.os-icon__label {
924		- font-size: 12px;
	1062	+ font-size: var(--os-icon-label-font-size, 12px);
925	1063	text-align: center;
926	1064	background: var(--os-icon-label-bg, transparent);
927		- border-radius: 6px;
	1065	+ border-radius: var(--os-icon-label-radius, 6px);
928	1066	/* Inline only: a two-line caption already fills the 96px grid row. */
929		- padding: 0 6px;
	1067	+ padding: var(--os-icon-label-padding, 0 6px);
930	1068	text-shadow: var(--os-icon-label-shadow, 0 1px 2px rgba(0, 0, 0, 0.45));
931	1069	line-height: 1.2;
932	1070	word-break: break-word;
933	1071	}
		@@ -940,21 +1078,38 @@
940	1078	* drag / resize / click-through behaviour is unaffected.
941	1079	* --------------------------------------------------------------- */
942	1080
943	1081	.os-widgets {
944		- border-radius: 14px;
945	1082	position: absolute;
946	1083	/*
947	1084	* Inside the work area vertically — see `.os-icons` for why the
948		- * insets are here. The inline edge stays a plain 16px: the column
949		- * hugs the trailing side, which is a logical choice, while the
950		- * side insets are physical; and a side rail never claims one
951		- * anyway (it is a flex sibling, the area is already narrower).
	1085	+ * insets are here. The inline edge is logical: the column hugs
	1086	+ * the trailing side, while the side insets are physical; and a
	1087	+ * side rail never claims one anyway (it is a flex sibling, the
	1088	+ * area is already narrower).
	1089	+ *
	1090	+ * The cards sit 16px in from the area's top and trailing edges
	1091	+ * and 16px above the work area's foot, but the box reaches
	1092	+ * further than that and pads back in. The column scrolls, and a
	1093	+ * scroll container clips everything inside it to its padding
	1094	+ * box, the cards' drop shadow included: with the box hugging the
	1095	+ * cards, the shadow ended in a hard rectangle the size of the
	1096	+ * column, easy to see on a light wallpaper. The padding is the
	1097	+ * room the shadow needs (it reaches 28px out and 36px down, more
	1098	+ * on hover). The trailing side only gets the 16px to the area's
	1099	+ * edge, since the area clips there anyway. The column is
	1100	+ * pointer-transparent, so the extra room catches nothing; the
	1101	+ * add-widget pill measures the content box, not this one.
952	1102	*/
953		- top: calc( var( --os-work-area-inset-top, 0px ) + 16px );
954		- bottom: calc( var( --os-work-area-inset-bottom, 80px ) + 16px );
955		- inset-inline-end: 16px;
	1103	+ box-sizing: content-box;
	1104	+ top: var( --os-work-area-inset-top, 0px );
	1105	+ bottom: calc( var( --os-work-area-inset-bottom, 80px ) - 24px );
	1106	+ inset-inline-end: 0;
956	1107	width: 320px;
	1108	+ --_os-widgets-room-start: 40px;
	1109	+ --_os-widgets-room-end: 16px;
	1110	+ padding-block: 16px 40px;
	1111	+ padding-inline: var( --_os-widgets-room-start ) var( --_os-widgets-room-end );
957	1112	display: flex;
958	1113	flex-direction: column;
959	1114	gap: 12px;
960	1115	z-index: 1;
		@@ -1019,16 +1174,20 @@
1019	1174	background-image: var( --os-widget-image, none );
1020	1175	background-repeat: var( --os-widget-image-repeat, repeat );
1021	1176	background-size: var( --os-widget-image-size, auto );
1022	1177	background-position: var( --os-widget-image-position, center );
1023		- backdrop-filter: blur( 18px ) saturate( 140% );
1024		- -webkit-backdrop-filter: blur( 18px ) saturate( 140% );
1025		- border: 1px solid rgba( 255, 255, 255, 0.08 );
1026		- border-radius: 14px;
1027		- color: var( --os-ui-fg-on-accent, #fff );
1028		- box-shadow:
	1178	+ backdrop-filter: var( --os-widget-card-backdrop, blur( 18px ) saturate( 140% ) );
	1179	+ -webkit-backdrop-filter: var( --os-widget-card-backdrop, blur( 18px ) saturate( 140% ) );
	1180	+ border: var( --os-widget-card-border, 1px solid rgba( 255, 255, 255, 0.08 ) );
	1181	+ border-radius: var( --os-widget-card-radius, 14px );
	1182	+ /* The widget contract's text colour, which is what a widget's own
	1183	+ * stylesheet is told to read. */
	1184	+ color: var( --os-ui-color-text, var( --os-ui-fg-on-accent, #fff ) );
	1185	+ box-shadow: var(
	1186	+ --os-widget-card-shadow,
1029	1187	0 8px 28px rgba( 0, 0, 0, 0.35 ),
1030		- inset 0 0 0 1px rgba( 255, 255, 255, 0.04 );
	1188	+ inset 0 0 0 1px rgba( 255, 255, 255, 0.04 )
	1189	+ );
1031	1190	transition:
1032	1191	box-shadow 0.18s ease,
1033	1192	opacity 0.18s ease;
1034	1193	}
		@@ -1036,11 +1195,13 @@
1036	1195	/* Hover feedback is shadow-only — no transform. Cards must feel
1037	1196	* anchored; a hover nudge reads as the widget drifting under the
1038	1197	* pointer (and fought the user's chosen position on floating cards). */
1039	1198	.os-widgets__card:hover {
1040		- box-shadow:
	1199	+ box-shadow: var(
	1200	+ --os-widget-card-shadow-hover,
1041	1201	0 12px 36px rgba( 0, 0, 0, 0.45 ),
1042		- inset 0 0 0 1px rgba( 255, 255, 255, 0.08 );
	1202	+ inset 0 0 0 1px rgba( 255, 255, 255, 0.08 )
	1203	+ );
1043	1204	}
1044	1205
1045	1206	.os-widgets__card-body {
1046	1207	padding: 16px;
		@@ -1338,10 +1499,14 @@
1338	1499	*/
1339	1500	.os-widgets__add {
1340	1501	position: absolute;
1341	1502	top: 0;
1342		- left: 50%;
1343		- transform: translateX( -50% );
	1503	+ /* Centred over the cards, not over the column's box: the column
	1504	+ * pads out unevenly to give the card shadows room (see
	1505	+ * `.os-widgets`), so the box's own middle is off to one side. */
	1506	+ inset-inline: var( --_os-widgets-room-start, 0px ) var( --_os-widgets-room-end, 0px );
	1507	+ width: fit-content;
	1508	+ margin-inline: auto;
1344	1509	padding: 8px 22px;
1345	1510	display: flex;
1346	1511	align-items: center;
1347	1512	justify-content: center;
		@@ -1435,9 +1600,9 @@
1435	1600
1436	1601	.os-widget-clock__date {
1437	1602	margin-top: 4px;
1438	1603	font-size: 13px;
1439		- color: rgba( 255, 255, 255, 0.75 );
	1604	+ color: var( --os-ui-color-text-subtle, rgba( 255, 255, 255, 0.75 ) );
1440	1605	letter-spacing: 0.02em;
1441	1606	}
1442	1607
1443	1608	/* ---------------------------------------------------------------
		@@ -1447,9 +1612,13 @@
1447	1612	* --------------------------------------------------------------- */
1448	1613
1449	1614	.os-widget-picker {
1450	1615	position: fixed;
1451		- width: 320px;
	1616	+ /* Border-box so the picker script can cap max-height to the
	1617	+ * room it measured, frame included. 342 = the 320px list plus
	1618	+ * the padding and border it always carried. */
	1619	+ box-sizing: border-box;
	1620	+ width: 342px;
1452	1621	max-height: 60vh;
1453	1622	overflow-y: auto;
1454	1623	padding: 10px;
1455	1624	border-radius: 14px;