studiocms/src/styles/code-component.css

Astro Native CMS for AstroDB. Built from the ground up by the Astro community.

@import "../fonts/syntax-font.css";

.custom-code {
	font-family: var(--scms-font-syntax);
	font-palette: --github-dark;
	font-size: 14px;
	line-height: 1.6;
}

[data-theme="light"] {
	.custom-code {
		font-palette: --github-light;
	}
}

.code-container {
	min-width: 0;
	padding: 16px;
	margin-right: 1rem;
	background-color: var(--background-step-2) !important;
	border: 1px solid var(--border) !important;
	border-radius: 0.25rem;
	overflow-x: auto;
}

.line.diff {
	position: relative;
	z-index: 2;
	align-items: center;
	display: inline flow-root;
	width: 100%;
}

.line.diff > span {
	z-index: 2;
	position: relative;
}

.line.diff::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	padding-left: 0.25rem;
	user-select: none;
}

.line.diff.ins::after {
	content: "+";
	background-color: var(--success-flat-hover);
	color: var(--success-base) !important;
	border-left: 2px solid var(--success-base);
	font-family: monospace;
}

.line.diff.del::after {
	content: "-";
	background-color: var(--danger-flat-hover);
	color: var(--danger-base) !important;
	border-left: 2px solid var(--danger-base);
	font-family: monospace;
}