← All changes | assets/js/widget-drafts.css +69 -4 1.1.3 → 1.1.10 View file →

		@@ -53,9 +53,10 @@
53	53	margin: 0 -8px;
54	54	border-radius: 8px;
55	55	}
56	56
57		-.dm-drafts__row:hover {
	57	+.dm-drafts__row:hover,
	58	+.dm-drafts__row:has( a.dm-drafts__link:focus-visible ) {
58	59	background: color-mix( in srgb, currentColor 10%, transparent );
59	60	}
60	61
61	62	.dm-drafts__row.is-trashing {
		@@ -70,13 +71,69 @@
70	71	align-items: baseline;
71	72	justify-content: space-between;
72	73	gap: 10px;
73	74	padding: 6px 8px;
	75	+ text-decoration: none;
	76	+}
	77	+
	78	+/*
	79	+ * Colour and focus ring, restated with the element in the selector.
	80	+ *
	81	+ * wp-admin repaints every `<a>` on interaction: `a:hover, a:active`
	82	+ * to #135e96 and `a:focus` to #043959, plus a hairline ring and a 2px
	83	+ * radius. Those selectors out-specify a plain
	84	+ * `.dm-drafts__link { color: inherit }`, so the row a user had just
	85	+ * clicked went dark navy on dark glass, about 1.5:1 against the card
	86	+ * it sits on. The one draft they could no longer read was the one
	87	+ * they were working on. Leading `a.` out-specifies core in turn, and
	88	+ * every interactive state is named so none of them can leak back.
	89	+ *
	90	+ * The ring is ours for the same reason the text is. Core's is the
	91	+ * neat accent on a 2px radius: it neither follows the row's 8px
	92	+ * corner nor holds contrast on a card that can be arbitrarily light
	93	+ * or dark, since the widget is glass over the wallpaper.
	94	+ * `--dm-drafts-accent` (defined further down) is the accent already
	95	+ * mixed toward `currentColor` for exactly that reason.
	96	+ */
	97	+a.dm-drafts__link,
	98	+a.dm-drafts__link:hover,
	99	+a.dm-drafts__link:focus,
	100	+a.dm-drafts__link:active,
	101	+a.dm-drafts__link:visited {
74	102	color: inherit;
75		- text-decoration: none;
	103	+ border-radius: 8px;
76	104	}
77	105
78	106	/*
	107	+ * Press feedback.
	108	+ *
	109	+ * Core's was a colour swap (`a:active` to #135e96), and it went out
	110	+ * with the rest of the leak above, which left a press saying nothing
	111	+ * at all. The shell answers a press with a scale rather than a hue:
	112	+ * `.os-constellation__row`, a row of this same shape, uses the same
	113	+ * 0.985. It costs no colour, which is what a card sitting on an
	114	+ * arbitrary wallpaper can least afford to spend, and unlike a hover
	115	+ * fill it works under a finger as well as a pointer.
	116	+ */
	117	+a.dm-drafts__link:active {
	118	+ transform: scale( 0.985 );
	119	+}
	120	+
	121	+a.dm-drafts__link:focus-visible {
	122	+ outline: 2px solid var( --dm-drafts-accent, #2271b1 );
	123	+ outline-offset: -2px;
	124	+ box-shadow: none;
	125	+}
	126	+
	127	+/* Core rings on `:focus`, not `:focus-visible`, so a click parks a
	128	+ ring on the row long after the draft has opened in its window.
	129	+ Keyboard focus keeps the ring above; pointer focus drops it. */
	130	+a.dm-drafts__link:focus:not( :focus-visible ) {
	131	+ outline: none;
	132	+ box-shadow: none;
	133	+}
	134	+
	135	+/*
79	136	* Row actions (Trash, Suggest) are `<os-button variant="ghost">` hosts —
80	137	* the component owns the focus ring, disabled semantics and theming; these
81	138	* rules only tune it into a 26px icon square via the documented
82	139	* `--os-ui-button-*` surface and the `button` shadow part. Both stay hidden
		@@ -106,12 +163,20 @@
106	163	height: 26px;
107	164	}
108	165
109	166	.dm-drafts__row:hover .dm-drafts__trash,
110		-.dm-drafts__row:hover .dm-drafts__spark,
	167	+.dm-drafts__row:hover .dm-drafts__spark {
	168	+ opacity: 0.65;
	169	+}
	170	+
	171	+/* Keyboard focus goes to full strength, where the pointer only gets
	172	+ there on hover: at 0.65 the control's own focus ring was being faded
	173	+ along with it, and a focus indicator is the one thing that cannot
	174	+ afford to be three-quarters there. `:focus-within` on the host
	175	+ matches when the button inside the shadow root has focus. */
111	176	.dm-drafts__trash:focus-within,
112	177	.dm-drafts__spark:focus-within {
113		- opacity: 0.65;
	178	+ opacity: 1;
114	179	}
115	180
116	181	.dm-drafts__trash:hover {
117	182	opacity: 1;