[css] “转换为”二级菜单上移至一级菜单

2.0 版本效果

每行 6 个按钮:

image.png

CSS 片段

/* “转换为”二级菜单上移至一级菜单 2.0 CSS片段 */
.b3-menu__items > button[data-id="turnInto"]:first-of-type {
    padding: 0;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type:is(.b3-menu__item--show, .b3-menu__item--current) {
    background-color: inherit;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type .b3-menu__submenu {
    display: block;
    display: contents;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type .b3-menu__items {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 每行6个等宽列 */
    gap: 4px; /* 按钮间距 */
    width: 100%;
    padding: 0 0 2px 0;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type .b3-menu__item {
    justify-content: center;
    min-width: unset;
    align-items: center;
    padding: 8px 4px; /* 按钮内边距 */
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type .b3-menu__item .b3-menu__icon {
    margin: 0;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type > :is(.b3-menu__icon, .b3-menu__label),
.b3-menu__items > button[data-id="turnInto"]:first-of-type .b3-menu__items :is(.b3-menu__label, .b3-menu__accelerator) {
    display: none;
}

1.0 版本效果

image.png

CSS 片段

/* “转换为”二级菜单上移至一级菜单 1.0 CSS片段 */
.b3-menu__items > button[data-id="turnInto"]:first-of-type {
    height: 30px;
    padding: 0;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type:is(.b3-menu__item--show, .b3-menu__item--current) {
    background-color: inherit;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type .b3-menu__submenu {
    display: block;
    display: contents;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type .b3-menu__items {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type .b3-menu__item {
    justify-content: center;
    min-width: unset;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type .b3-menu__item .b3-menu__icon {
    margin: 0;
}
.b3-menu__items > button[data-id="turnInto"]:first-of-type > :is(.b3-menu__icon, .b3-menu__label),
.b3-menu__items > button[data-id="turnInto"]:first-of-type .b3-menu__items :is(.b3-menu__label, .b3-menu__accelerator) {
    display: none;
}
打赏 30 积分后可见
30 积分 • 10 打赏
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    28448 引用 • 119792 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    285 引用 • 1988 回帖
2 操作
JeffreyChen 在 2025-09-18 08:58:59 更新了该帖
JeffreyChen 在 2025-06-20 18:24:20 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
JeffreyChen
目前作为思源笔记的半个客服、测试、开发、评审,在爱发电接受捐赠:https://afdian.com/a/JeffreyChen