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

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