在自定义 Logseq 主题时遇到的一些关于 CSS 的疑问

2022-03-26 19:04:35 +08:00
 jaredyam

custom.css:

.dark-theme,
html[data-theme="dark"] {
    --ls-block-bullet-active-color: rgb(217, 255, 0);
    --ls-block-bullet-threading-width: 1px;
}

.block-content-wrapper {
    position: relative;
}

.bullet-container {
    height: 14px !important;
    width: 14px !important;
    position: relative;
    transform: translate(1px, -1px);
}

.ls-block div.items-center {
    position: relative;
    height: 26px !important;
}

.ls-block .ls-block>div>div.items-center::before {
    content: "";
    left: -1px;
    right: 6px;
    top: calc(-50% + var(--ls-block-bullet-threading-width) * 0.5 - 1px);
    bottom: 50%;
    position: absolute;
    border-left: var(--ls-block-bullet-threading-width) solid transparent;
    border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
    border-bottom-left-radius: 10px;
}

.ls-block .block-children>.ls-block::before {
    content: "";
    top: -1rem;
    bottom: 0;
    border-left: var(--ls-block-bullet-threading-width) solid transparent;
    left: -1px;
    position: absolute;
}

.ls-block[haschild="true"]>div>.block-content-wrapper::before {
    pointer-events: none;
    content: "";
    top: 12px;
    bottom: 0;
    left: -15px;
    position: absolute;
    border-left: var(--ls-block-bullet-threading-width) solid transparent;
}

.ls-block[haschild="true"]:focus-within>div>.block-content-wrapper::before {
    border-color: var(--ls-block-bullet-active-color);
    --ls-block-bullet-threading-width: 3px;
}

.ls-block .ls-block:focus-within>div>div.items-center::before {
    border-color: var(--ls-block-bullet-active-color);
    --ls-block-bullet-threading-width: 3px;
}

.ls-block .block-children:focus-within>.ls-block:not(:focus-within)::before {
    border-color: var(--ls-block-bullet-active-color);
    --ls-block-bullet-threading-width: 3px;
}

.ls-block .block-children:focus-within>.ls-block:focus-within~.ls-block::before {
    border-color: transparent;
}

以上代码可以作为 Logseq 的 custom.css 自定义主题,在光标 focus-within 一个 block 时会高亮当前 block 的嵌套路径。如下图加粗绿线:

我现在有如下疑问:

上述代码如何从监听 focus-within 事件切换到 hover 事件时仍然奏效?有没有办法同时高亮 focus-withinhover 事件时对应的 block 路径? 从目前的尝试来看,如果直接将所有 :focus-within 替换为 :hover 后会出现:

  1. 如果没有发生 focus-within 事件,hover 事件大致可以正常工作,但是和 focus-within 下的行为不太一致
  2. focus-within 事件仍然会被监听,干扰 hover 时的行为

有没有比较懂 CSS 又在用 Logseq 的大佬看看上面代码怎么改可以支持 hover 时高亮或者两者同时高亮[please]

1827 次点击
所在节点    CSS
1 条回复
byheaven0912
2022-03-26 21:59:13 +08:00
插件市场有个类似功能插件,借鉴一下?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/843080

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX