← All changes | css/common/_subnav.scss +21 -42 3.10.0 → trunk View file →

		@@ -11,9 +11,9 @@
11	11	min-block-size: 53px;
12	12	margin-inline-start: -22px;
13	13	inline-size: calc(100% + 42px);
14	14	overflow: hidden;
15		- background: #fff;
	15	+ background: var(--cs-color-surface);
16	16
17	17	&::before,
18	18	&::after {
19	19	position: absolute;
		@@ -27,14 +27,14 @@
27	27	}
28	28
29	29	&::before {
30	30	inset-inline-start: 0;
31		- background: linear-gradient(to right, #fff, transparent);
	31	+ background: linear-gradient(to right, var(--cs-color-surface), transparent);
32	32	}
33	33
34	34	&::after {
35	35	inset-inline-end: 0;
36		- background: linear-gradient(to left, #fff, transparent);
	36	+ background: linear-gradient(to left, var(--cs-color-surface), transparent);
37	37	}
38	38
39	39	&.has-scroll-start::before,
40	40	&.has-scroll-end::after {
		@@ -52,9 +52,9 @@
52	52	overflow-x: auto;
53	53	scrollbar-width: thin;
54	54
55	55	// The row line is painted on the scrollport so it remains fixed while tabs scroll.
56		- background: linear-gradient(to top, #e2e2e4 1px, #fff 1px);
	56	+ background: linear-gradient(to top, var(--cs-color-border-subtle) 1px, var(--cs-color-surface) 1px);
57	57
58	58	@media (width <= 960px) {
59	59	li {
60	60	flex: 1 1 0;
		@@ -116,12 +116,12 @@
116	116	font-size: 14px;
117	117	font-weight: 600;
118	118	line-height: 1.5;
119	119	white-space: nowrap;
120		- color: #646970;
	120	+ color: var(--cs-color-text-muted);
121	121	text-decoration: none;
122	122	box-sizing: border-box;
123		- border-inline-end: 1px solid #e2e2e4;
	123	+ border-inline-end: 1px solid var(--cs-color-border-subtle);
124	124
125	125	// The text-only "All Snippets" tab uses a slightly wider gap between
126	126	// its label and count than tabs that lead with a badge or icon.
127	127	&.all-type-link {
		@@ -127,8 +127,12 @@
127	127	&.all-type-link {
128	128	gap: 12px;
129	129	}
130	130
	131	+ &.pro-locked-type {
	132	+ color: var(--cs-color-text-muted);
	133	+ }
	134	+
131	135	svg {
132	136	display: block;
133	137	inline-size: 24px;
134	138	block-size: 24px;
		@@ -136,20 +140,20 @@
136	140
137	141	&:hover,
138	142	&:focus,
139	143	&:active {
140		- color: theme.$accent;
	144	+ color: var(--cs-color-accent);
141	145	}
142	146
143	147	&.active-type {
144		- background: #f0f0f1;
145		- color: theme.$accent;
	148	+ background: var(--cs-color-surface-muted);
	149	+ color: var(--cs-color-accent);
146	150	}
147	151
148	152	// Suppress the persistent focus ring left behind after a mouse click;
149	153	// keyboard navigation still gets a visible outline via :focus-visible.
150	154	&:focus-visible {
151		- outline: 2px solid theme.$accent;
	155	+ outline: 2px solid var(--cs-color-accent);
152	156	outline-offset: -2px;
153	157	box-shadow: none;
154	158	}
155	159
		@@ -156,12 +160,8 @@
156	160	&:focus:not(:focus-visible) {
157	161	outline: none;
158	162	box-shadow: none;
159	163	}
160		-
161		- &.pro-locked-type {
162		- color: #646970;
163		- }
164	164	}
165	165
166	166	}
167	167
		@@ -180,12 +180,12 @@
180	180	block-size: 38px;
181	181	box-sizing: border-box;
182	182	padding: 0;
183	183	margin: 0;
184		- background: #f0f0f1;
185		- color: #646970;
	184	+ background: var(--cs-color-surface-muted);
	185	+ color: var(--cs-color-text-muted);
186	186	border: none;
187		- border-radius: 4.5px;
	187	+ border-radius: 5px;
188	188	cursor: pointer;
189	189
190	190	svg {
191	191	display: block;
		@@ -192,13 +192,13 @@
192	192	}
193	193
194	194	&:hover,
195	195	&:focus {
196		- color: #2c3337;
	196	+ color: var(--cs-color-text);
197	197	}
198	198
199	199	&.active-view {
200		- background: theme.$accent;
	200	+ background: var(--cs-color-accent);
201	201	color: #fff;
202	202
203	203	&:hover,
204	204	&:focus {
		@@ -207,28 +207,8 @@
207	207	}
208	208	}
209	209	}
210	210
211		-// Slot that adopts the WordPress Screen Options / Help tabs so they appear
212		-// directly below the snippet-type nav instead of above the page content.
213		-.snippets-screen-meta-slot {
214		- #screen-meta-links {
215		- float: none;
216		- display: flex;
217		- justify-content: flex-end;
218		- margin: 0;
219		- border-color: #e2e2e4;
220		-
221		- .show-settings {
222		- border-color: #e2e2e4;
223		- }
224		- }
225		-
226		- #screen-meta {
227		- margin: 0;
228		- }
229		-}
230		-
231	211	// Item count shown after a subnav tab's label, using the label colour at reduced opacity.
232	212	.snippet-type-nav .subnav-count {
233	213	font-size: 14px;
234	214	font-weight: 600;
		@@ -266,9 +246,8 @@
266	246	display: inline;
267	247	}
268	248	}
269	249
270		-// When an admin notice pushes the page content down, restore the top border
271		-// above the subnav bar (no extra margin — the wrapper sits flush).
	250	+// The notice already supplies the top edge; do not render a second border.
272	251	.notice + .wrap .snippet-type-nav-wrapper {
273		- border-block-start: 1px solid #e2e2e4;
	252	+ border-block-start: 0;
274	253	}