# code-snippets/4.0.0-beta.1/css/manage/_snippets-table.scss

Code Snippets, version 4.0.0-beta.1. 300 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/code/css/manage/_snippets-table.scss
- Raw: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.1/raw/css/manage/_snippets-table.scss
- Modified: 2026-06-19T15:58:00+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/4.0.0-beta.1/code/css/manage/_snippets-table.scss#L10-L20`.

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

.column-name,
.column-type {
	.dashicons {
		font-size: 16px;
		inline-size: 16px;
		block-size: 16px;
		vertical-align: middle;
	}

	.dashicons-clock {
		vertical-align: middle;
	}
}

.column-name .tooltip {
	float: inline-end;

	.dashicons-lock {
		color: #646970;
		opacity: 0.7;

		&:hover {
			opacity: 1;
		}
	}
}

.active-snippet .column-name > .snippet-name {
	font-weight: 600;
}

// WP 7.0 changes the default admin link colour to the modern blue. Pin the classic accent on
// active rows (names and row-action links) so links keep their original colour; inactive rows
// are handled by the muted link-colors mixin below, and the trash button keeps its dark red
// from the `.delete` rule further down.
.wp-list-table .active-snippet a {
	color: theme.$accent;

	&:hover,
	&:focus {
		color: theme.$accent-hover;
	}
}

// Status filter links (All | Active | Inactive | …): WP 7.0 recolours these with the modern
// blue. Restore the classic accent for non-current links; the current one keeps its own colour.
/* stylelint-disable-next-line no-descending-specificity -- unrelated element; ordering is fine. */
.subsubsub a:not(.current) {
	color: theme.$accent;

	&:hover,
	&:focus {
		color: theme.$accent-hover;
	}
}

.active-snippet {
	td, th {
		background-color: rgba(#78c8e6, 0.06);
	}

	th.check-column {
		border-inline-start: 2px solid #2ea2cc;
	}
}

// `.wp-list-table` prefix keeps this above WP 7.0's 40px control height so the borderless
// priority field stays 30px tall and vertically aligned with the rest of the row.
.wp-list-table .priority-column input {
	appearance: none;
	background: none;
	border: none;
	box-shadow: none;
	box-sizing: border-box;
	min-block-size: theme.$control-height;
	block-size: theme.$control-height;
	inline-size: 4em;

	// Pin the box model so padding/margins/line-height match WP 6.9 regardless of WP 7.0's
	// taller default control metrics; this keeps the value aligned in both the resting and
	// hovered (native spinner) states.
	padding-block: 0;
	padding-inline: 8px;
	margin-block: 0;
	margin-inline: 1px;
	line-height: 2;
	color: #666;
	text-align: center;

	&:disabled {
		color: inherit;
	}

	&:hover, &:focus, &:active {
		color: #000;
		background-color: rgb(0 0 0 / 10%);
		border-radius: 6px;
		appearance: unset;

		&:disabled {
			color: inherit;
			background-color: transparent;
		}
	}
}

.wp-list-table {
	td.column-id {
		text-align: center;
	}

	tr {
		background: #fff;
	}

	ol, ul {
		margin-block: 0 1.5em;
		margin-inline: 1.5em 0;
	}

	ul {
		list-style: disc;
	}

	th.sortable .list-table-sort-button,
	th.sorted .list-table-sort-button {
		display: flex;
		flex-direction: row;
		align-items: center;
		inline-size: 100%;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		font: inherit;
		color: #2271b1;
		cursor: pointer;
		text-align: start;
	}

	th.sortable .list-table-sort-button:focus-visible,
	th.sorted .list-table-sort-button:focus-visible {
		outline: 2px solid #2271b1;
		outline-offset: 2px;
		border-radius: 2px;
	}

	.row-actions {
		color: #646970;
		position: relative;
		inset-inline-start: 0;

		// Row-action buttons render as plain inline links. On WP 7.0 the generic `.button`
		// compatibility styling would otherwise give them a fill, border, radius and fixed
		// height, so fully neutralise it here (this rule is emitted after the wp-admin layer
		// at equal specificity, so it wins). Non-delete links inherit the accent text colour.
		.button-link {
			block-size: auto;
			min-block-size: 0;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: none;
			box-shadow: none;
			line-height: inherit;
			font-weight: 400;

			&:hover:not(:disabled),
			&:focus:not(:disabled) {
				background: none;
				border: 0;
				box-shadow: none;
			}

			&.delete {
				color: #b32d2e;
			}
		}

		.delete.disabled {
			color: #a7aaad;
			cursor: not-allowed;
			pointer-events: none;
		}
	}

	.column-activate {
		padding-inline-end: 0 !important;
	}

	.clear-filters {
		vertical-align: middle;
	}

	tfoot th.check-column {
		padding: 13px 0 0 3px;
	}

	thead th.check-column,
	tfoot th.check-column,
	.inactive-snippet th.check-column {
		padding-inline-start: 5px;
	}

	.active-snippet, .inactive-snippet {
		td, th {
			padding: 10px 9px;
			border: none;
			box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
		}
	}

	tr.active-snippet + tr.inactive-snippet th,
	tr.active-snippet + tr.inactive-snippet td {
		border-block-start: 1px solid rgb(0 0 0 / 3%);
		box-shadow: inset 0 1px 0 rgb(0 0 0 / 2%), inset 0 -1px 0 #e1e1e1;
	}

	.delete {
		color: #b32d2e;
	}

	a.delete:not(.disabled) {
		&:hover, &:focus, &:active {
			border-block-end: 1px solid #f00;
			color: #f00;
		}
	}

	#wpbody-content & .column-name {
		white-space: nowrap; /* prevents wrapping of snippet title */
	}

	td.column-date, th.column-date {
		white-space: nowrap;
		inline-size: 130px; /* fixed column width */
		min-inline-size: 130px;
		max-inline-size: 130px;
		text-align: end;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	td.column-date .modified-column-content {
		display: block;
		text-align: start;
	}
}

.wp-list-table.truncate-row-values {
	td.column-name > .snippet-name,
	td.column-desc .snippet-description-content {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	td.column-name > .snippet-name {
		max-inline-size: min(15rem, 30vw);
	}

	td.column-desc .snippet-description-content {
		max-inline-size: min(25rem, 45vw);
	}
}

.wp-core-ui .button.clear-filters {
	vertical-align: baseline;
}

.inactive-snippet {
	@include theme.link-colors(#579);
}


@media (width <= 782px) {
	p.search-box {
		float: inline-start;
		position: initial;
		margin-block: 1em 0;
		margin-inline: 0;
		block-size: auto;
	}
}


.wp-list-table .is-expanded td.column-activate.activate {
	/* fix for mobile layout */
	display: table-cell !important;
}

.snippet-type-description {
	border-block-end: 1px solid #ccc;
	margin: 0;
	padding-block: 1em;
	padding-inline: 0;
}

```