← All changes | assets/css/window-overview.css +40 -38 1.1.6 → 1.1.10 View file →

		@@ -359,8 +359,31 @@
359	359	max-width: min( 92vw, 960px );
360	360	overflow-x: auto;
361	361	}
362	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	+
363	386	.os-area--overview .os-overview-top-bar {
364	387	opacity: 1;
365	388	pointer-events: auto;
366	389	}
		@@ -515,12 +538,12 @@
515	538	flex-direction: column;
516	539	gap: 6px;
517	540	}
518	541
519		-/* Tile corner buttons: rename on the leading edge, close on the
	542	+/* Tile corner buttons: edit on the leading edge, close on the
520	543	* trailing one, otherwise identical. */
521	544	.os-overview-top-bar__tile-close,
522		-.os-overview-top-bar__tile-rename {
	545	+.os-overview-top-bar__tile-edit {
523	546	position: absolute;
524	547	top: 4px;
525	548	width: 18px;
526	549	height: 18px;
		@@ -539,9 +562,9 @@
539	562	border: none;
540	563	padding: 0;
541	564	}
542	565
543		-.os-overview-top-bar__tile-rename {
	566	+.os-overview-top-bar__tile-edit {
544	567	inset-inline-start: 4px;
545	568	}
546	569
547	570	.os-overview-top-bar__tile-close {
		@@ -550,12 +573,12 @@
550	573
551	574	.os-overview-top-bar__tile-wrapper:is( :hover, :focus-within )
552	575	:is(
553	576	.os-overview-top-bar__tile-close,
554		- .os-overview-top-bar__tile-rename
	577	+ .os-overview-top-bar__tile-edit
555	578	),
556	579	.os-overview-top-bar__tile-close:focus-visible,
557		-.os-overview-top-bar__tile-rename:focus-visible {
	580	+.os-overview-top-bar__tile-edit:focus-visible {
558	581	opacity: 1;
559	582	}
560	583
561	584	.os-overview-top-bar__tile-close:hover {
		@@ -566,36 +589,26 @@
566	589	/*
567	590	* The desk's actions — a column below the tile, separated by the
568	591	* wrapper's gap. Not over the preview: the preview is the tile's
569	592	* picture of the desk, and a bar laid across it covers the one thing
570		- * the tile is there to show. Not the corners either — rename and
571		- * close have those — and these two are the actions that need a word,
572		- * because no glyph says "rebuild this desk" or "change what it is".
	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".
573	596	*
574		- * Two rows. **Restore** is always visible, but only painted on a desk
575		- * with something to restore, so its absence is information. **Edit**
576		- * is revealed on hover and keyboard focus, like rename and close: it
577		- * is a way to change the desk rather than a thing about it, and a row
578		- * of Edit buttons at rest would make the bar read as a form. The
579		- * column reserves both rows' height whether or not either is present,
580		- * so every tile box stays on the same line.
	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.
581	601	*/
582	602	.os-overview-top-bar__tile-actions {
583	603	display: flex;
584	604	flex-direction: column;
585	605	gap: 4px;
586		- /*
587		- * One 22px row: Edit, which every desk has. Reserving two here
588		- * made every bar as tall as its most elaborate desk, so a user
589		- * with no workspaces at all paid a row of empty space under every
590		- * tile for a button none of their desks could show.
591		- */
592		- min-height: 22px;
593	606	}
594	607
595		-/* Two 22px rows and the gap, once some desk on the bar can restore. */
	608	+/* One 22px row, once some desk on the bar can restore. */
596	609	.os-overview-top-bar__list--restorable .os-overview-top-bar__tile-actions {
597		- min-height: 48px;
	610	+ min-height: 22px;
598	611	}
599	612
600	613	.os-overview-top-bar__tile-action {
601	614	display: flex;
		@@ -629,9 +642,9 @@
629	642
630	643	.os-overview-top-bar__tile-action:hover {
631	644	background: var( --os-ui-accent, #f252fc );
632	645	border-color: var( --os-ui-accent, #f252fc );
633		- color: var( --os-ui-fg-on-accent, #fff );
	646	+ color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) );
634	647	}
635	648
636	649	.os-overview-top-bar__tile-action:focus-visible {
637	650	outline: 2px solid var( --wp-admin-theme-color, #2271b1 );
		@@ -637,19 +650,8 @@
637	650	outline: 2px solid var( --wp-admin-theme-color, #2271b1 );
638	651	outline-offset: 2px;
639	652	}
640	653
641		-/* Edit rests hidden; the wrapper's hover / focus brings it up. */
642		-.os-overview-top-bar__tile-edit {
643		- opacity: 0;
644		-}
645		-
646		-.os-overview-top-bar__tile-wrapper:is( :hover, :focus-within )
647		- .os-overview-top-bar__tile-edit,
648		-.os-overview-top-bar__tile-edit:focus-visible {
649		- opacity: 1;
650		-}
651		-
652	654	@media ( prefers-reduced-motion: reduce ) {
653	655	.os-overview-top-bar__tile-action {
654	656	transition: none;
655	657	}
		@@ -654,11 +656,11 @@
654	656	transition: none;
655	657	}
656	658	}
657	659
658		-.os-overview-top-bar__tile-rename:hover {
	660	+.os-overview-top-bar__tile-edit:hover {
659	661	background: var( --os-ui-accent, #f252fc );
660		- color: var( --os-ui-fg-on-accent, #fff );
	662	+ color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) );
661	663	}
662	664
663	665	/*
664	666	* The label while it is being edited. Neutral hairline, not the