[css] 思源笔记 css

提示：很多缺点 ＋bug，仅供分享

（我的手机预览图）

/*"手机端：文档树"“电脑端：主菜单”文字*/
.toolbar__text {
    word-break: break-all;
    -webkit-line-clamp: 1;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    flex: none;
}

/*笔记本边框（手机端）*/
ul.b3-list.b3-list--background {
    padding: 10px 5px;
    border-radius: 12.5px;
    margin: 20px 35px;
    outline: 0.5px solid #d7dadb;
}

/*双链引用（文档）*/
.protyle-wysiwyg [data-node-id] [spellcheck] {
    min-height: 1.625em;
    word-break: break-word;
    white-space: normal;
}

/*编辑器备边框*/
.protyle-wysiwyg [data-node-id][data-plugin-focus=true] {
    box-shadow: 0 0 0px 1px #505860;
}

/*块折叠*/
.protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type=NodeHeading]) {
    word-break: break-all;
    -webkit-line-clamp: 1;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    opacity: .38;
    font-size: 16px;
    height: 26px;
    line-height: 27.5px;
}

/*设置阴影*/
.b3-dialog__scrim {
    background-color: rgb(220 220 220 / 0%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 150ms linear;
}

/*页面边栏*/
.layout__resize::after {
    content: "";
    width: 100%;
    height: .5px;
    display: block;
    background-color: #ffffff;
    top: 3px;
    position: absolute;
    left: 0;
    transition: var(--b3-transition);
}

.layout__resize--lr::after {
    top: 0;
    width: 5px;
    left: 0;
    height: 100%;
}

/*编辑页面名称栏*/
.layout-tab-bar {
    list-style: none;
    align-items: center;
    overflow: auto;
    position: relative;
    background-color: var(--b3-theme-background);
    border-bottom: 0px solid var(--b3-theme-background-light);
}

/*右栏*/
.dock#dockRight {
    border-left: 0px solid var(--b3-border-color);
}

/*底栏*/
.status {
    background-color: var(--b3-theme-surface);
    box-sizing: border-box;
    z-index: 2;
    height: 32px;
    line-height: 35px;
    border-top: 0px solid var(--b3-border-color);
    padding: 0 5px;
}

/*顶栏*/
.toolbar {
    background-color: var(--b3-toolbar-background);
    box-sizing: border-box;
    height: auto;
    line-height: normal;
    padding: 0px 25px 0px 25px;
    overflow: hidden;
    border-bottom: 0px solid var(--b3-border-color);
    display: flex
;
    flex-wrap: wrap;
    /* gap: 10px; */
}

/*块属性位置*/
.protyle-attr {
    display: flex;
    position: absolute;
    right: 12.5px;
    top: 1.5px;
    opacity: 0;
    font-size: 10px;
    font-weight: normal;
    align-items: center;
    line-height: 5px;
    background-color: #f6f6f600;
}

/*笔记本边框（电脑端）*/
.sy__file ul.b3-list.b3-list--background {
    padding:10px 5px;
    border-radius: 12.5px;
    margin: 12.5px 15px;
    outline: 0.5px solid #d7dadb;
}

/*表情图片*/
img {
    border-radius: 5px;
}

/*引用*/
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]:not(.av__celltext), .protyle-wysiwyg [data-node-id] span[data-type~=file-annotation-ref] {
    background: linear-gradient(to bottom, #01B5D8 5%, #F3668F 75%);
    -webkit-background-clip: text;
    color: rgb(0 0 0 / 10%);
    opacity: .86;
    transition: var(--b3-transition);
}

/*搜索外观*/
.search__list .b3-list-item__text {
    user-select: none;
    border-bottom: 5px solid #e0e0e0;
    min-height: 30px;
    margin: 15px 5px;
    padding: 0px 10px;
}

/*选择阴影*/
.b3-list--background .b3-list-item--focus:not(.dragover):not(.protyle-wysiwyg--select):not(.protyle-wysiwyg--hl):not(.dragover__top):not(.dragover__bottom) {
    background-color: var(--b3-list-hover);
    margin: 10px !important;
}

/*下划线*/
.b3-typography u, .b3-typography span[data-type~=u], .protyle-wysiwyg u, .protyle-wysiwyg span[data-type~=u] {
    border-bottom: 1.75px solid;
    border-color: #384048;
    margin: 0px 2.5px 0px 2.5px;
    border-radius: 5px;
}

/*内置头题图*/
.b3-cards {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0px 0px 0; 
}

/*内置头题图*/
.b3-card--wrap {
    flex: 1;
    margin: 25px 25px 0 27.5px;
    min-width: 300px;
    min-height: 315px;
}

/*笔记编辑框*/
.protyle-wysiwyg [data-node-id]#plugin-focus-unique-id {
    box-shadow: 0 0 0px 1px #e4e4e4 inset;
    /*box-shadow: 0 0 5px 2.5px #DAD6D2 inset;*/
    /*background-image: linear-gradient(to right, #DAD6D2,#E8ECED);*/
}

/*备注*/
.b3-text-field, .pcr-app .pcr-interaction .pcr-result {
    padding: 4px 20px;
    background-color: #F9F9FB;
    font-size: 14px;
}

/*头题图*/
.protyle-background__img img {
    object-fit: cover;
    width: 100%;
    height: 30vh;
    opacity: 1;
    object-position: center;
    border-radius: 25px;
    margin: 25px 0 0 0;
}

/*笔记页*/
.protyle-content {
    overflow: auto;
    flex: 1;
    scrollbar-gutter: stable;
    margin: 15px;
}

/*手机端图标*/
.toolbar__icon {
    height: 16px;
    width: 16px;
    padding: 10px;
    flex-shrink: 0;
    margin: 6px 4px;
    color: var(--b3-theme-on-surface);
    border-radius: 10px;
}

/*手机端设置面板*/
.b3-menu--fullscreen .b3-menu__items {
    padding: 0px 30px;
}

/*手机端设置面板*/
.b3-menu--fullscreen .b3-menu__item {
    border-bottom: .5px solid var(--b3-theme-background-light);
    line-height: 42px;
    background-color: #DDDEE2;
    text-decoration: none;
    border-radius: 25px;
    margin: 20px 0px;
    padding: 7.5px 0px;
}

/*图标*/
svg {
    fill: currentColor;
    display: inline-block;
    /*margin: 10px; */
    /*padding: 0px;*/
}

/*设置背景*/
.config__tab-container {
    overflow: auto;
    box-sizing: border-box;
    height: 100%;
    background: #F3F3F3;
    margin: 25px;
    border-radius: 2.5px;
    padding: 25px;
}

/*设置背景*/
.config__tab-container .b3-label:not(.b3-label--inner) {
    padding: 0;
    margin: 16px 24px 32px;
    box-shadow: 0 0px 0 0 #ffffff, 0 0px 0 0 var(--b3-border-color); 
    border-bottom: 0;
    border-radius: 25px; 
}

/*块内字符*/
.b3-typography>p, .b3-typography blockquote>p, .b3-typography [data-node-id], .protyle-wysiwyg li>p, .protyle-wysiwyg>p, .protyle-wysiwyg blockquote>p, .protyle-wysiwyg [data-node-id] {
    line-height: 1.80;
    padding: 7.5px;
    margin: 2.5px;
    border-radius: var(--b3-border-radius);
}

/*备注*/
.b3-typography span[data-type~=inline-memo], .protyle-wysiwyg span[data-type~=inline-memo] {
    background-image: linear-gradient(to bottom, #F5F1FF 90%, #E83878 10%);
    border-bottom: 0px solid #E83878; 
    border-radius: 10px 10px 0px 0px;
    margin: 0px 2.5px;
    padding: 0px 2.5px;
}

/*标注*/
.b3-typography mark, .b3-typography span[data-type~=mark], .protyle-wysiwyg mark, .protyle-wysiwyg span[data-type~=mark] {
    background-image: linear-gradient(to right, #F5F1FF 75%, #FF8B67 100%);
    /* border-bottom: 5px solid #FF8B67; */
    border-radius: 25px 2.5px 25px 2.5px;
    padding: 0px 5px;
    margin: 0px 2.5px;
}

/*字体效果*/
:root {
    --b3-font-color1: #F88880;
    --b3-font-color2: #FF00B2;
    --b3-font-color3: #FC4349;
    --b3-font-color4: #D87080;
    --b3-font-color5: #2A9FC0;
    --b3-font-color6: #A1A79D;
    --b3-font-color7: #F8B48F;
    --b3-font-color8: #2F507D;
    --b3-font-color9: #79ADE7;
    --b3-font-color10: #FFD38E;
    --b3-font-color11: #E088C0;
    --b3-font-color12: #AEA2D4;
    --b3-font-color13: var(--b3-theme-background);
    --b3-font-background1: #F6F792;
    --b3-font-background2: #FFD611;
    --b3-font-background3: #FCE6B9;
    --b3-font-background4: #E7D7C1;
    --b3-font-background12: #5668FF;
    --b3-font-background8: #F3547A;
    --b3-font-background9: #C4D6A1;
    --b3-font-background5: #D1D4DB;
    --b3-font-background6: #BFC4DE;
    --b3-font-background11: #68E6FC;
    --b3-font-background7: #F69CB6;
    --b3-font-background10: #A1E8D9;
    --b3-font-background13: var(--b3-theme-on-background);
    --b3-switch-checked-background: #D7DADB;
}

/*块圆角等*/
:root{
--b3-border-radius: 15px;
--b3-border-padding:10px;
}

/*笔记本名*/
.b3-list-item__text {
    flex: 1;
    background-color: rgba(0, 0, 0, 0);
    text-align: left;
    border: 0;
    padding: 0;
    color: var(--b3-theme-on-background);
    word-break: break-word;
    -webkit-line-clamp: 5;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    border-bottom: 1px solid rgb(228 228 228);
    margin: 0px 10px 0px 10px;
}

.b3-list-item {
    line-height: 35px;
    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: 5px 10px;
}

/*左侧dock图标外边距大小，可根据需要微调 */
.dock#dockLeft .dock__item {
  margin: 3px;
}

/*每个图标的内外边距，计算公式是 (dock宽-图标宽)/4 */
.dock__item {
    padding: 4px; /* 内边距 */
    margin: 4px; /* 外边距 */
}

/*两侧dock栏宽度 */
.dock--vertical {
    width:32px; /* 根据自己需要调整 */
}

​