gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-22 23:34:25 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

style/note title & icon: use CSS variables to adjust size, improve the layout on different sizes

Browse Source
This commit is contained in:
Adorian Doran 2025-12-16 20:30:58 +02:00
parent db116981b8
commit 9542c9776a
2 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,22 @@
.note-icon-widget {
padding-inline-start: 10px;
margin-inline-end: 0;
width: 50px;
height: 50px;
div.note-icon-widget {
/* The size of the icon */
--note-icon-size: 30px;
/* The padding size for the icon container */
--note-icon-container-padding-size: 10px;
contain: unset;
}
.note-icon-widget button.note-icon {
font-size: 180%;
background-color: transparent;
--size: calc(var(--note-icon-size) + var(--note-icon-container-padding-size) * 2);
width: var(--size);
height: var(--size);
padding: 0;
border: 1px solid transparent;
padding: 6px;
cursor: pointer;
background-color: transparent;
color: var(--muted-text-color);
cursor: pointer;
font-size: var(--note-icon-size);
}
.note-icon-widget button.note-icon:disabled {

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

@ -1,15 +1,21 @@
.note-title-widget {
div.note-title-widget {
/* The font size for the title */
--note-title-size: 180%;
/* The horizontal padding of the title widget */
--note-title-padding-inline: 12px;
flex-grow: 1000;
height: 100%;
height: auto;
contain: unset;
}
.note-title-widget input.note-title {
font-size: 110%;
font-size: var(--note-title-size);
border: 0;
margin: 2px 0px;
min-width: 5em;
width: 100%;
padding: 1px 12px;
padding-block: 0;
padding-inline: var(--note-title-padding-inline);
}
.note-title-widget input.note-title[readonly] {
@ -22,15 +28,12 @@
}
body.mobile .note-title-widget input.note-title {
padding: 0;
}
body.desktop .note-title-widget input.note-title {
font-size: 180%;
--note-title-padding-inline: 0;
}
body.experimental-feature-new-layout {
.title-row {
container-type: size;
border-bottom: 1px solid var(--main-border-color);
transition: border 400ms ease-out;
@ -40,9 +43,20 @@ body.experimental-feature-new-layout {
transition: none;
}
.note-icon-widget {
--note-icon-size: 20px;
--note-icon-padding-size: 8px;
}
.note-title-widget {
--note-title-size: 18px;
--note-title-padding-inline: 4px;
}
@container (max-width: 700px) {
.note-icon-widget .note-icon {
font-size: 1.3em;
.note-title-widget {
--note-title-size: 1.25rem;
--note-title-padding-inline: 4px;
}
.note-title-widget {