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-within
和 hover
事件时对应的 block 路径?
从目前的尝试来看,如果直接将所有 :focus-within
替换为 :hover
后会出现:
focus-within
事件,hover
事件大致可以正常工作,但是和 focus-within
下的行为不太一致focus-within
事件仍然会被监听,干扰 hover
时的行为有没有比较懂 CSS 又在用 Logseq 的大佬看看上面代码怎么改可以支持 hover
时高亮或者两者同时高亮[please]
1
byheaven0912 2022-03-26 21:59:13 +08:00
插件市场有个类似功能插件,借鉴一下?
|