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就隐藏了。

4

感谢分享 ！！！
今天一更新看见一个超级不好看的东西在那里，给我难受的
幸好有你的这个代码，确实好看很多，在你的基础上又改了一点点：

image
image908×172 13.7 KB

  • 就改了一点点位置调整
/* ============================== 
   Tasks Toolbar - Compact Minimal + Hover Highlight
   调整版：输入框更大 + Copy贴近输入框 + 更靠近结果
   ============================== */

/* ---- Toolbar 整体 ---- */
.block-language-tasks .plugin-tasks-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;

    padding: 2px 6px 1px 6px !important;
    gap: 4px !important;
    margin: 0 0 2px 0 !important;   /* 缩小和下面结果的距离 */

    opacity: 0.4;
    transition: opacity 0.2s ease;
}

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

/* ---- 输入框 ---- */
.block-language-tasks .plugin-tasks-toolbar input[aria-label="Filter results"] {
    height: 22px !important;
    min-width: 180px !important;   /* 比原来更大 */
    width: 220px !important;       /* 固定大一点 */
    padding: 0 12px !important;

    font-size: 12px !important;
    line-height: 22px !important;

    border-radius: 5px !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--background-modifier-hover);

    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.65;
    transition: opacity 0.2s ease;
}

.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;
}

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

/* ---- Copy 按钮：贴近输入框，不跑到右边 ---- */
.block-language-tasks .plugin-tasks-toolbar button[aria-label="Copy results"] {
    margin-left: 2px !important;   /* 紧贴输入框 */
    margin-right: 0 !important;

    height: 22px !important;
    width: 22px !important;
    min-height: unset !important;
    min-width: unset !important;
    padding: 0 !important;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px !important;

    flex: 0 0 auto !important;     /* 防止被拉走 */
    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) !important;
}

.block-language-tasks .plugin-tasks-toolbar button[aria-label="Copy results"]:hover svg {
    color: var(--text-normal) !important;
}

/* ---- 缩小 toolbar 和任务结果的距离 ---- */
.block-language-tasks .plugin-tasks-query-result,
.block-language-tasks .contains-task-list {
    margin-top: 0 !important;
}

/* ---- 深浅色微调 ---- */
@media (prefers-color-scheme: dark) {
    .block-language-tasks .plugin-tasks-toolbar input[aria-label="Filter results"] {
        background: color-mix(in srgb, var(--background-modifier-hover) 85%, transparent);
    }
}

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

/* ---- 输入框：给左边更大留白 ---- */
.block-language-tasks .plugin-tasks-toolbar input[aria-label="Filter results"] {
    padding-left: 30px !important;   /* 原来如果是 12 / 15，就改大 */
}

/* ---- Filter 图标：离左边框更远一点 ---- */
.block-language-tasks .plugin-tasks-toolbar svg.lucide-filter {
    margin-left: 6px !important;     /* 往右推一点 */
    margin-right: 4px !important;    /* 和文字再拉开一点 */
}

.block-language-tasks .plugin-tasks-toolbar {
    padding-left: 0 !important;
}
5

我也是忍不了原始界面，动手自己改了。