Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-29 11:02:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): add an alias CSS class (tn-tool-button) for icon buttons

Browse Source
This commit is contained in:
Adorian Doran 2025-02-04 00:08:43 +02:00
parent 5376abac0b
commit 90732a5324
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/public/stylesheets/theme-next/forms.css
View File

@ -78,10 +78,11 @@ button.btn.btn-success kbd {
* Icon buttons
*/
:root .icon-action:not(.global-menu-button) {
:root .icon-action:not(.global-menu-button),
:root .tn-tool-button {
width: var(--icon-button-size);
height: var(--icon-button-size);
border: unset;
border: unset !important;
border-radius: 8px;
padding: 0;
text-align: center;
@ -89,7 +90,8 @@ button.btn.btn-success kbd {
}
/* The "x" icon button */
:root .icon-action.bx-x {
:root .icon-action.bx-x,
:root .tn-tool-button.bx-x {
--icon-button-hover-background: var(--tab-close-button-hover-background);
--icon-button-hover-color: var(--tab-close-button-hover-color);
--icon-button-size: 24px;
@ -99,23 +101,28 @@ button.btn.btn-success kbd {
}
/* The icon */
:root .icon-action:not(.global-menu-button)::before {
:root .icon-action:not(.global-menu-button)::before,
:root .tn-tool-button::before {
display: block;
line-height: var(--icon-button-size);
font-size: calc(var(--icon-button-size) * var(--icon-button-icon-ratio));
}
:root .icon-action:not(.global-menu-button):hover,
:root .icon-action:not(.global-menu-button).show {
:root .icon-action:not(.global-menu-button).show,
:root .tn-tool-button:hover,
:root .tn-tool-button.show {
background: var(--icon-button-hover-background);
color: var(--icon-button-hover-color);
}
:root .icon-action:not(.global-menu-button):active::before {
:root .icon-action:not(.global-menu-button):active::before,
:root .tn-tool-button:active::before {
transform: scale(.85);
}
:root .icon-action:not(.global-menu-button):focus-visible {
:root .icon-action:not(.global-menu-button):focus-visible,
:root .tn-tool-button:focus-visible {
outline: 2px solid var(--input-focus-outline-color);
}