gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-23 07:44:24 +01:00
Code Issues Actions 11 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 { div.note-icon-widget {
padding-inline-start: 10px; /* The size of the icon */
margin-inline-end: 0; --note-icon-size: 30px;
width: 50px; /* The padding size for the icon container */
height: 50px; --note-icon-container-padding-size: 10px;
contain: unset;
} }
.note-icon-widget button.note-icon { .note-icon-widget button.note-icon {
font-size: 180%; --size: calc(var(--note-icon-size) + var(--note-icon-container-padding-size) * 2);
background-color: transparent;
width: var(--size);
height: var(--size);
padding: 0;
border: 1px solid transparent; border: 1px solid transparent;
padding: 6px; background-color: transparent;
cursor: pointer;
color: var(--muted-text-color); color: var(--muted-text-color);
cursor: pointer;
font-size: var(--note-icon-size);
} }
.note-icon-widget button.note-icon:disabled { .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; flex-grow: 1000;
height: 100%; height: auto;
contain: unset;
} }
.note-title-widget input.note-title { .note-title-widget input.note-title {
font-size: 110%; font-size: var(--note-title-size);
border: 0; border: 0;
margin: 2px 0px;
min-width: 5em; min-width: 5em;
width: 100%; width: 100%;
padding: 1px 12px; padding-block: 0;
padding-inline: var(--note-title-padding-inline);
} }
.note-title-widget input.note-title[readonly] { .note-title-widget input.note-title[readonly] {
@ -22,15 +28,12 @@
} }
body.mobile .note-title-widget input.note-title { body.mobile .note-title-widget input.note-title {
padding: 0; --note-title-padding-inline: 0;
}
body.desktop .note-title-widget input.note-title {
font-size: 180%;
} }
body.experimental-feature-new-layout { body.experimental-feature-new-layout {
.title-row { .title-row {
container-type: size; container-type: size;
border-bottom: 1px solid var(--main-border-color); border-bottom: 1px solid var(--main-border-color);
transition: border 400ms ease-out; transition: border 400ms ease-out;
@ -40,9 +43,20 @@ body.experimental-feature-new-layout {
transition: none; 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) { @container (max-width: 700px) {
.note-icon-widget .note-icon { .note-title-widget {
font-size: 1.3em; --note-title-size: 1.25rem;
--note-title-padding-inline: 4px;
} }
.note-title-widget { .note-title-widget {