# code-snippets/3.10.0-beta.1/css/manage/_cloud-community.scss

Code Snippets, version 3.10.0-beta.1. 169 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/code/css/manage/_cloud-community.scss
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/raw/css/manage/_cloud-community.scss
- Modified: 2026-08-04T13:38:10+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/3.10.0-beta.1/code/css/manage/_cloud-community.scss#L10-L20`.

```scss
@use '../common/banners';
@use '../common/theme';

.cloud-snippet-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #646970;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;

	&::before {
		content: '';
		block-size: 10px;
		inline-size: 10px;
		border-radius: 50%;
		display: inline-block;
	}
}

$status-colors: (
	public #64baba,
	private #cc96fb,
	unverified #ea835e,
	ai-verified #1cabcf,
	pro-verified #41a269,
);

@each $status, $color in $status-colors {
	.cloud-snippet-status-#{$status}::before {
		background: $color;
	}
}

.bundle-share-code-form,
.cloud-search-form {
	display: flex;
	gap: 8px;
	margin-block: 0 47px;
	block-size: 54px;

	> select {
		flex: 0 0 250px;
	}

	.button {
		flex: 0 0 165px;
	}

	.cloud-search-query {
		flex: 1;
		position: relative;

		input {
			inline-size: 100%;
			block-size: 100%;
		}

		> .components-spinner {
			position: absolute;
			inset-inline-end: 1.5em;
			inset-block-start: 25%;
		}
	}

	button[type='submit'] {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		.components-spinner {
			margin: 0;
		}
	}
}

.cloud-search {
	@include banners.banners;

	padding-block-start: 10px;

	.banner {
		justify-content: center;
	}
}

.bundle-share-code-form {
	max-inline-size: 60%;
}

.cloud-snippet-action-buttons {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;

	// Keep the Download / Edit / Pro Only button a consistent width so
	// rows line up regardless of which state the snippet is in.
	.button-primary,
	.cloud-pro-button {
		min-inline-size: 90px;
		text-align: center;
		justify-content: center;
	}
}

.cloud-snippets-table {
	// Body rows only: the header row also holds a `td` for the select-all cell,
	// and a fixed height there would make this header taller than the one on the
	// snippets table.
	tbody td {
		box-sizing: border-box;
		block-size: 60px;
		vertical-align: middle;
	}

	.column-name {
		inline-size: 22%;
	}

	.column-type {
		inline-size: 90px;
	}

	.column-status {
		inline-size: 120px;
	}

	.column-actions {
		inline-size: 210px;
	}

	.cloud-table-name-button {
		background: none;
		border: 0;
		padding: 0;
		margin: 0;
		font-size: inherit;
		font-weight: 600;
		color: theme.$accent;
		text-decoration: none;
		cursor: pointer;
		text-align: start;

		&:hover,
		&:focus-visible {
			color: #135e96;
			text-decoration: underline;
		}
	}

	// Clamp descriptions so every row stays the same height.
	.cloud-table-description {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}
}

// Community bundles tab shares the same top padding as .cloud-search so the
// two tabs' descriptions and inputs align (scoped so the My Library bundles
// tab is unaffected).
.community-bundles {
	padding-block-start: 10px;
}

```