[css] 搭配 QYL 主题使用的 CSS 代码

无序列表子弹线

CSS

/* REF https://github.com/svchord/Rem-Craft */
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action{
    color:#287B00;;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action svg{
    margin:0;
    width:16px;
    height:16px;
    padding:0px 0px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li::after{
    content:"";
    display:block;
    position:absolute;
    pointer-events:none;
    width:34px;
    left:-18px;
    top:-20px;
    border-style:solid;
    border-color:#287B00;;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:not(:has(.block-focus))::after{
    bottom:-2px;
    border-width:0 0 0 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:38px;
    border-radius:0 0 0 8px;
    border-width:0 0 2px 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)~.li:not(:has(.block-focus))::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=o]::after{
    width:24px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=t]::after{
    width:28px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]::after{
    content:"";
    display:block;
    position:absolute;
    pointer-events:none;
    width:34px;
    left:-18px;
    top:-20px;
    border-style:solid;
    border-color:rgb(70, 110, 220);
    top:20px;
    height:calc(100% + 4px);
    border-width:0 0 0 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]:has(+.list)::after{
    height:auto;
    bottom:0
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id][data-type=NodeHeading]::after{
    top:0;
    height:185%
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)~[data-node-id]::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[fold="1"]>[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus):has(>.block-focus)>[data-node-id]::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li::after{
    top:-10px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:28px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action{
    color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action svg{
    margin:0;
    width:14px;
    height:14px;
    padding:0px 0px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li::after{
    top:-14px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:32px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus).protyle-task--done>.list:has(.block-focus)>.li::after{
    border-color:rgba(139, 139, 139)
}


​

JS

// 缓存编辑器块并处理聚焦状态的函数定义
let cachedEditorBlocks = []; // 缓存所有编辑器块
let focusedBlock = null; // 缓存当前聚焦的块

// 初始化缓存
function initEditorBlocksCache() {
    const editors = document.querySelectorAll('.protyle-wysiwyg');
    editors.forEach(editor => {
        if (!editor.classList.contains('NodeAttributeView')) {
            cachedEditorBlocks.push(...editor.querySelectorAll('[data-node-id]'));
        }
    });
}

// 更新聚焦状态并维护缓存
function handleBlockFocus(e) {
    let target;
    if (e.type === 'mouseup') {
        // 鼠标事件，查找最近的具有data-node-id属性的元素
        target = e.target.closest('[data-node-id]');
    } else if (e.type === 'keyup') {
        // 键盘事件，查找当前焦点所在的具有data-node-id属性的元素
        const activeElement = document.activeElement;
        if (activeElement.classList.contains('protyle-wysiwyg')) {
            target = window.getSelection()?.focusNode?.parentElement;
            while (target && !target.dataset.nodeId) {
                target = target.parentElement;
                if (!target) break; // 避免空指针异常
                if (target.classList.contains('NodeAttributeView')) {
                    target = null; // 如果找到NodeAttributeView，则不处理该元素
                    break;
                }
            }
        }
    }

    if (!target || target === focusedBlock) return;

    if (focusedBlock) {
        focusedBlock.classList.remove('block-focus');
    }
    focusedBlock = target;
    focusedBlock.classList.add('block-focus');

    // 根据需要调用相关功能，例如：
    // setSelector(focusedBlock);
}

// 初始化编辑器块缓存
initEditorBlocksCache();

// 绑定事件监听器
document.addEventListener('mouseup', handleBlockFocus, true);
document.addEventListener('keyup', handleBlockFocus, true);

// 立即调用的异步函数表达式，执行handleBlockFocus并输出日志
(async () => {
    // 这里我们调用handleBlockFocus函数，但由于它不返回Promise，所以不需要await
    handleBlockFocus({ type: 'dummy' }); // 模拟事件调用
    console.log('加载子弹线成功');
})();
​

笔记文档下划线

.b3-list-item,
.b3-dialog--open .fn__flex .b3-list--background,
.b3-dialog--open .fn__flex .b3-list-item {
    outline: 0.5px solid #00000010;
    margin: 0.5px !important;
}
​

‍

工作空间名称

#barWorkspace span.toolbar__text {
    font-family: inherit; /* 设置为系统默认字体 */
    white-space: nowrap; /* 强制不换行 */
    color: #22222280;
}
#barWorkspace {
    background-color: transparent !important;
    border: 1px solid #22222280 !important;;
    width: auto; /* 宽度自动适应内容 */
}
​

横排面板

.layout-tab-bar .item__close{
    padding: 0;
}
.layout-tab-bar .item{
    min-height: 30px;
    margin-right: 2px;
    margin-top: 3px;
    margin-left: 4px;
}
li.item.item--focus {
    background-color: oklch(from var(--b3-theme-primary) 0.43 calc(c * 0.9 * var(--asri-c-0, 1)) h/0.2);
    border-radius: 5px;
    /*border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
}
[data-theme-mode="dark"] li.item.item--focus {
    background-color: oklch(from var(--b3-theme-primary) 0.99 calc(c * 0.9 * var(--asri-c-0, 1)) h/0.21)
}
.layout-tab-bar .item__text{
    padding-left: 6px;
    padding-right: 6px;
}
li.item .item__close{
    padding-left: 0px;
    padding-right: 6px;
}
.layout__wnd--active .layout-tab-bar .item:after{
    display:none;
}
.layout-tab-bar {
    border-bottom: 1px solid rgba(0,0,0,0);
}
​

全局字体

/* 合并 @font-face 规则，提供多种字体格式 */
@font-face {
    font-family: 'AaManYuHandwriting';
    /* 假设字体文件在当前 CSS 文件的上一级目录的 fonts 文件夹中，根据实际情况调整 */
    src: url('../fonts/Aa漫语手写体(非商用)_@字体视界.woff2') format('woff2'),
         url('../fonts/Aa漫语手写体(非商用)_@字体视界.woff') format('woff'),
         url('../fonts/Aa漫语手写体(非商用)_@字体视界.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 统一选择器的 custom-font-family 属性值 */
[custom-font-family="Aa漫语手写体"],
.protyle-wysiwyg [data-node-id][custom-font-family="Aa漫语手写体"] {
    font-family: 'AaManYuHandwriting', sans-serif;
}
​

编辑区格子背景

/* 编辑器网格背景 CSS片段 */
.protyle-top, .protyle-wysiwyg {
    background-image: linear-gradient(90deg, rgba(90, 30, 60, .2) 3%, transparent 0), linear-gradient(1turn, rgba(90, 30, 60, .2) 3%, transparent 0);
    background-size: 20px 20px;
    background-position: 50%;
}
​

引述快修改

/* 让引述块背景色不那么刺眼 */
/* 修改引述块默认底色 */
/* 提高上下边距以防止多个引述块竖排的时候没有间隙的问题 */
.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq{
    margin: 8px 0;
    border-radius: 0em;
    border-width: 0px;
    /* border-style: dashed; */
    border-color: transparent;
    box-shadow: 0px 0px 2px 1px;
    color: #41454c;
    font-family: "仓耳今楷03","霞鹜文楷";
    background-color: white;
}

/* 内边框线 */
.bq::after,blockquote::after{
    content: "";
    height: calc(100% - 8px);
    width: calc(100% - 8px);
    background-color: #ff000000;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    border-color: rgba(128, 128, 128, 0.459);
    border-width: 1px;
    border-style: solid;
    pointer-events: none;
}

.bq,blockquote{
    position:relative
}






.bq .li>.protyle-action{
    color: #5c6b86f0 !important;
}




.bq .li>.protyle-action{
    color: #5c6b86f0 !important;
}


.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq{
    padding: 8px;
}
​

文档树

/* 文档树引用数字的颜色,修改为淡色，避免过于显眼导致注意力容易从笔记本标题文字上分散到此*/
.counter {
    color: #55555a5d;
}



/* 设置文档树前面的＞符号颜色为灰色以不抢夺笔记本标题文字的视觉吸引力 */
/* .fn__flex-1.fn__flex-column.file-tree .b3-list-item__arrow {
    color: #8080804d;
} */

/* 点击文档树emoji不弹出修改窗口（防止误触） */
/* 有人需要此功能，加回来 */
/* span.b3-list-item__icon.b3-tooltips.b3-tooltips__n {
    pointer-events: none;
} */

/* 笔记本之间的间隔 */
.sy__file ul.b3-list.b3-list--background {
    border-radius: 0.3em;
    margin: 6px 10px 6px 12px;
    outline: 1px solid rgba(178, 100, 100, 0.812);
    background-color: white;
    overflow: hidden;
}

[data-type="navigation-root"] {
    height: 32px;
}


/* 设置反链面板图标位置（不设置对不齐） */
.backlinkList.fn__flex-1 .b3-list-item .popover__block {
    margin-left: 4px;
}



/* ------------------------------------文档树文字设置为灰色------------------------------- */
.b3-list-item__text {
    color: var(--b3-theme-on-surface);
}

/* -----------------------------文档树focus------------------------------- */

/* 颜色 */
.b3-list--background .b3-list-item--focus .b3-list-item__text,
.b3-list--background .b3-list-item--focus .b3-list-item__graphic,
.b3-list--background .b3-list-item--focus .b3-list-item__icon svg {
    /* color: var(--b3-theme-on-background); */
    color: #287b00;
}


/* 页签切换面板中不用绿色，绿色太亮了 */
.switch-doc .b3-list-item.b3-list-item--focus{
   background-color: #beeb8a !important;
}

/* 缩小页签列表中的间距 */
.switch-doc .b3-list:last-child .b3-list-item{
    border-radius:0;
    margin-bottom:0 !important;  
    padding: 0.1em 0 0.1em 0;   
    box-shadow: inset 0 -1px 0 #d2bdbd;
}








/* 背景色 */
.b3-list--background .b3-list-item--focus {
    background-color: #e9ffbd  !important;
}
.sy__backlink .b3-list--background .b3-list-item--focus {
    background-color: #ffbdb4b0 !important;
}




/* -----------------------------文档树hover-------------------------------- */

/* 颜色 */
.b3-list--background .b3-list-item:hover .b3-list-item__text,
.b3-list--background .b3-list-item:hover .b3-list-item__graphic,
.b3-list--background .b3-list-item:hover .b3-list-item__icon svg {
    color: var(--b3-theme-error);
}

/* 背景 */


/* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口，下方代码将其中的元素正常放置而不是居中放置 */
.block__edit.fn__flex-1.protyle{
    align-items: normal;
}

/* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口，为这个区域中的内容块设置小点的内边距以防止出现多个滚动条 */
.block__popover.block__popover--move.block__popover--open .block__edit>.protyle-content{
    padding: 0px 20px 0px 20px !important;
    /* overflow-y: hidden; */
    /* min-height: 30px; */
    /* margin: 10px; */
}

/* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口，为这个区域设置边框 */
.block__popover.block__popover--move.block__popover--open{
    border: 5px solid var(--b3-pinkroom-border);
}

/* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口，为这个区域取消内阴影*/
.block__edit.fn__flex-1.protyle{
    box-shadow: none;
}

/* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口，为这个区域取消内阴影*/
.block__edit>.protyle-breadcrumb{
    background-color: #fbeeee;
}


/* 将鼠标放置在文档树中笔记本右侧的引用数字上能打开一个窗口，为这个区域中的内容区域设置最底层的底色 */
.block__popover.block__popover--move.block__popover--open .block__content{
    background-color: #dfd1cdb5;
}


/* 防止鼠标划过列表项时，底色左右两边还留有空隙 */
.b3-list-item{
    margin: 0px !important;
}

/* 鼠标划过列表项时的底色 */
.b3-list--background .b3-list-item:hover:not(.b3-list-item--focus){
    background-color: #94f7ed;
}


/* list-item设置底色时和外边框的圆角不融合 */
.b3-list--background .b3-list-item{
    border-radius: 2px;
}

/* 给大纲中项目添加边线 */
.sy__outline .b3-list--background .b3-list-item{
    border-radius: 0px;
    box-shadow: inset -1px -1px 0px 0px #9f9f9f4b;
}



/* 颜色用蓝的*/
.b3-list--background .b3-list-item:hover .b3-list-item__text, .b3-list--background .b3-list-item:hover .b3-list-item__graphic, .b3-list--background .b3-list-item:hover .b3-list-item__icon svg{
    color: inherit;
}





/* .fn__hidden{
    visibility: visible;
}


.fn__hidden>svg.b3-list-item__arrow{
    visibility: hidden;
}

.b3-list-item__toggle {
    position: relative;
}

.b3-list-item__toggle.b3-list-item__toggle--hl::after{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: -1.6em;
    background-color: #83aaac99;
    top: 0;
}

.b3-list-item__text {
    box-shadow: 0 1px 0 0  rgb(73 126 128 / 40%);
} */
​

代码块

/* ----代码块相关样式---- */
/* 设置代码块背景色为浅色 */
.b3-typography div.hljs, .protyle-wysiwyg div.hljs {
    background-color: #ffffff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* 为代码块设置阴影和圆角 */
.b3-typography .code-block, .protyle-wysiwyg .code-block{
    box-shadow: 0px 0px 6px 1px #c6979772;
    border-radius: 5px;
}

/* 代码块左边部分样式，设置统一圆角以让代码块整体阴影能正常显示 */
.protyle-linenumber__rows{
    border-right: 1px solid #e3bfc5;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-sizing:border-box;
}
​

‍

文字下划线

.protyle-wysiwyg span[data-type~=u] {
    border-bottom: unset;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #D61A1A; /* 波浪线的颜色 */
    text-decoration-skip-ink: none;
}
​

引述快

/* 让引述块背景色不那么刺眼 */
/* 修改引述块默认底色 */
/* 提高上下边距以防止多个引述块竖排的时候没有间隙的问题 */
.b3-typography blockquote, 
.b3-typography .bq, 
.protyle-wysiwyg blockquote, 
.protyle-wysiwyg .bq{
    margin: 8px 0;
    border-radius: 8px; /* 增加或修改了这个属性，让边框变圆润，数值越大越圆，这里设置为8px，你可以根据喜好调整 */
    border-width: 0px;
    /* border-style: dashed; */
    border-color: transparent;
    box-shadow: 0px 0px 2px 1px;
    color: #41454c;
    background-color: white;
}

/* 内边框线 */
.bq::after,
blockquote::after{
    content: "";
    height: calc(100% - 8px);
    width: calc(100% - 8px);
    background-color: #ff000000;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    border-color: rgba(128, 128, 128, 0.459);
    border-width: 1px;
    border-style: solid;
    pointer-events: none;
    border-radius: 6px; /* 这里也可以添加内边框线的圆角，同样可调整数值，这里设置为6px */
}

.bq,
blockquote{
    position:relative
}

.bq .li>.protyle-action{
    color: #5c6b86f0 !important;
}

.bq .li>.protyle-action{
    color: #5c6b86f0 !important;
}

.b3-typography blockquote, 
.b3-typography .bq, 
.protyle-wysiwyg blockquote, 
.protyle-wysiwyg .bq{
    padding: 8px;
}  
​

边框

body:not(.body--mobile,.body--window) #layouts {
  background-color: rgb(249, 238, 237);
}
​

标题

.protyle-title__input{
    background: transparent;
    border-bottom: 2px solid #e3bbc3;
}


​