gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-06 06:34:25 +01:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

style/note title & icon: add a circular background for the note icon

Browse Source
This commit is contained in:
Adorian Doran 2025-12-16 22:34:42 +02:00
parent 9542c9776a
commit 35218aca71
2 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
apps/client/src/widgets/note_icon.css
View File

@ -74,3 +74,34 @@ div.note-icon-widget {
width: 1em;
height: 1em;
}
body.experimental-feature-new-layout {
--note-icon-button-background-color: #444444;
--note-icon-button-color: white;
.note-icon-widget button.note-icon {
position: relative;
background: transparent !important;
&:hover {
transform: scale(1.15);
transition: transform 150ms ease-out;
}
/* The icon */
&::before {
position: relative;
z-index: 1;
color: var(--note-icon-button-color);
}
/* The background circle */
&::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--note-icon-button-background-color);
}
}
}

3
apps/client/src/widgets/note_title.css
View File

@ -45,7 +45,8 @@ body.experimental-feature-new-layout {
.note-icon-widget {
--note-icon-size: 20px;
--note-icon-padding-size: 8px;
--note-icon-container-padding-size: 4px;
margin-inline: 8px;
}
.note-title-widget {