Tasks插件toolbar美化

经验分享
,
1

tasks插件升级后，它的toolbar太难看了，写个样式美化了一下，舒服多了

Tasks_toolbar_CSS

代码：

/* ==============================
   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;
    }
}
2

很好，好看了很多。不过淡化还是不够满意，用AI修改了一份，鼠标悬停时才显示的版本。

/* ==============================
   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;
}
3

你喜欢更干净的界面，这个版本也挺好，给大家更多选择。

其实不用重写代码，把这个改一下就行：

opacity: 0.4;                 /* 默认淡化，可调 0.3~0.5 */

这里的改成0就隐藏了。