修改了CSS,序列号圆点始终对不齐

为了将Logseq中文字的段落间距拉开,通过修改CSS(我其实是个菜鸟,完全是对照着模板慢慢找,然后一遍遍慢慢试),在自定义costom.css中添加了以下代码,主要是把段落前面留4px的间隙,使正文中段落间距增大,不至于写作阅读太拥挤。

.flex .flex-1 .flex-row { /*block块内段落间距设置*/
    display: flex;
    padding-top: 4px;
    padding-right: 0px;
    padding-bottom: 4px;
    padding-left: 0px;
}

但这样导致了每个段落前的圆点序号升高,调了半天也没有找到地方可以把它与正文对齐。在预览下是升高的,在编辑鼠标处在那个block中时,是对齐的。我该怎样修改呢?

:man_facepalming:t2:首先说明,我也是菜鸟。

  • 以下内容亲测有效;
  • 但不明确不同设备(手机、平板、电脑)间的效果;
  • 也不清楚在其他地方是不是还有BUG :rofl:

1、增加「所有block」的上下间距:

.ls-block{
  margin: 4px auto;   /*上下间距均为4px,左右间距自适应*/
}

2、只修改「一级block」的间距,其下缩进的子block间距不变,就再加一个选择条件:

.ls-block[level="1"]{    /*所有一级block:所有 属性包含【层级为1】 的block*/
  margin: 4px auto;   /*上下间距均为4px,左右间距自适应*/

3、如果是想修改「block」里面的内容的间距,就修改行间距属性:

  line-height: 30px;

谢谢指点,这个代码放进去果然有变化,能很好控制正文内容。

还有个问题请教一下,在鼠标点入block后,那个行距的控制是定义什么?

现在是鼠标未点入“块”的预览模式,与鼠标点入“块”后的编辑模式的行距不一致。

另外,菜单的字体大小出现了不一致现象,而设置页面的底色和正文字体颜色也看不清,不知在哪里重新定义可以正常?

经过摸索, 设置窗口中的字体和背景色都在下面的定义中

.dark-theme .bg-indigo-600{
   color: #e5e6e6 !important;/*设置菜单选项中的字体颜色*/
   background-color: rgba(var(--ls-accent-rgb), 0.8);/*设置选项里底色*/
}

其中背景色取的是--ls-accent-rgb的等同值,所以还需要再定义一下它的绝对值。

这个代码也要放进去:

#root>div,
html {
  --ls-accent-rgb: 0, 130, 26 !important;/*定义设置菜单选项的字体背景色*/
}

这下改过来的效果如下:

1 个赞

大纲概括性逻辑竖线,出现错位了!参见图一图二:

以前使用它人模板时出现过这种情况,现在自己修改代码,改来改去也发现终于出现这种情况,怎么调整呢?

图一:

图二:

其实我需要的效果,是要把大纲圆点往前移一点,这样竖线就对齐了。该修改哪个代码呢?

您太客气啦!指点可谈不上,我就是一菜鸟。我说的那些修改有效是有效,但很可能顾此失彼,在其他地方存在bug,我自己也是发现一处改一处 :rofl:

把下面这两个行间距设置成同样大小,预览模式和编辑模式下 块内容的行距就一致了。

1、预览模式(阅读模式/非编辑状态)下,block里内容的行间距(行高):

.block-content.inline{
  line-height: 2;  /*2倍行间距*/
}

2、编辑状态中,block里内容的行间距(行高):

.editor-inner.block-editor textarea{
  line-height: 2;  /*2倍行间距*/
}

修改了一些标签的边距导致的。改一下这个试试?

.block-content-wrapper{
  margin-left: 0;
}

试了下,还是不行呢!

层级连线的那几行代码里有距离设置,修改了层级点或块的 div位置(左右距离,比如margin-left:left:)之后,距离可能就不适配了,需要再调整下。别的都调好了,不想迁就层级连线,就只能改层级连线的代码了。截图里只是上边那节竖线偏移,层级连线的那几行代码里,肯定有一句是控制它的。(我的笨方法:通过修改层级连线的颜色来找出到底是哪一句,然后修改它的left:)。

这个层级连线是通过伪类选择器::before添加的,所以可以重点看看层级连线代码里有::before和设置了left:(都设置了left:距离)的那几句。


层级连线CSS样式参考:
@pengx17这位大佬写了层级连线的CSS样式,有的主题就是直接引用的这套代码,这是具体内容:https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@main/bullet_threading.css
(这只是其中一种写法,层级连线还有别的写法,不过大同小异)