[css] 代码块滚动时语言和按钮固定在编辑器顶部

对很长的代码块比较友好，效果是始终显示代码块的语言、复制按钮和更多菜单按钮：

代码片段：

2025.03.07：修复代码块在带背景色的块内的背景色问题
2025.01.29：适配 v3.1.21 的代码块语言对齐
2025.01.18：改进了导出时的样式
2024.12.26：更换了更通用的方法实现元素背景色统一
2024.12.10：适配 v3.1.15 默认主题
2024.10.07：选中块时会把列表项前面的图形隐藏，已修复

/* 代码块滚动时语言和按钮固定在编辑器顶部 CSS片段 */
/* author by JeffreyChen https://ld246.com/article/1728146248791 */
/* NOTE 用:not(#preview)排除导出PDF，用.protyle-wysiwyg排除导出预览，.protyle-wysiwyg[data-readonly="true"]是只读模式 */
/* NOTE 导出预览的代码块没有 .protyle-action */
div:not(#preview) > .protyle-wysiwyg .code-block:not(pre) {
	.protyle-action {
		background-color: var(--b3-parent-background);
		position: sticky;
		top: 0;

		&::after {
			content: "";
			position: absolute;
			height: 100%;
			width: 100%;
			background-color: var(--b3-protyle-code-background);
			pointer-events: none;
		}
	}
	.hljs {
		padding: 0 1em 24px; /* .protyle-icon 的高度是 24px，要让上下边距对称的话底部也要留 24px */
	}
}

/* 始终显示设置的代码块语言 */
.protyle-wysiwyg .code-block:not(pre):not(:hover) .protyle-action__language {
	opacity: .86;
}
/* 只有 hover 代码块时才显示代码块语言占位符 */
.protyle-wysiwyg[data-readonly=false] .code-block:not(pre):not(:hover) .protyle-action .protyle-action__language:empty::after {
	opacity: 0;
}
​