Update search button icons and styles

Revise button labels and styling for search
options to improve UI consistency.
This commit is contained in:
Andrew
2026-07-07 15:46:33 +08:00
parent 9a6b861ce3
commit fb2c0ef237
2 changed files with 24 additions and 2 deletions

View File

@@ -39,9 +39,9 @@
</svg>
</button>
<button id="plugin_search_cc" class="plugin-search-toggle" type="button"
aria-pressed="false" title="Match case">Cc</button>
aria-pressed="false" title="Match case">Aa</button>
<button id="plugin_search_w" class="plugin-search-toggle" type="button"
aria-pressed="false" title="Match whole word">W</button>
aria-pressed="false" title="Match whole word"><span class="plugin-search-underline">ab</span></button>
</div>
<!-- <button id="open_terminal" class="ButtonStyleRegular ButtonTypeChoice left-btn">-->
<!-- Open Terminal-->

View File

@@ -107,6 +107,28 @@
border-color: var(--main-color-hover);
}
/* "ab" over a bracket drawn by ::after box draws it */
.plugin-search-underline {
position: relative;
display: inline-block;
padding-bottom: 2px;
}
.plugin-search-underline::after {
content: "";
position: absolute;
/* why: ticks stick out past the outer edges of "a"/"b" on each side. */
left: -1px;
right: -1px;
bottom: 0;
/* why: short ticks + bottom rule, tucked near the baseline. */
height: 2px;
border: 1px solid currentColor;
border-top: 0;
/* why: soften the two joints where the ticks meet the bottom rule. */
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
/* why: reuse the themed warn tokens so matched-char marks track light and dark automatically.
note: no padding/margin/border - a highlight must not change text width, else rows reflow. */
mark.plugin-search-hit {