Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-30 19:52: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 * 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); width: var(--icon-button-size);
height: var(--icon-button-size); height: var(--icon-button-size);
border: unset; border: unset !important;
border-radius: 8px; border-radius: 8px;
padding: 0; padding: 0;
text-align: center; text-align: center;
@ -89,7 +90,8 @@ button.btn.btn-success kbd {
} }
/* The "x" icon button */ /* 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-background: var(--tab-close-button-hover-background);
--icon-button-hover-color: var(--tab-close-button-hover-color); --icon-button-hover-color: var(--tab-close-button-hover-color);
--icon-button-size: 24px; --icon-button-size: 24px;
@ -99,23 +101,28 @@ button.btn.btn-success kbd {
} }
/* The icon */ /* 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; display: block;
line-height: var(--icon-button-size); line-height: var(--icon-button-size);
font-size: calc(var(--icon-button-size) * var(--icon-button-icon-ratio)); 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):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); background: var(--icon-button-hover-background);
color: var(--icon-button-hover-color); 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); 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); outline: 2px solid var(--input-focus-outline-color);
} }