← All changes | css/manage/_cloud-community.scss +43 -23 3.10.0-beta.1 → trunk View file →

		@@ -1,5 +1,6 @@
1		-@use '../common/banners';
	1	+@use '../common/notices';
	2	+@use '../common/checkbox';
2	3	@use '../common/theme';
3	4
4	5	.cloud-snippet-status {
5	6	display: inline-flex;
		@@ -4,9 +5,9 @@
4	5	.cloud-snippet-status {
5	6	display: inline-flex;
6	7	align-items: center;
7	8	gap: 8px;
8		- color: #646970;
	9	+ color: var(--cs-color-text-muted);
9	10	font-size: 12px;
10	11	font-weight: 500;
11	12	white-space: nowrap;
12	13
		@@ -16,22 +17,28 @@
16	17	inline-size: 10px;
17	18	border-radius: 50%;
18	19	display: inline-block;
19	20	}
20		-}
21	21
22		-$status-colors: (
23		- public #64baba,
24		- private #cc96fb,
25		- unverified #ea835e,
26		- ai-verified #1cabcf,
27		- pro-verified #41a269,
28		-);
	22	+ &-public::before {
	23	+ background: var(--cs-cloud-status-public-color);
	24	+ }
29	25
30		-@each $status, $color in $status-colors {
31		- .cloud-snippet-status-#{$status}::before {
32		- background: $color;
	26	+ &-private::before {
	27	+ background: var(--cs-cloud-status-private-color);
33	28	}
	29	+
	30	+ &-unverified::before {
	31	+ background: var(--cs-cloud-status-unverified-color);
	32	+ }
	33	+
	34	+ &-ai-verified::before {
	35	+ background: var(--cs-cloud-status-ai-verified-color);
	36	+ }
	37	+
	38	+ &-pro-verified::before {
	39	+ background: var(--cs-cloud-status-pro-verified-color);
	40	+ }
34	41	}
35	42
36	43	.bundle-share-code-form,
37	44	.cloud-search-form {
		@@ -75,9 +82,9 @@
75	82	}
76	83	}
77	84
78	85	.cloud-search {
79		- @include banners.banners;
	86	+ @include notices.notices('banner');
80	87
81	88	padding-block-start: 10px;
82	89
83	90	.banner {
		@@ -82,8 +89,9 @@
82	89
83	90	.banner {
84	91	justify-content: center;
85	92	}
	93	+
86	94	}
87	95
88	96	.bundle-share-code-form {
89	97	max-inline-size: 60%;
		@@ -97,10 +105,12 @@
97	105
98	106	// Keep the Download / Edit / Pro Only button a consistent width so
99	107	// rows line up regardless of which state the snippet is in.
100	108	.button-primary,
101		- .cloud-pro-button {
102		- min-inline-size: 90px;
	109	+ .cloud-pro-button,
	110	+ .button:not(.button-primary) {
	111	+ inline-size: 103px;
	112	+ min-inline-size: 103px;
103	113	text-align: center;
104	114	justify-content: center;
105	115	}
106	116	}
		@@ -105,21 +115,31 @@
105	115	}
106	116	}
107	117
108	118	.cloud-snippets-table {
109		- // Body rows only: the header row also holds a `td` for the select-all cell,
110		- // and a fixed height there would make this header taller than the one on the
111		- // snippets table.
	119	+ // Body rows inherit the shared table-cell padding so descriptions can grow
	120	+ // naturally instead of being constrained to a fixed row height.
112	121	tbody td {
113		- box-sizing: border-box;
114		- block-size: 60px;
115	122	vertical-align: middle;
116	123	}
117	124
	125	+ .check-column {
	126	+ vertical-align: middle;
	127	+
	128	+ input[type='checkbox'] {
	129	+ @include checkbox.canonical;
	130	+ }
	131	+ }
	132	+
118	133	.column-name {
119	134	inline-size: 22%;
120	135	}
121	136
	137	+ .column-desc {
	138	+ inline-size: 30%;
	139	+ min-inline-size: 18rem;
	140	+ }
	141	+
122	142	.column-type {
123	143	inline-size: 90px;
124	144	}
125	145
		@@ -127,9 +147,9 @@
127	147	inline-size: 120px;
128	148	}
129	149
130	150	.column-actions {
131		- inline-size: 210px;
	151	+ inline-size: 234px;
132	152	}
133	153
134	154	.cloud-table-name-button {
135	155	background: none;
		@@ -137,9 +157,9 @@
137	157	padding: 0;
138	158	margin: 0;
139	159	font-size: inherit;
140	160	font-weight: 600;
141		- color: theme.$accent;
	161	+ color: var(--cs-color-accent);
142	162	text-decoration: none;
143	163	cursor: pointer;
144	164	text-align: start;
145	165