完善代码中字体、背景色、解决偏移

[Higurashi-kagome]

尝试完善下面几个点：

文件访问面板、右键菜单偏移：

Details

 

解决：

ol,
ul:not(#sidebar-files-menu,#context-menu) {/*不影响这两个部分*/
    padding-left: 2rem ;
    line-height: 1;
}

大纲黑色 hover 背景色及代码块语言设置区域，感觉有些暗，个人认为与周围颜色相近的话会不那么突兀，所以尝试做了修改：

Details

 

更改：

/*update：大纲 hover 背景色暗色改为浅色*/
#typora-sidebar #outline-content .outline-item:hover {
    background: var(--active-file-bg-color);
}

/* update：代码块语言输入区域，暗色改为深蓝 */
.md-fences .code-tooltip {
    background-color: rgb(53, 95, 127);
}

感觉短代码背景色比较浅，不是很好与周围区分开：

Details


所以试探着更改了颜色（相应地删除了原设置）：

/* update: 更改短代码背景色（不影响搜索下的短代码） */
code:not(.md-search-expand) {
    /* rgb(233, 240, 254) 待选1*/
    /* rgb(245, 247, 249) 最初的颜色*/
    background: hsl(208, 84%, 88%) !important;
}

因为包含短代码的文字选中并搜索时，短代码颜色与周围颜色不协调：

Details


所以上面设置短代码背景色时使用:not(.md-search-expand)将搜索下的短代码排除掉，并进一步地单独设置了选中搜索部分的代码背景色：

/* 单独设置搜索下的短代码颜色 */
.md-search-expand code {
    background: hsla(0, 0%, 0%, 0) !important;
}

顺便将搜索部分的暗色改为橙色（个人认为这样更加美观）：

    --search-select-bg-color:rgba(248,192,116,0.3);
    --search-select-text-color:rgb(59, 69, 78);

短代码、代码块中的中文字体不是很好看：

Details


所以参照中文字体网页开发指南将font-family完善为：

code,
pre{
    ...
    font-family: 'Cascadia Code', Consolas, 'Noto Sans SC','Courier New',"微软雅黑",'Microsoft YaHei',"华文细黑",STXihei;
    ...
}

表格设置面板输入框及确认框偏离位置：

Details


更改：

/*解决输入框问题*/
#write input:not(#md-grid-width):not(#md-grid-height){
    transform: translateY(-6.5px);
}
/*解决确认框问题*/
#write .popover.bottom.md-table-resize-popover{
    width: 140px;
}
/*顺便让输入框数字居中 */
#write .md-grid-board-wrap input{
    text-align: center !important;
}

代码块中选中文字的颜色与背景色很接近：

Details


更改：

#write .cm-s-inner .CodeMirror-selected,
#write .cm-s-inner .CodeMirror-selectedtext {
    background: #5b808d !important;
}

往左伸缩大纲面板时指示线颜色与背景色很接近：

Details


解决：

/* 伸缩指示线颜色 */
#typora-sidebar-resizer.dragging{
    color: #6eace2;
}

然后发现伸缩线位置并不完全与大纲边界位置重合（偏右一点）导致容易失去伸缩线焦点，所以进行了如下调整：

/* 更改指示线位置，使绳索指示线更顺手 */
#typora-sidebar-resizer{
    left: calc(var(--sidebar-width) 3px);
}

[Higurashi-kagome]

仅在 Windows 上测试，所以最好在 Mac 上也看一下👋 @FishionYu

[HanryYu]

@liuhao326 晚些时候我在Mac看一下

[HanryYu]

其他的细节非常赞了，但对 行内代码 还有 代码语言 颜色的改动不是很符合预期，这两块我还是先保持不变

[Higurashi-kagome]

嗯，好的。