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

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

代码片段：

2024.12.26：更换了更通用的方法实现元素背景色统一
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 {
    background-color: var(--b3-theme-background);
    position: sticky;
    top: 0;
}
.protyle-wysiwyg[contenteditable] .code-block .protyle-action::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--b3-protyle-code-background);
    pointer-events: none;
}

/* 始终显示设置的代码块语言 */
.b3-typography .code-block:not(pre):not(:hover) .protyle-action__language,
.protyle-wysiwyg .code-block:not(pre):not(:hover) .protyle-action__language {
    opacity: .86;
}
/* 只有 hover 代码块时才显示代码块语言占位符 */
.protyle-wysiwyg[data-readonly=false] .code-block:not(:hover) .protyle-action .protyle-action__language:empty::after {
    opacity: 0;
}
/* 代码块语言的左边与代码对齐 */
/* TODO 跟进 https://github.com/siyuan-note/siyuan/pull/13564 ，如果 PR 合并的话就可以删掉这部分了 */
.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})`);