Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-05 23:21:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): restyle icon buttons

Browse Source
This commit is contained in:
Adorian Doran 2025-01-30 22:44:11 +02:00
parent b170c234ce
commit 3311f4f01c
4 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/public/stylesheets/theme-next-dark.css
View File

@ -31,6 +31,10 @@
--cmd-button-keyboard-shortcut-color: white; --cmd-button-keyboard-shortcut-color: white;
--cmd-button-disabled-opacity: .5; --cmd-button-disabled-opacity: .5;
--icon-button-color: currentColor;
--icon-button-hover-background: var(--hover-item-background-color);
--icon-button-hover-color: var(--hover-item-text-color);
--muted-text-color: #bbb; --muted-text-color: #bbb;
--input-background-color: #ffffff12; --input-background-color: #ffffff12;

4
src/public/stylesheets/theme-next-light.css
View File

@ -31,6 +31,10 @@
--cmd-button-keyboard-shortcut-color: black; --cmd-button-keyboard-shortcut-color: black;
--cmd-button-disabled-opacity: .5; --cmd-button-disabled-opacity: .5;
--icon-button-color: currentColor;
--icon-button-hover-background: var(--hover-item-background-color);
--icon-button-hover-color: var(--hover-item-text-color);
--muted-text-color: #666; --muted-text-color: #666;
--input-background-color: #00000012; --input-background-color: #00000012;

3
src/public/stylesheets/theme-next/base.css
View File

@ -58,6 +58,9 @@
--help-backdrop-blur: 10px; --help-backdrop-blur: 10px;
--icon-button-size: 32px;
--icon-button-icon-ratio: .65;
/* Theme capabilities */ /* Theme capabilities */
--tab-note-icons: true; --tab-note-icons: true;
} }

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

@ -74,6 +74,36 @@ button.btn.btn-success kbd {
letter-spacing: .5pt; letter-spacing: .5pt;
} }
/*
* Icon buttons
*/
:root .icon-action:not(.global-menu-button) {
width: var(--icon-button-size);
height: var(--icon-button-size);
border: unset;
border-radius: 8px;
padding: 0;
text-align: center;
color: var(--icon-button-color);
}
/* The icon */
:root .icon-action:not(.global-menu-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 {
background: var(--icon-button-hover-background);
color: var(--icon-button-hover-color);
}
:root .icon-action:not(.global-menu-button):active::before {
transform: scale(.85);
}
/* /*
* Input boxes * Input boxes
*/ */