模板:纯白魔方/common.css

/* 感谢ds老师支援 */ lw-treebutton {

 display: block;
 box-sizing: border-box;
 position: relative;
 width: 100%;                 /* 移动端：占满整行 */
 margin: 4px 0;
 padding: 0 12px 0 1.5em;
 line-height: 1;         
 font-size: 1rem;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;

 /* —— 外观 —— */
 color: #333;
 background-image: linear-gradient(to right, grey, transparent);
 border-radius: 999px 0 0 999px;   /* 左端圆弧（半圆） */
 cursor: pointer;
 user-select: none;
 -webkit-tap-highlight-color: transparent;
 transition: color .18s ease;

}

/* 左侧的 ◎ —— 颜色跟随文字（currentColor） */ lw-treebutton::before {

 content: "◎";
 position: absolute;
 left: .45em;
 top: 50%;
 transform: translateY(-50%);
 color: currentColor;         /* 与文本颜色保持一致 */
 font-size: .9em;
 line-height: 1;
 pointer-events: none;

}

/* —— 桌面端：占屏幕宽度的 1/3 —— */ @media (min-width: 768px) {

 lw-treebutton {
   width: 33.3333%;
 }

}

/* —— 悬浮 / 键盘聚焦 —— */ lw-treebutton:hover, lw-treebutton:focus-visible {

 background-image: linear-gradient(to right, #000, grey);
 color: #fff;                 /* 字体变白，◎ 也随 currentColor 变白 */
 outline: none;

}

/* 可选：按下时的轻微反馈 */ lw-treebutton:active {

 filter: brightness(1.15);

}