t11-topbar: 组合按钮整块高亮,导出 title 精简
This commit is contained in:
@@ -149,7 +149,7 @@ async function scrollToExport() {
|
||||
<span class="combo">
|
||||
<button
|
||||
class="tbtn combo-body"
|
||||
:class="{ active: tool === 'shape' }"
|
||||
:class="{ active: tool === 'shape' || open }"
|
||||
:title="tip('toolShape', '形状工具')"
|
||||
aria-label="形状工具"
|
||||
@click="pickShapeTool(open, toggle)"
|
||||
@@ -158,7 +158,7 @@ async function scrollToExport() {
|
||||
</button>
|
||||
<button
|
||||
class="tbtn combo-caret"
|
||||
:class="{ active: open }"
|
||||
:class="{ active: tool === 'shape' || open }"
|
||||
title="形状类型"
|
||||
aria-label="选择形状类型"
|
||||
:aria-expanded="open"
|
||||
@@ -178,7 +178,7 @@ async function scrollToExport() {
|
||||
<span class="combo">
|
||||
<button
|
||||
class="tbtn combo-body"
|
||||
:class="{ active: tool === 'background' }"
|
||||
:class="{ active: tool === 'background' || open }"
|
||||
:title="tip('toolBackground', '背景工具')"
|
||||
aria-label="背景工具"
|
||||
@click="pickBackgroundTool(open, toggle)"
|
||||
@@ -187,7 +187,7 @@ async function scrollToExport() {
|
||||
</button>
|
||||
<button
|
||||
class="tbtn combo-caret"
|
||||
:class="{ active: open }"
|
||||
:class="{ active: tool === 'background' || open }"
|
||||
title="背景来源"
|
||||
aria-label="选择背景来源"
|
||||
:aria-expanded="open"
|
||||
@@ -226,7 +226,7 @@ async function scrollToExport() {
|
||||
<span class="vr" aria-hidden="true"></span>
|
||||
<button
|
||||
class="tbtn"
|
||||
title="导出(面板在右侧,点了滚过去)"
|
||||
:title="tip('export', '导出')"
|
||||
aria-label="导出"
|
||||
@click="scrollToExport"
|
||||
>
|
||||
@@ -322,6 +322,19 @@ async function scrollToExport() {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 组合按钮整块一起亮:hover 与 active 都作用到两个按钮,不分家。
|
||||
* `.combo:hover .tbtn:not(.active)` 管非激活时的悬停(光靠单个 .tbtn:hover
|
||||
* 只会亮鼠标底下那一半);`.combo .tbtn.active` 保证激活态在悬停时也不被
|
||||
* .tbtn:hover 的 color 盖回 fg。 */
|
||||
.combo:hover .tbtn:not(.active) {
|
||||
background: var(--bg3);
|
||||
color: var(--fg);
|
||||
}
|
||||
.combo .tbtn.active {
|
||||
background: var(--bg3);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.vr {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
|
||||
Reference in New Issue
Block a user