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

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

代码片段：

2024.12.10：适配 v3.1.15 默认主题
2024.10.07：选中块时会把列表项前面的图形隐藏，已修复

/* 代码块滚动时语言和按钮固定在编辑器顶部 CSS片段 */
/* author by JeffreyChen https://ld246.com/article/1728146248791 */
.b3-typography div.hljs, .protyle-wysiwyg div.hljs {
    padding-top: 0;
}
.protyle-wysiwyg[contenteditable] .code-block .protyle-action {
    align-items: center;
    background-color: rgb(244, 244, 244);
    position: sticky !important;
    top: 0 !important;
    padding: 0 !important;
    height: 30px;
}
.b3-typography .code-block:not(pre), .protyle-wysiwyg .code-block:not(pre) {
    padding-top: 0.2em;
}
/* 去除.protyle-action和.protyle-breadcrumb之间的缝隙 */
.protyle-breadcrumb {
    padding-bottom: 0px;
}
/* 始终显示.protyle-action上的按钮（看情况选择是否使用） */
/*.b3-typography .code-block:not(pre) .protyle-icon, .b3-typography .code-block:not(pre) .protyle-action__language, .protyle-wysiwyg .code-block:not(pre) .protyle-icon, .protyle-wysiwyg .code-block:not(pre) .protyle-action__language {
    opacity: .86 !important;
}*/
/* 块被高亮时隐藏.protyle-action以避免样式问题 */
.protyle-wysiwyg--select.code-block .protyle-action,
.protyle-wysiwyg--hl.code-block .protyle-action,
.protyle-wysiwyg--select .code-block .protyle-action,
.protyle-wysiwyg--hl .code-block .protyle-action {
    opacity: 0 !important;
}
/* 语言的左边与代码对齐 */
.protyle-action__language {
    position: absolute;
    left: 1em;
}

背景色的计算方式：混合代码块背景色和编辑器背景色

function mixColors(fg, bg) {
    const fgR = fg.r;
    const fgG = fg.g;
    const fgB = fg.b;
    const fgA = fg.a;

    const bgR = bg.r;
    const bgG = bg.g;
    const bgB = bg.b;

    const resultR = (fgR * fgA) + (bgR * (1 - fgA));
    const resultG = (fgG * fgA) + (bgG * (1 - fgA));
    const resultB = (fgB * fgA) + (bgB * (1 - fgA));

    return {
        r: Math.round(resultR),
        g: Math.round(resultG),
        b: Math.round(resultB),
        a: 1 // 混合后的颜色不透明度设为 1
    };
}

const foreground = { r: 27, g: 31, b: 35, a: 0.05 };
const background = { r: 255, g: 255, b: 255 };

const mixedColor = mixColors(foreground, background);
console.log(`混合后的颜色: rgba(${mixedColor.r}, ${mixedColor.g}, ${mixedColor.b}, ${mixedColor.a})`);