Obsidian插件样式：定制Note Toolbar布局以模拟Cmenu显示

[熊猫别熬夜 (噗~)]

Note Toolbar 它可以为不同的文件夹配置不同的工具栏，并能够在文件夹之间自适应切换，而且可以非常方便的编辑工具栏按钮。

不过我比较喜欢cmenu插件那种简洁的按钮格式，于是修改了下插件样式，可以用下面的样式定制 Note Toolbar 布局以模拟 Cmenu 显示，效果如下。

对应设置如下：

样式设置

您可以将 Note Toolbar 的显示样式更改为类似于 Cmenu 插件的样式。这种设置仅在工具栏名称中包含“cmenu”时生效。

---

• 将工具栏的位置设置为“置顶（固定位置）”即可，其他设置保持默认。
• 注意：目前，该设置暂不支持移动端，因此建议在移动设备上隐藏此工具栏。

自带的分割符和行号符可以正常运行

CSS 样式

对应的 Style Setting 设置有如下：

cmenu 对齐方式：flex-start、flex-end、space-around、space-between、space-evenly

图片来自《深入解析 CSS》P137 5.4.1 理解弹性容器的属性

/* @settings
name: Note Toolbar 仿 cMenu 的菜单栏
id: Note Toolbar 仿 cMenu 的菜单栏
settings:
-
  id: cmenu-note-toolbar-width
  title: cmenu宽度
  type:  variable-number
  default: 460
  format: px
- 
  id: cmenu-flex-just-content
  title: cmenu对齐方式
  description: 
  type: variable-select
  default: flex-start
  options:
      - flex-start
      - flex-end
      - space-around
      - space-between
      - space-evenly
*/

body {
  --cmenu-note-toolbar-width: 460px;
  --cmenu-flex-justily-content: flex-start;
}

/* note toolbar 像 cmenu那样显示 */
div[data-name *="cmenu"] {
  z-index: var(--layer-status-bar);
  position: absolute;
  bottom: 60px;
  width: 100% !important;
  pointer-events: none !important;
  display: flex;
  justify-content: center !important;
  background-color: transparent !important;

  div.callout, .callout-content {
    background-color: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    /* width: fit-content;
    height: fit-content; */
  }

  ul[role="menu"] {
    pointer-events: auto !important;

    width: fit-content;
    max-width: var(--cmenu-note-toolbar-width);
    /* display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)); */
    display: flex;
    flex-flow: row wrap;
    justify-content: var(--cmenu-flex-just-content);
    gap: 8px 5px !important;

    padding: 10px !important;
    transition: 200ms ease;
    height: auto;
    border-radius: 6px;

    z-index: var(--layer-status-bar);
    box-shadow: 0px 3px 30px rgb(31 38 135 / 15%);
    margin: 33px !important;
    border: 1px solid var(--background-modifier-border);

    /* 添加毛玻璃效果 */
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);


    li {
      border-radius: 6px;
      background-color: var(--background-secondary);

      &>span {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px !important;

        svg {
          transform: scale(1.2);
        }

      }

      .cg-note-toolbar-item-label {
        display: none;
      }
    }

  }

}

原文链接：PKMer_Obsidian 插件样式：修改 note toolbar 插件布局像 cmenu 那样显示

[Echors]

大佬，您好，我根据您的设计做了一些改动，使工具栏支持拖动和折叠，效果如图

拖动到右侧可以竖排显示

下面是调整后的css，添加了一些样式设置

/* @settings
name: Note Toolbar 仿 cMenu 的菜单栏
id: Note Toolbar 仿 cMenu 的菜单栏
settings:
-
  id: cmenu-note-toolbar-width
  title: cmenu宽度
  type:  variable-number
  default: 460
  format: px
- 
  id: cmenu-flex-just-content
  title: cmenu对齐方式
  description: 
  type: variable-select
  default: flex-start
  options:
      - flex-start
      - flex-end
      - space-around
      - space-between
      - space-evenly
*/

body {
  --cmenu-note-toolbar-width: 460px;
  --cmenu-flex-justily-content: flex-start;
}

/* note toolbar 像 cmenu那样显示 */
div[data-name *="cmenu"] {
  z-index: var(--layer-status-bar);
  position: absolute;
  bottom: 60px;
  width: 100% !important;
  pointer-events: none !important;
  display: flex;
  justify-content: center !important;
  background-color: transparent !important;

  div.callout, .callout-content {
    background-color: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  ul[role="menu"] {
    pointer-events: auto !important;

    width: fit-content;
    max-width: var(--cmenu-note-toolbar-width);
    display: flex;
    flex-flow: row wrap;
    justify-content: var(--cmenu-flex-just-content);
    gap: 4px !important;

    padding: 6px !important;
    transition: 200ms ease;
    height: auto;
    border-radius: 6px;

    z-index: var(--layer-status-bar);
    margin: 20px !important;
    border: 1px solid var(--background-modifier-border);

    /* 添加毛玻璃效果 */
    backdrop-filter: blur(10px);
    background-color: transparent;

    li {
      border-radius: 6px;
      background-color: var(--background-secondary);

      &>span {
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px !important;

        svg {
          transform: scale(1.2);
        }
      }

      .cg-note-toolbar-item-label {
        display: none;
      }
      
      /* 拖动手柄样式 - 与其他按钮保持一致 */
      &.toolbar-handle {
        background-color: var(--background-secondary) !important;
        cursor: move !important;
        order: -2;
        
        &:hover {
          background-color: var(--background-modifier-hover) !important;
        }

        &>span {
          color: var(--text-normal) !important;
        }

        /* 添加拖动图标 */
        &>span>svg {
          opacity: 0.7;
        }

        &:hover>span>svg {
          opacity: 1;
          color: var(--text-normal);
        }
      }

      /* 折叠按钮样式 - 与其他按钮保持一致 */
      &.toolbar-toggle {
        background-color: var(--background-secondary) !important;
        cursor: pointer !important;
        order: -1;
        
        &:hover {
          background-color: var(--background-modifier-hover) !important;
        }

        &>span {
          transition: transform 200ms ease;
          color: var(--text-normal) !important;
        }

        &>span>svg {
          opacity: 0.7;
        }

        &:hover>span>svg {
          opacity: 1;
        }

        &.is-collapsed>span {
          transform: rotate(180deg);
        }
      }
    }
    
    /* 折叠状态 */
    &.is-collapsed {
      li:not(.toolbar-handle):not(.toolbar-toggle) {
        display: none !important;
      }
    }
    
    /* 拖动状态 */
    &.is-dragging {
      z-index: calc(var(--layer-status-bar) + 10);
    }
  }
  
  /* 自定义位置 */
  &.has-custom-position {
    position: fixed !important;
    bottom: auto !important;
    justify-content: flex-start !important;
    width: auto !important;
    
    ul[role="menu"] {
      margin: 0 !important;
    }
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  div[data-name *="cmenu"] ul[role="menu"] {
    max-width: calc(100vw - 40px);
    margin: 15px !important;
    padding: 5px !important;
  }
}

/* 防止拖动时选中文本 */
body.dragging-toolbar {
  user-select: none !important;
  -webkit-user-select: none !important;
}

下面是JavaScript脚本，放在库中即可

// 工具栏增强脚本 - 最简单直接的拖动实现
(function() {
    'use strict';
    
    let toolbar = null;
    let container = null;
    let isDragging = false;
    let lastX = 0;
    let lastY = 0;
    let isCollapsed = false;
    
    function init() {
        console.log('🔧 初始化工具栏增强');
        findToolbar();
        
        const observer = new MutationObserver(() => {
            if (!document.querySelector('.toolbar-handle')) {
                setTimeout(findToolbar, 1000);
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }
    
    function findToolbar() {
        container = document.querySelector('div[data-name*="cmenu"]');
        toolbar = container?.querySelector('ul[role="menu"]');
        
        if (!toolbar) {
            setTimeout(findToolbar, 1000);
            return;
        }
        
        if (!toolbar.querySelector('.toolbar-handle')) {
            createButtons();
        } else {
            bindExisting();
        }
    }
    
    function createButtons() {
        // 拖动手柄
        const handle = document.createElement('li');
        handle.className = 'toolbar-handle';
        handle.innerHTML = `<span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg></span>`;
        
        // 折叠按钮
        const toggle = document.createElement('li');
        toggle.className = 'toolbar-toggle';
        toggle.innerHTML = `<span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6,9 12,15 18,9"/></svg></span>`;
        
        toolbar.insertBefore(toggle, toolbar.firstChild);
        toolbar.insertBefore(handle, toolbar.firstChild);
        
        bindEvents(handle, toggle);
        console.log('✅ 按钮已创建');
    }
    
    function bindExisting() {
        const handle = toolbar.querySelector('.toolbar-handle');
        const toggle = toolbar.querySelector('.toolbar-toggle');
        bindEvents(handle, toggle);
        console.log('✅ 重新绑定按钮');
    }
    
    function bindEvents(handle, toggle) {
        // 拖动开始
        handle.addEventListener('mousedown', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            isDragging = true;
            lastX = e.clientX;
            lastY = e.clientY;
            
            // 首次拖动时，计算并存储容器内边距导致的偏移
            if (!container.dataset.offsetX) {
                const toolbarInContainer = container.querySelector('ul[role="menu"]');
                if (toolbarInContainer) {
                    const containerRect = container.getBoundingClientRect();
                    const toolbarRect = toolbarInContainer.getBoundingClientRect();
                    container.dataset.offsetX = (toolbarRect.left - containerRect.left).toString();
                    container.dataset.offsetY = (toolbarRect.top - containerRect.top).toString();
                } else {
                    container.dataset.offsetX = '0';
                    container.dataset.offsetY = '0';
                }
            }

            // 只在第一次拖动时切换到固定定位
            if (!container.classList.contains('has-custom-position')) {
                const rect = container.getBoundingClientRect();
                container.classList.add('has-custom-position');
                container.style.left = rect.left + 'px';
                container.style.top = rect.top + 'px';
            }
            
            toolbar.classList.add('is-dragging');
            document.body.classList.add('dragging-toolbar');
            
            console.log('🎯 开始拖动');
        });
        
        // 折叠功能
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            isCollapsed = !isCollapsed;
            
            if (isCollapsed) {
                toolbar.classList.add('is-collapsed');
                toggle.classList.add('is-collapsed');
            } else {
                toolbar.classList.remove('is-collapsed');
                toggle.classList.remove('is-collapsed');
            }
            
            console.log('🔄 切换折叠');
        });
        
        // 防止默认行为
        handle.ondragstart = () => false;
        handle.onselectstart = () => false;
    }
    
    // 全局鼠标移动 - 使用相对移动
    document.addEventListener('mousemove', function(e) {
        if (!isDragging) return;
        
        // 计算鼠标移动的距离
        const deltaX = e.clientX - lastX;
        const deltaY = e.clientY - lastY;
        
        // 更新记录的鼠标位置
        lastX = e.clientX;
        lastY = e.clientY;
        
        // 获取当前位置
        const currentLeft = parseInt(container.style.left) || 0;
        const currentTop = parseInt(container.style.top) || 0;
        
        // 计算新位置
        let newLeft = currentLeft + deltaX;
        let newTop = currentTop + deltaY;

        // --- 智能边界检测 ---
        const rootEl = document.documentElement;
        const leftSidebar = document.querySelector('.mod-left-split');
        const rightSidebar = document.querySelector('.mod-right-split');
        const titleBar = document.querySelector('.workspace-tabs'); 
        const statusBar = document.querySelector('.status-bar');

        const bounds = {
            left: leftSidebar && leftSidebar.classList.contains('is-open') ? leftSidebar.getBoundingClientRect().right : (document.querySelector('.workspace-ribbon')?.getBoundingClientRect().right || 0),
            right: rightSidebar && rightSidebar.classList.contains('is-open') ? rightSidebar.getBoundingClientRect().left : rootEl.clientWidth,
            top: titleBar ? titleBar.getBoundingClientRect().bottom : 0,
            bottom: statusBar ? statusBar.getBoundingClientRect().top : rootEl.clientHeight
        };
        
        // 获取容器尺寸和内边距偏移
        const containerRect = container.getBoundingClientRect();
        const offsetX = parseFloat(container.dataset.offsetX) || 0;
        const offsetY = parseFloat(container.dataset.offsetY) || 0;

        // 边界限制 (考虑内边距补偿)
        const minLeft = bounds.left - offsetX;
        const maxLeft = bounds.right - containerRect.width;
        const minTop = bounds.top - offsetY;
        const maxTop = bounds.bottom - containerRect.height;

        newLeft = Math.max(minLeft, Math.min(newLeft, maxLeft));
        newTop = Math.max(minTop, Math.min(newTop, maxTop));
        
        // 应用新位置
        container.style.left = newLeft + 'px';
        container.style.top = newTop + 'px';
    });
    
    // 全局鼠标释放
    document.addEventListener('mouseup', function() {
        if (!isDragging) return;
        
        isDragging = false;
        toolbar.classList.remove('is-dragging');
        document.body.classList.remove('dragging-toolbar');
        
        console.log('✅ 拖动结束');
    });
    
    // 重置功能
    window.resetToolbar = function() {
        container.classList.remove('has-custom-position');
        container.style.left = '';
        container.style.top = '';
        toolbar.classList.remove('is-collapsed');
        const toggle = document.querySelector('.toolbar-toggle');
        if (toggle) toggle.classList.remove('is-collapsed');
        isCollapsed = false;
        console.log('🔄 工具栏已重置');
    };
    
    init();
    console.log('✅ 工具栏增强脚本加载完成');
})();

[熊猫别熬夜 (噗~)]

厉害厉害 收藏了

[Livx]

JS脚本在我的环境下有bug：切换笔记时新笔记的工具栏不会增加拖动和折叠按钮。

我排查了一下发现是检测当前状态栏是否已有拖动按钮那块逻辑出现了问题，改了之后的脚本如下

// 工具栏增强脚本 - 最简单直接的拖动实现
(function () {
  "use strict";

  let toolbar = null;
  let container = null;
  let activeFile = null;
  let isDragging = false;
  let lastX = 0;
  let lastY = 0;
  let isCollapsed = false;

  function getActiveLeafContainer() {
    const leaf = window.app.workspace.activeLeaf;
    if (!leaf) return null;
    return leaf.view?.containerEl || leaf.containerEl || null;
  }

  function init() {
    findToolbar();

    const observer = new MutationObserver(() => {
      activeFile = getActiveLeafContainer();
      if (!activeFile?.querySelector(".toolbar-handle")) {
        setTimeout(findToolbar, 300);
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }

  function findToolbar() {
    activeFile = getActiveLeafContainer();
    container = activeFile?.querySelector('div[data-name*="cmenu"]');
    toolbar = container?.querySelector('ul[role="menu"]');

    if (!toolbar) {
      setTimeout(findToolbar, 1000);
      return;
    }

    if (!toolbar.querySelector(".toolbar-handle")) {
      createButtons();
    } else {
      bindExisting();
    }
  }

  function createButtons() {
    // 拖动手柄
    const handle = document.createElement("li");
    handle.className = "toolbar-handle";
    handle.innerHTML = `<span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg></span>`;

    // 折叠按钮
    const toggle = document.createElement("li");
    toggle.className = "toolbar-toggle";
    toggle.innerHTML = `<span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6,9 12,15 18,9"/></svg></span>`;

    toolbar.insertBefore(toggle, toolbar.firstChild);
    toolbar.insertBefore(handle, toolbar.firstChild);

    bindEvents(handle, toggle);
  }

  function bindExisting() {
    const handle = toolbar.querySelector(".toolbar-handle");
    const toggle = toolbar.querySelector(".toolbar-toggle");
    bindEvents(handle, toggle);
  }

  function bindEvents(handle, toggle) {
    // 拖动开始
    handle.addEventListener("mousedown", function (e) {
      e.preventDefault();
      e.stopPropagation();

      isDragging = true;
      lastX = e.clientX;
      lastY = e.clientY;

      // 首次拖动时，计算并存储容器内边距导致的偏移
      if (!container.dataset.offsetX) {
        const toolbarInContainer = container.querySelector('ul[role="menu"]');
        if (toolbarInContainer) {
          const containerRect = container.getBoundingClientRect();
          const toolbarRect = toolbarInContainer.getBoundingClientRect();
          container.dataset.offsetX = (
            toolbarRect.left - containerRect.left
          ).toString();
          container.dataset.offsetY = (
            toolbarRect.top - containerRect.top
          ).toString();
        } else {
          container.dataset.offsetX = "0";
          container.dataset.offsetY = "0";
        }
      }

      // 只在第一次拖动时切换到固定定位
      if (!container.classList.contains("has-custom-position")) {
        const rect = container.getBoundingClientRect();
        container.classList.add("has-custom-position");
        container.style.left = rect.left + "px";
        container.style.top = rect.top + "px";
      }

      toolbar.classList.add("is-dragging");
      document.body.classList.add("dragging-toolbar");
    });

    // 折叠功能
    toggle.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();

      isCollapsed = !isCollapsed;

      if (isCollapsed) {
        toolbar.classList.add("is-collapsed");
        toggle.classList.add("is-collapsed");
      } else {
        toolbar.classList.remove("is-collapsed");
        toggle.classList.remove("is-collapsed");
      }
    });

    // 防止默认行为
    handle.ondragstart = () => false;
    handle.onselectstart = () => false;
  }

  // 全局鼠标移动 - 使用相对移动
  document.addEventListener("mousemove", function (e) {
    if (!isDragging) return;

    // 计算鼠标移动的距离
    const deltaX = e.clientX - lastX;
    const deltaY = e.clientY - lastY;

    // 更新记录的鼠标位置
    lastX = e.clientX;
    lastY = e.clientY;

    // 获取当前位置
    const currentLeft = parseInt(container.style.left) || 0;
    const currentTop = parseInt(container.style.top) || 0;

    // 计算新位置
    let newLeft = currentLeft + deltaX;
    let newTop = currentTop + deltaY;

    // --- 智能边界检测 ---
    const rootEl = document.documentElement;
    const leftSidebar = document.querySelector(".mod-left-split");
    const rightSidebar = document.querySelector(".mod-right-split");
    const titleBar = document.querySelector(".workspace-tabs");
    const statusBar = document.querySelector(".status-bar");

    const bounds = {
      left:
        leftSidebar && leftSidebar.classList.contains("is-open")
          ? leftSidebar.getBoundingClientRect().right
          : document.querySelector(".workspace-ribbon")?.getBoundingClientRect()
              .right || 0,
      right:
        rightSidebar && rightSidebar.classList.contains("is-open")
          ? rightSidebar.getBoundingClientRect().left
          : rootEl.clientWidth,
      top: titleBar ? titleBar.getBoundingClientRect().bottom : 0,
      bottom: statusBar
        ? statusBar.getBoundingClientRect().top
        : rootEl.clientHeight,
    };

    // 获取容器尺寸和内边距偏移
    const containerRect = container.getBoundingClientRect();
    const offsetX = parseFloat(container.dataset.offsetX) || 0;
    const offsetY = parseFloat(container.dataset.offsetY) || 0;

    // 边界限制 (考虑内边距补偿)
    const minLeft = bounds.left - offsetX;
    const maxLeft = bounds.right - containerRect.width;
    const minTop = bounds.top - offsetY;
    const maxTop = bounds.bottom - containerRect.height;

    newLeft = Math.max(minLeft, Math.min(newLeft, maxLeft));
    newTop = Math.max(minTop, Math.min(newTop, maxTop));

    // 应用新位置
    container.style.left = newLeft + "px";
    container.style.top = newTop + "px";
  });

  // 全局鼠标释放
  document.addEventListener("mouseup", function () {
    if (!isDragging) return;

    isDragging = false;
    toolbar.classList.remove("is-dragging");
    document.body.classList.remove("dragging-toolbar");
  });

  // 重置功能
  window.resetToolbar = function () {
    container.classList.remove("has-custom-position");
    container.style.left = "";
    container.style.top = "";
    toolbar.classList.remove("is-collapsed");
    const toggle = document.querySelector(".toolbar-toggle");
    if (toggle) toggle.classList.remove("is-collapsed");
    isCollapsed = false;
  };

  init();
})();

遇到同样情况的可以试试这个版本

[qz4290044174 (青舟)]

佬，现在Note Toolbar 改版好像没有为工具栏命名的功能了，请问该怎么激活代码功能呢？

[熊猫别熬夜 (噗~)]

我这里还有呀

[风之漫舞]

优化了一下css脚本,现在支持在安卓端Obsidian上使用了
为了不影响查看内容,使用了半透明样式
最多显示4个图标,更多转为上下滑动

代码如下

/* cmenu样式工具栏_手机竖排半透明版 */
 
 
body {
  --cmenu-note-toolbar-width: 460px;
  --cmenu-flex-justily-content: flex-start;
  --cmenu-max-visible-items: 4; /* 新增：最大可见项数 */
  --cmenu-item-height: 44px; /* 新增：每个项的高度 */
  --cmenu-gap: 8px; /* 新增：项间距 */
}

/* note toolbar 像 cmenu那样显示 - 左侧竖排单列 */
div[data-name *="cmenu"] {
  z-index: var(--layer-status-bar);
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: auto !important;
  height: auto !important;
  pointer-events: auto !important;
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  align-items: flex-start !important;
  background-color: transparent !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  margin: 0 !important;
}

div[data-name *="cmenu"] div.callout, 
div[data-name *="cmenu"] .callout-content {
  background-color: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 100% !important;
}

div[data-name *="cmenu"] ul[role="menu"] {
  pointer-events: auto !important;
  width: auto !important;
  max-width: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-flow: column nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: var(--cmenu-gap) !important;
  padding: 12px 8px !important;
  transition: all 0.3s ease;
  
  /* 计算最大高度：4个项 + 间隙 + 内边距 */
  max-height: calc(
    (var(--cmenu-item-height) * var(--cmenu-max-visible-items)) + 
    (var(--cmenu-gap) * (var(--cmenu-max-visible-items) - 1)) + 
    24px /* 上下内边距 */
  ) !important;
  
  /* 添加滚动功能 */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /* 自定义滚动条样式 */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important;
  
  height: auto;
  border-radius: 8px;
  z-index: var(--layer-status-bar);
  
  /* 透明度设置 - 最小0.5 */
  background-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  
  /* 默认状态：最小0.5不透明度 */
  opacity: 0.5 !important;
  margin: 0 !important;
}

/* Webkit浏览器滚动条样式 */
div[data-name *="cmenu"] ul[role="menu"]::-webkit-scrollbar {
  width: 4px !important;
}

div[data-name *="cmenu"] ul[role="menu"]::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 2px !important;
}

div[data-name *="cmenu"] ul[role="menu"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 2px !important;
}

div[data-name *="cmenu"] ul[role="menu"]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* 悬停时增加可见性和滚动条显眼度 */
div[data-name *="cmenu"] ul[role="menu"]:hover {
  opacity: 0.9 !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  
  /* 悬停时滚动条更明显 */
  scrollbar-color: rgba(255, 255, 255, 0.6) transparent !important;
}

div[data-name *="cmenu"] ul[role="menu"]:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.6) !important;
}

div[data-name *="cmenu"] ul[role="menu"] li {
  border-radius: 6px;
  background-color: rgba(var(--background-secondary-rgb, 245, 246, 247), 0.7) !important;
  min-width: 44px !important;
  min-height: var(--cmenu-item-height) !important;
  width: 44px !important;
  height: var(--cmenu-item-height) !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
  opacity: 0.7 !important;
  
  /* 确保项不会被压缩 */
  flex-shrink: 0 !important;
}

/* 悬停时列表项更明显 */
div[data-name *="cmenu"] ul[role="menu"] li:hover {
  opacity: 1 !important;
  background-color: rgba(var(--interactive-accent-rgb, 46, 170, 220), 0.8) !important;
  transform: scale(1.05) !important;
}

div[data-name *="cmenu"] ul[role="menu"] li > span {
  width: 100% !important;
  height: 100% !important;
  min-height: var(--cmenu-item-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  opacity: 0.8 !important;
}

/* 悬停时图标更明显 */
div[data-name *="cmenu"] ul[role="menu"] li:hover > span {
  opacity: 1 !important;
}

div[data-name *="cmenu"] ul[role="menu"] li svg {
  transform: scale(1.2);
  width: 20px !important;
  height: 20px !important;
  opacity: 0.9 !important;
  filter: brightness(0.9) !important;
}

div[data-name *="cmenu"] ul[role="menu"] li .cg-note-toolbar-item-label {
  display: none;
}

/* 移动端优化 */
@media (max-width: 768px) {
  body {
    --cmenu-max-visible-items: 4; /* 移动端显示3个 */
    --cmenu-item-height: 44px; /* 移动端项更大 */
    --cmenu-gap: 6px; /* 移动端间隙稍小 */
  }
  
  div[data-name *="cmenu"] {
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  div[data-name *="cmenu"] ul[role="menu"] {
    max-width: 60px !important;
    padding: 10px 6px !important;
    gap: var(--cmenu-gap) !important;
    opacity: 0.9 !important;
    
    /* 移动端滚动条更宽 */
    scrollbar-width: none !important; /* 移动端隐藏滚动条，触摸滚动更自然 */
  }
  
  /* 移动端隐藏Webkit滚动条 */
  div[data-name *="cmenu"] ul[role="menu"]::-webkit-scrollbar {
    display: none !important;
  }
  
  /* 移动端触摸时提高可见性 */
  div[data-name *="cmenu"] ul[role="menu"]:active {
    opacity: 0.9 !important;
  }
  
  div[data-name *="cmenu"] ul[role="menu"] li {
    min-width: 48px !important;
    min-height: var(--cmenu-item-height) !important;
    width: 48px !important;
    height: var(--cmenu-item-height) !important;
    opacity: 0.6 !important;
  }
  
  div[data-name *="cmenu"] ul[role="menu"] li > span {
    min-height: var(--cmenu-item-height) !important;
  }
}

/* 暗色模式适配 */
.theme-dark div[data-name *="cmenu"] ul[role="menu"] {
  background-color: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
}

.theme-dark div[data-name *="cmenu"] ul[role="menu"]:hover {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

.theme-dark div[data-name *="cmenu"] ul[role="menu"] li {
  background-color: rgba(255, 255, 255, 0.35) !important;
}

/* 暗色模式滚动条 */
.theme-dark div[data-name *="cmenu"] ul[role="menu"] {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
}

.theme-dark div[data-name *="cmenu"] ul[role="menu"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
}

.theme-dark div[data-name *="cmenu"] ul[role="menu"]:hover {
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent !important;
}

.theme-dark div[data-name *="cmenu"] ul[role="menu"]:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4) !important;
}

/* 防止其他样式覆盖 */
div[data-name *="cmenu"] * {
  pointer-events: auto !important;
}

/* 点击状态反馈 */
div[data-name *="cmenu"] ul[role="menu"] li:active {
  background-color: rgba(var(--interactive-accent-rgb, 46, 170, 220), 0.9) !important;
  transform: scale(0.95) !important;
  transition: transform 0.1s ease !important;
  opacity: 1 !important;
}

/* 平滑滚动行为 */
div[data-name *="cmenu"] ul[role="menu"] {
  scroll-behavior: smooth !important;
}

/* 可选：添加淡入淡出动画 */
@keyframes toolbarFadeIn {
  from { opacity: 0; transform: translateX(-10px) translateY(-50%); }
  to { opacity: 0.5; transform: translateX(0) translateY(-50%); }
}

div[data-name *="cmenu"] {
  animation: toolbarFadeIn 0.5s ease-out;
}

/* 阅读模式下的特殊处理 */
.markdown-reading-view div[data-name *="cmenu"] ul[role="menu"] {
  opacity: 0.5 !important;
}

.markdown-reading-view div[data-name *="cmenu"] ul[role="menu"]:hover {
  opacity: 0.8 !important;
}

/* 当项数量较少时的居中显示 */
div[data-name *="cmenu"] ul[role="menu"]:has(li:nth-child(4)) {
  justify-content: flex-start !important;
}

div[data-name *="cmenu"] ul[role="menu"]:not(:has(li:nth-child(4))) {
  justify-content: center !important;
}