← All changes | assets/css/window-overview.css +206 -8 1.1.3 → 1.1.10 View file →

		@@ -327,8 +327,12 @@
327	327	top: 16px;
328	328	left: 50%;
329	329	transform: translateX( -50% );
330	330	z-index: 2;
	331	+ display: flex;
	332	+ flex-direction: column;
	333	+ align-items: center;
	334	+ gap: 10px;
331	335	opacity: 0;
332	336	pointer-events: none;
333	337	transition:
334	338	opacity 0.22s ease 0.06s,
		@@ -334,8 +338,52 @@
334	338	opacity 0.22s ease 0.06s,
335	339	transform 0.28s cubic-bezier( 0.2, 0, 0.2, 1 ) 0.06s;
336	340	}
337	341
	342	+/* The row above the desktop tiles — the site switcher on a network,
	343	+ * where every site is its own OpenStation with its own desks. Its own
	344	+ * panel, so the switcher reads as the thing the tiles hang under, not
	345	+ * as one more tile. `OVERVIEW_TOP_BAR_HEADER_RESERVE` in
	346	+ * `overview-constants.ts` is this row's height plus the gap. */
	347	+.os-overview-top-bar__header {
	348	+ display: flex;
	349	+ align-items: center;
	350	+ justify-content: center;
	351	+ padding: 6px 8px;
	352	+ border-radius: 14px;
	353	+ background-color: var( --os-ui-scrim, rgba( 0, 0, 0, 0.32 ) );
	354	+ backdrop-filter: blur( 18px ) saturate( 140% );
	355	+ -webkit-backdrop-filter: blur( 18px ) saturate( 140% );
	356	+ box-shadow:
	357	+ 0 8px 28px rgba( 0, 0, 0, 0.35 ),
	358	+ inset 0 0 0 1px rgba( 255, 255, 255, 0.08 );
	359	+ max-width: min( 92vw, 960px );
	360	+ overflow-x: auto;
	361	+}
	362	+
	363	+/* An install that joined from elsewhere wears a mark before its name,
	364	+ * and one line stands before the first of them, so the row says which
	365	+ * sites are this network's own and which are external. Both are light
	366	+ * DOM the switcher writes into the segment; its button is out of
	367	+ * reach behind the shadow root. */
	368	+.os-site-switcher__divider {
	369	+ flex: none;
	370	+ align-self: stretch;
	371	+ width: 1px;
	372	+ margin: 5px 3px;
	373	+ background-color: var( --os-ui-border-strong, #c3c4c7 );
	374	+}
	375	+
	376	+.os-site-switcher__mark.dashicons {
	377	+ font-size: 14px;
	378	+ width: 14px;
	379	+ height: 14px;
	380	+ line-height: 14px;
	381	+ margin-right: 5px;
	382	+ vertical-align: -2px;
	383	+ opacity: 0.75;
	384	+}
	385	+
338	386	.os-area--overview .os-overview-top-bar {
339	387	opacity: 1;
340	388	pointer-events: auto;
341	389	}
		@@ -424,8 +472,41 @@
424	472	color: rgba( 255, 255, 255, 0.7 );
425	473	letter-spacing: 0.02em;
426	474	}
427	475
	476	+/*
	477	+ * A workspace's identity on its overview tile — the glyph and the
	478	+ * accent it wears on the switcher pill. Overview is where desks are
	479	+ * compared, and a row of identical grey tiles is exactly where "which
	480	+ * one was the shop?" gets asked. A plain Space carries neither, so
	481	+ * these rules simply never match for one.
	482	+ */
	483	+.os-overview-top-bar__tile-glyph {
	484	+ width: 24px;
	485	+ height: 24px;
	486	+ margin-inline-end: 6px;
	487	+ font-size: 24px;
	488	+ line-height: 24px;
	489	+ color: var( --os-workspace-accent, rgba( 255, 255, 255, 0.7 ) );
	490	+}
	491	+
	492	+.os-overview-top-bar__tile--tinted {
	493	+ border-color: color-mix(
	494	+ in srgb,
	495	+ var( --os-workspace-accent, #f252fc ) 60%,
	496	+ transparent
	497	+ );
	498	+}
	499	+
	500	+/*
	501	+ * The active ring still wins: a tinted tile says which workspace it
	502	+ * is, the ring says which one you are on, and the second question is
	503	+ * the one overview is open to answer.
	504	+ */
	505	+.os-overview-top-bar__tile--tinted.os-overview-top-bar__tile--active {
	506	+ border-color: var( --wp-admin-theme-color, #2271b1 );
	507	+}
	508	+
428	509	.os-overview-top-bar__tile-label {
429	510	display: block;
430	511	padding: 6px 10px 8px;
431	512	text-align: center;
		@@ -436,17 +517,33 @@
436	517	overflow: hidden;
437	518	text-overflow: ellipsis;
438	519	}
439	520
	521	+/*
	522	+ * The tile, plus whatever hangs off it.
	523	+ *
	524	+ * A column so the Restore button can sit BELOW the tile rather than
	525	+ * over its preview — the preview is the tile's picture of the desk,
	526	+ * and a control laid across it covers the one thing the tile is for.
	527	+ * `position: relative` stays for the rename / close corner buttons,
	528	+ * which are still positioned against the wrapper.
	529	+ *
	530	+ * The tile keeps its content height (no `flex` on it), so when the
	531	+ * list stretches every wrapper to the tallest, a desk with no Restore
	532	+ * simply has empty space under its tile instead of a taller tile —
	533	+ * every tile box stays the same size and on the same line.
	534	+ */
440	535	.os-overview-top-bar__tile-wrapper {
441	536	position: relative;
442		- display: inline-block;
	537	+ display: inline-flex;
	538	+ flex-direction: column;
	539	+ gap: 6px;
443	540	}
444	541
445		-/* Tile corner buttons: rename on the leading edge, close on the
	542	+/* Tile corner buttons: edit on the leading edge, close on the
446	543	* trailing one, otherwise identical. */
447	544	.os-overview-top-bar__tile-close,
448		-.os-overview-top-bar__tile-rename {
	545	+.os-overview-top-bar__tile-edit {
449	546	position: absolute;
450	547	top: 4px;
451	548	width: 18px;
452	549	height: 18px;
		@@ -465,9 +562,9 @@
465	562	border: none;
466	563	padding: 0;
467	564	}
468	565
469		-.os-overview-top-bar__tile-rename {
	566	+.os-overview-top-bar__tile-edit {
470	567	inset-inline-start: 4px;
471	568	}
472	569
473	570	.os-overview-top-bar__tile-close {
		@@ -476,12 +573,12 @@
476	573
477	574	.os-overview-top-bar__tile-wrapper:is( :hover, :focus-within )
478	575	:is(
479	576	.os-overview-top-bar__tile-close,
480		- .os-overview-top-bar__tile-rename
	577	+ .os-overview-top-bar__tile-edit
481	578	),
482	579	.os-overview-top-bar__tile-close:focus-visible,
483		-.os-overview-top-bar__tile-rename:focus-visible {
	580	+.os-overview-top-bar__tile-edit:focus-visible {
484	581	opacity: 1;
485	582	}
486	583
487	584	.os-overview-top-bar__tile-close:hover {
		@@ -488,13 +585,84 @@
488	585	background: var( --os-ui-danger, #d63638 );
489	586	color: var( --os-ui-fg-on-accent, #fff );
490	587	}
491	588
492		-.os-overview-top-bar__tile-rename:hover {
	589	+/*
	590	+ * The desk's actions — a column below the tile, separated by the
	591	+ * wrapper's gap. Not over the preview: the preview is the tile's
	592	+ * picture of the desk, and a bar laid across it covers the one thing
	593	+ * the tile is there to show. Not the corners either — edit and close
	594	+ * have those — and Restore needs a word, because no glyph says
	595	+ * "rebuild this desk".
	596	+ *
	597	+ * **Restore** is always visible, but only painted on a desk with
	598	+ * something to restore, so its absence is information. Once any desk
	599	+ * on the bar can restore, every column reserves the row, so every
	600	+ * tile box stays on the same line.
	601	+ */
	602	+.os-overview-top-bar__tile-actions {
	603	+ display: flex;
	604	+ flex-direction: column;
	605	+ gap: 4px;
	606	+}
	607	+
	608	+/* One 22px row, once some desk on the bar can restore. */
	609	+.os-overview-top-bar__list--restorable .os-overview-top-bar__tile-actions {
	610	+ min-height: 22px;
	611	+}
	612	+
	613	+.os-overview-top-bar__tile-action {
	614	+ display: flex;
	615	+ align-items: center;
	616	+ justify-content: center;
	617	+ gap: 5px;
	618	+ height: 22px;
	619	+ padding: 0 8px;
	620	+ border: 1px solid rgba( 255, 255, 255, 0.14 );
	621	+ border-radius: 8px;
	622	+ background: var( --os-ui-scrim, rgba( 0, 0, 0, 0.42 ) );
	623	+ color: rgba( 255, 255, 255, 0.78 );
	624	+ font: inherit;
	625	+ font-size: 10px;
	626	+ font-weight: 600;
	627	+ letter-spacing: 0.04em;
	628	+ text-transform: uppercase;
	629	+ cursor: pointer;
	630	+ transition:
	631	+ opacity 0.15s ease,
	632	+ background-color 0.15s ease,
	633	+ border-color 0.15s ease,
	634	+ color 0.15s ease;
	635	+}
	636	+
	637	+.os-overview-top-bar__tile-action svg {
	638	+ width: 12px;
	639	+ height: 12px;
	640	+ flex: 0 0 auto;
	641	+}
	642	+
	643	+.os-overview-top-bar__tile-action:hover {
493	644	background: var( --os-ui-accent, #f252fc );
494		- color: var( --os-ui-fg-on-accent, #fff );
	645	+ border-color: var( --os-ui-accent, #f252fc );
	646	+ color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) );
495	647	}
496	648
	649	+.os-overview-top-bar__tile-action:focus-visible {
	650	+ outline: 2px solid var( --wp-admin-theme-color, #2271b1 );
	651	+ outline-offset: 2px;
	652	+}
	653	+
	654	+@media ( prefers-reduced-motion: reduce ) {
	655	+ .os-overview-top-bar__tile-action {
	656	+ transition: none;
	657	+ }
	658	+}
	659	+
	660	+.os-overview-top-bar__tile-edit:hover {
	661	+ background: var( --os-ui-accent, #f252fc );
	662	+ color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) );
	663	+}
	664	+
497	665	/*
498	666	* The label while it is being edited. Neutral hairline, not the
499	667	* accent: the active tile already wears an accent ring, and a second
500	668	* one reads as a rendering fault. `outline: none` is safe — the
		@@ -521,12 +689,42 @@
521	689	.os-overview-top-bar__tile-close {
522	690	display: none;
523	691	}
524	692
	693	+/*
	694	+ * The "+" is the place another desk goes, so it is the size of one.
	695	+ * It sits in the same wrapper a desk does, above an empty actions
	696	+ * block, which is what keeps the dashed box level with the tiles
	697	+ * instead of stretching over the buttons underneath them.
	698	+ */
525	699	.os-overview-top-bar__tile--add {
526	700	width: 60px;
527	701	background: transparent;
528	702	border-style: dashed;
	703	+}
	704	+
	705	+/*
	706	+ * The slot's own preview band: no gradient and no rule under it, since
	707	+ * there is nothing to preview. It keeps the band's height, which is
	708	+ * half of what makes the dashed box a tile tall.
	709	+ */
	710	+.os-overview-top-bar__tile--add .os-overview-top-bar__tile-preview {
	711	+ background: none;
	712	+ /* Transparent, not removed. The rule is 1px of the tile's height,
	713	+ and dropping it left the slot a pixel short of its neighbours. */
	714	+ border-bottom-color: transparent;
	715	+}
	716	+
	717	+/*
	718	+ * The glyph centres in the whole slot, not in the preview band it
	719	+ * happens to sit in. The two rows are there to make the box a tile
	720	+ * tall; a desk splits them into a picture and a name, and the slot has
	721	+ * neither, so its one mark belongs in the middle of the box. Taking it
	722	+ * out of flow is what lets the rows still do the measuring.
	723	+ */
	724	+.os-overview-top-bar__tile--add .os-overview-top-bar__tile-plus {
	725	+ position: absolute;
	726	+ inset: 0;
529	727	}
530	728
531	729	.os-overview-top-bar__tile--add:hover {
532	730	background: rgba( 255, 255, 255, 0.08 );