V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
jaredyam
V2EX  ›  CSS

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

  •  
  •   jaredyam · 2022-03-26 19:04:35 +08:00 · 1823 次点击
    这是一个创建于 971 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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]

    1 条回复    2022-03-26 21:59:13 +08:00
    byheaven0912
        1
    byheaven0912  
       2022-03-26 21:59:13 +08:00
    插件市场有个类似功能插件,借鉴一下?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3406 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 11:28 · PVG 19:28 · LAX 03:28 · JFK 06:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.