谁心心念念的双排MySnippets啊

经验分享
,
1

image
image684×906 54 KB

/* =======================================================
   MySnippets 菜单双列显示 (终极修复版：穿透 menu-group)
======================================================= */

/* 1. 强行拉宽整个菜单盒子 */
.menu.MySnippets-statusbar-menu {
    width: 540px !important; 
    max-width: 95vw !important;
}

/* 2. 核心大招：直接对包裹着开关的 div.menu-group 下手 */
/* 通过 :has(.MS-OpenSnippet) 精准锁定“包含代码片段”的这一组，不去影响底部的 Actions 按钮组 */
.menu.MySnippets-statusbar-menu .menu-group:has(.MS-OpenSnippet) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 强制平分为两排 */
    column-gap: 16px !important; /* 左右两排的间距 */
    row-gap: 4px !important; /* 上下每一行的间距 */
}

/* 3. 确保每个开关在自己的格子里占满宽度，不要溢出 */
.menu.MySnippets-statusbar-menu .menu-group:has(.MS-OpenSnippet) .menu-item {
    width: 100% !important;
    margin: 0 !important;
}

/* 4. （可选）修复底部按钮栏如果变形的问题 */
.menu.MySnippets-statusbar-menu .MySnippetsButton {
    flex: 0 0 auto !important; 
}

顺带一提 双排插件的插件 Settings Management 也更新了

2 个赞
2 
/* =======================================================
   MySnippets 菜单三列显示 (终极版)
======================================================= */

/* 1. 强行拉宽整个菜单盒子，三列需要更大的空间 */
.menu.MySnippets-statusbar-menu {
    width: 800px !important;  /* 从之前的540px改大，如果觉得太宽/太窄可以自己微调这个数字 */
    max-width: 95vw !important; /* 保证最大不超过屏幕宽度 */
}

/* 2. 核心：修改 grid-template-columns 为三列 */
.menu.MySnippets-statusbar-menu .menu-group:has(.MS-OpenSnippet) {
    display: grid !important;
    /* 核心修改：这里写了三个 1fr，代表平分为三列 */
    grid-template-columns: 1fr 1fr 1fr !important; 
    column-gap: 16px !important; /* 每列之间的间距 */
    row-gap: 4px !important;     /* 上下行的间距 */
}

/* 3. 确保每个开关在自己的格子里占满宽度，不要溢出 */
.menu.MySnippets-statusbar-menu .menu-group:has(.MS-OpenSnippet) .menu-item {
    width: 100% !important;
    margin: 0 !important;
}

/* 4. 修复底部 Actions 按钮栏防变形 */
.menu.MySnippets-statusbar-menu .MySnippetsButton {
    flex: 0 0 auto !important; 
}

这是三排的这是三排的这是三排的这是三排的这是三排的

2 个赞