VSCode Lite Edit 主題的相關CSS記錄

捞月亮的小北發表於2024-12-09
VSCodeCSS

相關CSS記錄

標題居中

.protyle-title__input {
    text-align: center;
}

文件樹間距

.b3-list-item {
    line-height: 38px !important;
    min-height: 28px;
    padding: 0 4px;
    display: flex;
    cursor: pointer;
    align-items: center;
    position: relative;
    background-color: rgba(0,0,0,0);
    text-align: left;
    border: 0;
    color: var(--b3-theme-on-background);
    margin: 1px 8px;
}

.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {
    padding: 4px;
    color: black;
    border-left: 0.25em solid #ffffff;
    background-color: var(--b3-list-hover);
    margin: 4px 0;
}

行間距

.protyle-wysiwyg>.p {
 	line-height: 2.3;  /*段落塊的行間距，段間距的話前面該改成margin*/
 }

隱藏大綱前面的塊標記 H

.sy__outline .b3-list-item__graphic {
    display: none;
}

程式碼字型樣式

.b3-typography .hljs, .protyle-wysiwyg .hljs {
    font-family: Consolas !important;
}

.hljs-comment {
    font-size: 13px;
}

去除圖片後的多餘空行 CSS 片段

/* 去除圖片後的多餘空行 CSS片段 */
.b3-typography .img:not([style]), .protyle-wysiwyg .img:not([style]) {
   display:inline-block;
}

釘住的同時顯示 icon 和標題 CSS 片段

/* 釘住的同時顯示 icon 和標題 CSS片段 */
.layout-tab-bar .item.item--pin .item__text {
    width: auto;
    max-width: none;
    display: flex !important;
}

引述塊美化

.b3-typography blockquote, .protyle-wysiwyg [data-node-id].bq:not([style*='background-color']) {
    /* border: 1px solid var(--custom-blockquote-border-color);     border-left: 0.3em solid #a4b1ba;    */
    padding: 2px 4px;
    background-color: #73a8c70f;
    border: 0px solid transparent;
    border-left: 0.3em solid #a4b1ba;
    border-radius: 7px !important;
    color: #6a6969;
}

.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {
    padding: 4px;
    border-left: 0.25em solid #0b960e !important;
    background-color: var(--b3-list-hover);
    margin: 4px 0;
}

大綱字型

.fn__flex-column.layout__dockr .file-tree {
  font-size: 13px !important;
}

相關文章