Obsidian——Tasks插件toolbar美化代码

源代码

/* ==============================
   Tasks Toolbar - Compact Minimal + Hover Highlight
   Author: 科叔
   GitHub：https://github.com/ichris007/Obsidian_Lifein
   Optimized for deep/clean themes
   ============================== */

/* ---- Toolbar 整体 ---- */
.block-language-tasks .plugin-tasks-toolbar {
    padding: 2px 6px !important;
    gap: 6px !important;
    align-items: center;

    opacity: 0.4;                 /* 默认淡化，可调 0.3~0.5 */
    transition: opacity 0.2s ease;
}

/* 悬停时整体高亮 */
.block-language-tasks .plugin-tasks-toolbar:hover {
    opacity: 1;
}

/* ---- 输入框 ---- */
.block-language-tasks .plugin-tasks-toolbar input[aria-label="Filter results"] {
    height: 20px !important;
    padding: 0 15px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    border: none !important;
    background: var(--background-modifier-hover)10;  /* 轻微底色透明度 */
    transition: all 0.2s ease;
}

/* 输入框 placeholder 默认淡化 */
.block-language-tasks .plugin-tasks-toolbar input[aria-label="Filter results"]::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

/* 输入框聚焦时 placeholder 高亮 */
.block-language-tasks .plugin-tasks-toolbar input[aria-label="Filter results"]:focus::placeholder {
    opacity: 1;
}

/* ---- Filter 图标 ---- */
.block-language-tasks .plugin-tasks-toolbar svg.lucide-filter {
    width: 12px !important;
    height: 12px !important;
    stroke-width: 1.3 !important;
    color: var(--text-muted);
    transform: translateY(0.5px);
    transition: color 0.2s ease;
}

/* toolbar 或输入框悬停时 Filter 图标高亮 */
.block-language-tasks .plugin-tasks-toolbar:hover svg.lucide-filter,
.block-language-tasks .plugin-tasks-toolbar input[aria-label="Filter results"]:focus + svg.lucide-filter {
    color: var(--text-normal);
}

/* ---- Copy 按钮 ---- */
.block-language-tasks .plugin-tasks-toolbar button[aria-label="Copy results"] {
    height: 20px !important;
    padding: 0 6px !important;
    min-height: unset !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: opacity 0.2s ease, background 0.2s ease;
}

/* Copy 图标默认淡化 */
.block-language-tasks .plugin-tasks-toolbar svg.lucide-copy {
    width: 12px !important;
    height: 12px !important;
    stroke-width: 1.3 !important;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

/* 鼠标悬停按钮时背景和图标高亮 */
.block-language-tasks .plugin-tasks-toolbar button[aria-label="Copy results"]:hover {
    background: var(--background-modifier-hover);
}

.block-language-tasks .plugin-tasks-toolbar button:hover svg {
    color: var(--text-normal);
}

/* ---- 额外优化：深浅色自适应微调 ---- */
@media (prefers-color-scheme: dark) {
    .block-language-tasks .plugin-tasks-toolbar input[aria-label="Filter results"] {
        background: var(--background-modifier-hover)20;
    }
}

@media (prefers-color-scheme: light) {
    .block-language-tasks .plugin-tasks-toolbar input[aria-label="Filter results"] {
        background: var(--background-modifier-hover)10;
    }
}

优化

这是一份非常优雅的 Obsidian Tasks 插件 工具栏 CSS 简化代码。它的核心逻辑是通过 降低默认不透明度 （Opacity）来减少界面干扰，只有在鼠标悬停时才完全显示。

为了方便你管理和理解，我将这段代码的功能要点和优化建议整理如下：

🛠️ 这段代码实现的效果

• 极简视觉： 默认状态下工具栏透明度仅为 0.4 ，不抢占视线。
• 悬停唤醒： 鼠标移入时平滑过渡到 1.0 完全显示。
• 紧凑布局： 强制输入框和按钮高度为 20px ，适合追求精致感的“极简主义”用户。
• 细节优化： 针对深色/浅色模式自动微调了输入框的背景透明度（使用十六进制 8 位色值，如 10 或 20 表示透明度）。

💡 进阶优化建议

为了让这段代码在实际使用中更加“无感”且好用，你可以考虑加入以下两行微调：

1. 增加“焦点保持”： 如果你正在输入过滤条件（Filter），鼠标不小心移开了，工具栏可能会变淡。添加以下代码可以让它在输入时保持高亮：

CSS

/* 当工具栏内部有元素获取焦点时（如正在输入），保持高亮 */
.block-language-tasks .plugin-tasks-toolbar:focus-within {
    opacity: 1;
}

2. 隐藏边框线： 有些主题会在 Tasks 块上下加边框，配合你的极简风格，可以尝试去掉：

CSS

.block-language-tasks {
    border: none !important;
}

🚀 如何安装使用

1. 打开 Obsidian 设置 > 外观 (Appearance)。
2. 下拉找到 CSS 代码片段 (CSS snippets)，点击右侧的 文件夹图标 。
3. 创建一个新文件，命名为 tasks-minimal.css 。
4. 将你提供的代码（加上我建议的 focus-within ）粘贴进去并保存。
5. 在 Obsidian 中点击 刷新 按钮，并 开启 该片段。

这段代码配上 Minimal 或 AnuPpuccin 主题效果会非常棒！你需要我帮你再针对“已完成任务”的显示效果做一些置灰或划线处理的 CSS 吗？

修改成不可见，鼠标悬停时才可见

要实现“平时完全不可见，鼠标悬停时才显示”的效果，我们需要将默认的 opacity （不透明度）从 0.4 修改为 0 。

以下是修改后的代码片段，我为你做了两处核心优化：

1. 完全隐藏 ：默认 opacity: 0 。
2. 防止闪烁 ：添加了 visibility 属性，确保在不可见时鼠标不会误触到隐藏的按钮。

CSS

/* ==============================
   Tasks Toolbar - 完全隐藏 + 悬停显示
   修改版：科叔 (Optimized)
   ============================== */

/* ---- Toolbar 整体 ---- */
.block-language-tasks .plugin-tasks-toolbar {
    padding: 2px 6px !important;
    gap: 6px !important;
    align-items: center;

    /* 修改重点：默认完全不可见 */
    opacity: 0;
    visibility: hidden; 
    
    /* 平滑过渡 */
    transition: opacity 0.3s ease, visibility 0.3s held;
}

/* 鼠标悬停在整个任务块上时，显示工具栏 */
/* 注：使用 .block-language-tasks:hover 可以让你靠近任务区域就显示，
   如果你希望必须摸到工具栏才显示，请删掉下面的 :hover 之前的空格 */
.block-language-tasks:hover .plugin-tasks-toolbar {
    opacity: 1;
    visibility: visible;
}

/* 当输入框正在输入时，强制保持可见（防止鼠标移开后消失） */
.block-language-tasks .plugin-tasks-toolbar:focus-within {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ---- 以下保持你原有的精美样式 ---- */

/* 输入框样式 */
.block-language-tasks .plugin-tasks-toolbar input[aria-label="Filter results"] {
    height: 20px !important;
    padding: 0 15px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    border: none !important;
    background: var(--background-modifier-hover);
    transition: all 0.2s ease;
}

/* Filter 图标 */
.block-language-tasks .plugin-tasks-toolbar svg.lucide-filter {
    width: 12px !important;
    height: 12px !important;
    stroke-width: 1.3 !important;
    color: var(--text-muted);
}

/* Copy 按钮 */
.block-language-tasks .plugin-tasks-toolbar button[aria-label="Copy results"] {
    height: 20px !important;
    padding: 0 6px !important;
    min-height: unset !important;
    border: none !important;
    background: transparent !important;
    border-radius: 4px;
}

.block-language-tasks .plugin-tasks-toolbar button:hover {
    background: var(--background-modifier-hover) !important;
}

修改说明：

1. opacity: 0 & visibility: hidden ：这两行组合实现了“物理意义上的消失”。
2. focus-within ：这是一个非常关键的补丁。如果你正在工具栏里打字过滤任务，即使鼠标移开了，工具栏也会因为你正在“聚焦”而保持显示，不会打断你的操作。
3. 触发范围 ：我将触发条件设为了 .block-language-tasks:hover 。这意味着只要你的鼠标进入这一组任务的区域，工具栏就会浮现。如果你觉得这样太敏感，可以把它改回 .plugin-tasks-toolbar:hover 。

实践效果

鼠标悬停时

鼠标离开后

有AI的帮助真的很省心省力。

Tag： #Obsidian #Task插件 #美化 #CSS #AI