css 大全

css选择xlink:href属性

see https://ld246.com/article/1734427196426

@namespace xlink 'http://www.w3.org/1999/xlink';

.protyle-breadcrumb__item:has(use[xlink|href*=iconListItem]) .protyle-breadcrumb__text {
    display: none;
}

数据库底部计算行一直显示

see https://ld246.com/article/1734565049720

.av__row--footer .av__calc,.av__row--footer.av__row--show .av__calc {
    opacity: 1
}

数据库优化css

see https://ld246.com/article/1735096220866

see https://ld246.com/article/1734565049720

/* 数据库优化css */
/* 设置数据库最大高度 */
.av__scroll {
    max-height: 600px;
    overflow: auto;
}
/* 显示底部计算(求和等) */
.av__row--footer .av__calc,.av__row--footer.av__row--show .av__calc {
    opacity: 1
}
/* 头部固定不动 */
.av__row--header{
    top: 0px;
    position: sticky;
    z-index:2; /* 防止与cell内容及右侧列重叠 */
}
/* 底部固定不动 */
.av__row--footer{
    position: sticky;
    bottom: 0;
    z-index:2; /* 防止与cell内容及右侧列重叠 */
}
/* 左侧第一列固定位置,更改这里的nth-child可以实现任意一列固定位置,nth-child从2开始算第一列,因为左侧有一列控制列 */
.av__row .av__cell:nth-child(2){
    position: sticky;
    left: 22.75px; /* 左侧控制列宽度 */
     /* 防止与右侧列重叠 */
    background-color:var(--av-background);
    z-index:1;
}
/* 底部计算第一列固定位置,更改这里的nth-child可以实现任意一列固定位置,nth-child从1开始算第一列 */
.av__row--footer .av__calc:nth-child(1){
    position: sticky;
    left: 0;
     /* 防止与右侧列重叠 */
    background-color:var(--av-background);
    z-index:1;
}
/* 底部计算从第2列起需加上左侧控制列的宽度 */
.av__row--footer .av__calc:nth-child(n+2) {
    left: 22.75px; /* 左侧控制列宽度 */
}

左侧dock栏宽度调整

see https://ld246.com/article/1734652659115/comment/1735186442068?r=wilsons#comments

.dock#dockLeft.dock--vertical {
  /* 左侧dock栏宽度 */
  width:52px;
  /* 每个图标的内外边距,计算公式是 (dock宽-图标宽)/4 */
  .dock__item {
      padding: 6px; /* 内边距 */
      margin: 7px; /* 外边距,可根据需要微调 */
  }
  /* 图标的宽度,高度自适应,1:1 显示,计算公式是 (dock宽-图标内外边距和*2)/2 */
  .dock__item svg {
      width: 20px;
      height: 20px;
  }
}

两侧dock栏宽度调整

see https://ld246.com/article/1735316551273

/* 两侧dock栏宽度 */
.dock--vertical {
    width:32px; /* 根据自己需要调整 */
}
/* 每个图标的内外边距,计算公式是 (dock宽-图标宽)/4 */
.dock__item {
    padding: 4px; /* 内边距 */
    margin: 4px; /* 外边距 */
}
/* 左侧dock图标外边距大小,可根据需要微调 */
.dock#dockLeft .dock__item {
  margin: 3px;
}
/* 图标的宽度,高度自适应,1:1 显示,计算公式是 (dock宽-图标内外边距和*2)/2 */
.dock svg {
    width: 16px;
    height: 16px;
}

判断闪卡头部

see https://ld246.com/article/1735727743856

/* 仅手机版生效 */
:has(#sidebar) {
    /* 非闪卡头部 */
    :not(.card__main) > .toolbar {
        background-color: green!important;
    }
  
    /* 闪卡头部 */
    .card__main > .toolbar{
        background-color: red!important;
    }
}

查找不存在的内容块

select *
from blocks
where id in (
        select block_id
        from refs
        where not def_block_id in (
                select id
                from blocks
            )
    )

调整子任务行间距

/* 不支持在支持超级,引用等内 */ 
.protyle-wysiwyg > [data-subtype="t"] > [data-subtype="t"] {
    /* 这里用于调试,可忽略 */
    /* background: #483838;
    border: 1px solid #ef4c4c; */
  
    [data-subtype="t"], .protyle-action--task ~ .p {
      margin-bottom: -5px; /* 可在这里调整间距 */
    }
}

/* 支持在支持超级,引用等内 */ 
.protyle-wysiwyg [data-node-index][data-subtype="t"] > [data-subtype="t"] {
    /* 这里用于调试,可忽略 */
    /* background: #483838;
    border: 1px solid #ef4c4c; */
  
    [data-subtype="t"], .protyle-action--task ~ .p {
      margin-bottom: -5px; /* 可在这里调整间距 */
    }
}

效果

image

屏蔽某元素的所有样式,只使用祖先样式,并排除特定元素下的样式不屏蔽

.b3-typography span[custom-js] *:not(.custom-js-content,.custom-js-content *), .protyle-wysiwyg span[custom-js] *:not(.custom-js-content,.custom-js-content *) {
    all: inherit!important;
}
/* 或 兼容性更好 */
.b3-typography span[custom-js] *:not(.custom-js-content):not(.custom-js-content *), .protyle-wysiwyg span[custom-js] *:not(.custom-js-content):not(.custom-js-content *) {
    all: inherit!important;
}

.b3-typography span[custom-js] *,
.protyle-wysiwyg span[custom-js] * {
    all: inherit !important;
}

/* 让 .custom-js-content 及其子元素“恢复为你自己定义的样式” */
.b3-typography span[custom-js] .custom-js-content,
.b3-typography span[custom-js] .custom-js-content *,
.protyle-wysiwyg span[custom-js] .custom-js-content,
.protyle-wysiwyg span[custom-js] .custom-js-content * {
    all: revert !important;
}

调整默认图片大小

see https://ld246.com/article/1750249787083

see https://ld246.com/article/1748670613696

.b3-typography .img>span:nth-child(2), .protyle-wysiwyg .img>span:nth-child(2){
    width: 50%;
}
.b3-typography .img>span:nth-child(2) img, .protyle-wysiwyg .img>span:nth-child(2) img {
    width: 100%;
}

首行缩进
see https://ld246.com/article/1752224633634

/* 段落块首行缩进 CSS片段 */
:is(.b3-typography, .protyle-wysiwyg) :is(p, .p) {
    text-indent: 2em;
}

隐藏文档树文档信息和新建,更多提示

see https://ld246.com/article/1752577255723

.sy__file .b3-tooltips:hover::before, .sy__file .b3-tooltips:hover::after, /* 隐藏更多新建提示 */
body:has(.sy__file .b3-list-item--hide-action:hover>.b3-list-item__action) #tooltip /* 隐藏文档信息提示 */
{
    display: none;
}

滚动条样式

/* 定义滚动条 */
::-webkit-scrollbar {
    width: 8px;  /* 设置滚动条宽度 */
    height: 8px; /* 设置水平滚动条高度 */
}

/* 定义滚动条轨道 */
::-webkit-scrollbar-track {
    background: transparent; /* 轨道透明 */
}

/* 定义滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3); /* 半透明滑块 */
    border-radius: 10px;
}

/* 当滑动条被悬停时 */
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5); /* 悬停时滑块变得更明显 */
}

取消制卡闪动动画

see https://ld246.com/article/1744014086208

/* see https://github.com/siyuan-note/siyuan/blob/1317020c1791edf440da7f836d366567e03dd843/app/src/protyle/wysiwyg/transaction.ts#L598 */
@keyframes addCard {
  /* 不定义任何关键帧 */
}

顶部工具栏和tab融合css

see https://ld246.com/article/1754653136440

#toolbar {
    background-color: transparent;
    border-bottom-color: transparent;
    margin-bottom: -38px;
    pointer-events: none;
    z-index: 5;
    -webkit-app-region: drag;
    app-region: drag;
}
#toolbar .toolbar__item {
    pointer-events: auto;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
#drag {
    opacity: 0;
}
.layout__center {
    padding-top: 3.75px;
    box-sizing: border-box;
    &#layouts {
        padding-top: 3.75px;
    }
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar {
    background-color: transparent;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar [data-type="tab-header"] {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar.layout-tab-bar--readonly {
    max-width: 80px;
    -webkit-app-region: drag;
    app-region: drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar.layout-tab-bar--readonly :is([data-type="new"], [data-type="more"]) {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child + .layout-tab-container {
    border-radius: var(--b3-border-radius);
}
#layouts.layout__center [data-type="wnd"] > :is(.fn__flex-column, .fn__flex-1, .fn__flex):first-child {
    -webkit-app-region: drag;
    app-region: drag;
    & > .layout-tab-bar.layout-tab-bar--readonly {
        max-width: 80px;
    }
}
.toolbar__window {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.layout__center [data-type="wnd"] > .fn__flex:first-child.fn__none + .layout-tab-container {
    height: calc(100% - 34px);
    margin-top: 34px;
}
#dockLeft {
    padding-top: 38px;
}
#dockRight {
    padding-top: 38px;
}
:is(.layout__dockl, .layout__dockr):not(.layout--float)  {
    padding-top: 38px;
    min-height: 50%;
}
#layouts .layout__resize.layout__resize--lr {
    clip-path: inset(38px 0 0 0 round var(--b3-border-radius));
}
#layouts .layout--float.layout__dockb .layout__resize.layout__resize--lr {
    clip-path: none;
}

修改head 悬停图标大小和颜色

see https://ld246.com/article/1757851752752

.protyle-gutters button[data-type="NodeHeading"] svg {
    color: #000; /* 颜色 */
    zoom: 1.5; /* 放大倍数 */
    margin-top: -3px; /* 微调上下位置 */
}

dock瘦身

.dock__item {
    margin: 7px 3px
}
.dock--vertical{
    width: 32px;
}

隐藏标签新建按钮占空间

/* 隐藏标签新建按钮占空间 */
.layout__center [data-type="wnd"] > .fn__flex:first-child > .layout-tab-bar.layout-tab-bar--readonly :is([data-type="new"]) {
    display: none;
}
.layout-tab-bar .item--readonly {
    padding-left: 4px;
    padding-right: 4px;
    justify-content: center;
    width: 24px;
}
.layout-tab-bar--readonly{
    min-width: 24px;
}
image.png

留下你的脚步
推荐阅读