← All changes | css/manage.scss +49 -163 3.9.6 → trunk View file →

		@@ -1,186 +1,72 @@
1		-/**
2		- * Custom styling for the snippets table
3		- */
4		-
5		-@use 'sass:map';
6		-@use 'sass:color';
	1	+@use 'common/buttons';
7	2	@use 'common/theme';
8	3	@use 'common/badges';
9	4	@use 'common/switch';
10		-@use 'common/direction';
	5	+@use 'common/tooltips';
11	6	@use 'common/select';
12		-@use 'manage/cloud';
	7	+@use 'common/modal';
	8	+@use 'common/notices';
	9	+@use 'common/upsell';
	10	+@use 'common/toolbar';
	11	+@use 'common/subnav';
	12	+@use 'common/wp-admin';
	13	+@use 'common/page-subtitle';
	14	+@use 'manage/cloud-community';
	15	+@use 'manage/cloud-library';
	16	+@use 'manage/blueprints';
	17	+@use 'common/page-header';
	18	+@use 'common/kebab-menu';
	19	+@use 'common/demo';
	20	+@use 'manage/snippets-table';
	21	+@use 'manage/cloud-community-cards';
	22	+@use 'manage/ai-agent';
	23	+@use 'manage/ai-agent-demo';
	24	+@use 'manage/cloud-library-demo';
	25	+@use 'manage/blueprints-demo';
13	26
14		-.column-name,
15		-.column-type {
16		- .dashicons {
17		- font-size: 16px;
18		- inline-size: 16px;
19		- block-size: 16px;
20		- vertical-align: middle;
21		- }
22		-
23		- .dashicons-clock {
24		- vertical-align: middle;
25		- }
	27	+.tablenav .tablenav-pages {
	28	+ margin-block-end: 0;
26	29	}
27	30
28		-.active-snippet .column-name > .snippet-name {
29		- font-weight: 600;
	31	+.create-snippet-button {
	32	+ margin-inline-start: auto;
	33	+ float: inline-end;
	34	+ clear: both;
	35	+ margin-block-start: 1em;
30	36	}
31	37
32		-.active-snippet {
33		- td, th {
34		- background-color: rgba(#78c8e6, 0.06);
35		- }
	38	+.nav-tab {
	39	+ display: flex;
	40	+ flex-flow: row wrap;
	41	+ align-items: center;
	42	+ gap: 8px;
36	43
37		- th.check-column {
38		- border-inline-start: 2px solid #2ea2cc;
39		- }
40		-}
41		-
42		-.column-priority input {
43		- appearance: none;
44		- background: none;
45		- border: none;
46		- box-shadow: none;
47		- inline-size: 4em;
48		- color: #666;
49		- text-align: center;
50		-
51		- &:hover, &:focus, &:active {
52		- color: #000;
53		- background-color: #f5f5f5;
54		- background-color: rgb(0 0 0 / 10%);
55		- border-radius: 6px;
56		- }
57		-
58		- &:disabled {
59		- color: inherit;
60		- }
61		-}
62		-
63		-.clear-filters {
64		- vertical-align: baseline !important;
65		-}
66		-
67		-.snippets {
68		- td.column-id {
69		- text-align: center;
70		- }
71		-
72		- tr {
73		- background: #fff;
74		- }
75		-
76		- ol, ul {
77		- margin-block: 0 1.5em;
78		- margin-inline: 1.5em 0;
79		- }
80		-
81		- ul {
82		- list-style: disc;
83		- }
84		-
85		- th.sortable a, th.sorted a {
86		- display: flex;
87		- flex-direction: row;
88		- }
89		-
90		- .row-actions {
91		- color: #ddd;
92		- position: relative;
93		- inset-inline-start: 0;
94		- }
95		-
96		- .column-activate {
97		- padding-inline-end: 0 !important;
98		- }
99		-
100		- .clear-filters {
101		- vertical-align: middle;
102		- }
103		-
104		- tfoot th.check-column {
105		- padding-block: 13px 0;
106		- padding-inline: 3px 0;
107		- }
108		-
109		- thead th.check-column,
110		- tfoot th.check-column,
111		- .inactive-snippet th.check-column {
112		- padding-inline-start: 5px;
113		- }
114		-
115		- .active-snippet, .inactive-snippet {
116		- td, th {
117		- padding-block: 10px;
118		- padding-inline: 9px;
119		- border: none;
120		- box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
	44	+ @media (width <= 1190px) {
	45	+ span:first-child:not(:last-child) {
	46	+ display: none;
121	47	}
122	48	}
123		-
124		- tr.active-snippet + tr.inactive-snippet th,
125		- tr.active-snippet + tr.inactive-snippet td {
126		- border-block-start: 1px solid rgb(0 0 0 / 3%);
127		- box-shadow: inset 0 1px 0 rgb(0 0 0 / 2%), inset 0 -1px 0 #e1e1e1;
128		- }
129		-
130		- &, #all-snippets-table, #search-snippets-table {
131		- a.delete:hover {
132		- border-block-end: 1px solid #f00;
133		- color: #f00;
134		- }
135		- }
136		-
137		- #wpbody-content & .column-name {
138		- white-space: nowrap; /* prevents wrapping of snippet title */
139		- }
140	49	}
141	50
142		-td.column-description {
143		- max-inline-size: 700px;
144		-
145		- pre {
146		- white-space: unset;
147		- }
148		-}
149		-
150		-.inactive-snippet {
151		- @include theme.link-colors(#579);
152		-}
153		-
154		-@media (width <= 782px) {
155		- p.search-box {
156		- float: inline-start;
157		- position: initial;
158		- margin-block: 1em 0;
159		- margin-inline: 0;
160		- block-size: auto;
161		- }
162		-}
163		-
164		-.wp-list-table .is-expanded td.column-activate.activate {
165		- /* fix for mobile layout */
166		- display: table-cell !important;
167		-}
168		-
169	51	.nav-tab-wrapper + .subsubsub, p.search-box {
170	52	margin-block: 10px 0;
171	53	margin-inline: 0;
172	54	}
173	55
174		-.snippet-type-description {
175		- border-block-end: 1px solid #ccc;
176		- margin: 0;
177		- padding-block: 1em;
178		- padding-inline: 0;
179		-}
	56	+.wrap > h2:first-of-type {
	57	+ font-size: 1.5rem;
	58	+ font-weight: 400;
	59	+ line-height: 1.3;
	60	+ padding: 0;
	61	+ margin-block: 50px 1rem;
180	62
181		-.code-snippets-notice a.notice-dismiss {
182		- text-decoration: none;
	63	+ .subtitle {
	64	+ vertical-align: middle;
	65	+ display: inline-flex;
	66	+ align-items: center;
	67	+ gap: 1em;
	68	+ }
183	69	}
184	70
185	71	.refresh-button-container {
186	72	display: flex;
		@@ -196,9 +82,9 @@
196	82	font-size: 20px;
197	83	line-height: 1.4;
198	84	}
199	85
200		-.wrap h2.nav-tab-wrapper {
	86	+.wrap .nav-tab-wrapper {
201	87	.nav-tab {
202	88	display: flex;
203	89	flex-flow: row wrap;
204	90	align-items: center;