style/inline title: tweak appearance

This commit is contained in:
Adorian Doran 2025-12-17 00:09:15 +02:00
parent 6f494e3e38
commit 143b1827e6
2 changed files with 39 additions and 17 deletions

View File

@ -8,9 +8,14 @@
.inline-title {
max-width: var(--max-content-width);
container-type: inline-size;
padding-inline-start: 24px;
& > .inline-title-row {
--icon-size: 35px;
--icon-padding-size: 10px;
--title-size: 1.8em;
display: flex;
align-items: center;
gap: 16px;
@ -20,29 +25,41 @@
opacity: 0;
pointer-events: none;
}
.note-icon-widget {
--note-icon-size: 35px;
--note-icon-container-padding-size: 10px;
}
.note-title-caption {
flex-grow: 1;
}
.note-title-widget {
--note-title-size: 1.8em;
--note-title-padding-inline: 0;
}
@container (max-width: 500px) {
.note-icon-widget {
--note-icon-size: 25px;
--note-icon-container-padding-size: 6px;
}
.note-title-widget {
--note-title-size: 1.5em;
}
.title-details {
display: none;
}
}
}
&.hidden {
display: none;
}
.note-icon-widget {
--note-icon-size: 35px;
}
.note-title-caption {
flex-grow: 1;
}
.note-title-widget {
--note-title-size: 1.8em;
--note-title-padding-inline: 0;
input {
line-height: 1;
}
}
}
.title-row {
@ -70,11 +87,14 @@ body.prefers-centered-content .inline-title {
display: flex;
gap: 0.25em;
margin: 0;
margin-top: .2rem;
list-style-type: none;
opacity: .5;
flex-wrap: wrap;
font-size: .85rem;
line-height: 1;
flex-wrap: nowrap;
white-space: nowrap;
span.value {
font-weight: 500;

View File

@ -12,8 +12,10 @@ div.note-title-widget {
.note-title-widget input.note-title {
font-size: var(--note-title-size);
border: 0;
border-radius: 0;
min-width: 5em;
width: 100%;
line-height: 1;
padding-block: 0;
padding-inline: var(--note-title-padding-inline);
}