t11-topbar: 组合按钮整块高亮,导出 title 精简
This commit is contained in:
@@ -149,7 +149,7 @@ async function scrollToExport() {
|
|||||||
<span class="combo">
|
<span class="combo">
|
||||||
<button
|
<button
|
||||||
class="tbtn combo-body"
|
class="tbtn combo-body"
|
||||||
:class="{ active: tool === 'shape' }"
|
:class="{ active: tool === 'shape' || open }"
|
||||||
:title="tip('toolShape', '形状工具')"
|
:title="tip('toolShape', '形状工具')"
|
||||||
aria-label="形状工具"
|
aria-label="形状工具"
|
||||||
@click="pickShapeTool(open, toggle)"
|
@click="pickShapeTool(open, toggle)"
|
||||||
@@ -158,7 +158,7 @@ async function scrollToExport() {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="tbtn combo-caret"
|
class="tbtn combo-caret"
|
||||||
:class="{ active: open }"
|
:class="{ active: tool === 'shape' || open }"
|
||||||
title="形状类型"
|
title="形状类型"
|
||||||
aria-label="选择形状类型"
|
aria-label="选择形状类型"
|
||||||
:aria-expanded="open"
|
:aria-expanded="open"
|
||||||
@@ -178,7 +178,7 @@ async function scrollToExport() {
|
|||||||
<span class="combo">
|
<span class="combo">
|
||||||
<button
|
<button
|
||||||
class="tbtn combo-body"
|
class="tbtn combo-body"
|
||||||
:class="{ active: tool === 'background' }"
|
:class="{ active: tool === 'background' || open }"
|
||||||
:title="tip('toolBackground', '背景工具')"
|
:title="tip('toolBackground', '背景工具')"
|
||||||
aria-label="背景工具"
|
aria-label="背景工具"
|
||||||
@click="pickBackgroundTool(open, toggle)"
|
@click="pickBackgroundTool(open, toggle)"
|
||||||
@@ -187,7 +187,7 @@ async function scrollToExport() {
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="tbtn combo-caret"
|
class="tbtn combo-caret"
|
||||||
:class="{ active: open }"
|
:class="{ active: tool === 'background' || open }"
|
||||||
title="背景来源"
|
title="背景来源"
|
||||||
aria-label="选择背景来源"
|
aria-label="选择背景来源"
|
||||||
:aria-expanded="open"
|
:aria-expanded="open"
|
||||||
@@ -226,7 +226,7 @@ async function scrollToExport() {
|
|||||||
<span class="vr" aria-hidden="true"></span>
|
<span class="vr" aria-hidden="true"></span>
|
||||||
<button
|
<button
|
||||||
class="tbtn"
|
class="tbtn"
|
||||||
title="导出(面板在右侧,点了滚过去)"
|
:title="tip('export', '导出')"
|
||||||
aria-label="导出"
|
aria-label="导出"
|
||||||
@click="scrollToExport"
|
@click="scrollToExport"
|
||||||
>
|
>
|
||||||
@@ -322,6 +322,19 @@ async function scrollToExport() {
|
|||||||
font-size: 12px;
|
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 {
|
.vr {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|||||||
Reference in New Issue
Block a user