style/inline title: use a better layout

This commit is contained in:
Adorian Doran 2025-12-16 23:33:57 +02:00
parent cad86d4b21
commit 6f494e3e38
2 changed files with 20 additions and 6 deletions

View File

@ -13,6 +13,7 @@
& > .inline-title-row { & > .inline-title-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px;
transition: var(--title-transition); transition: var(--title-transition);
&.hidden { &.hidden {
@ -26,12 +27,22 @@
} }
.note-icon-widget { .note-icon-widget {
padding: 0; --note-icon-size: 35px;
} }
.inline-title-row { .note-title-caption {
border-bottom: 2px solid gray; flex-grow: 1;
} }
.note-title-widget {
--note-title-size: 1.8em;
--note-title-padding-inline: 0;
input {
line-height: 1;
}
}
} }
.title-row { .title-row {
@ -59,10 +70,11 @@ body.prefers-centered-content .inline-title {
display: flex; display: flex;
gap: 0.25em; gap: 0.25em;
margin: 0; margin: 0;
margin-top: 4px;
list-style-type: none; list-style-type: none;
opacity: .5; opacity: .5;
flex-wrap: wrap; flex-wrap: wrap;
font-size: .85rem;
line-height: 1;
span.value { span.value {
font-weight: 500; font-weight: 500;

View File

@ -71,10 +71,12 @@ export default function InlineTitle() {
> >
<div class={clsx("inline-title-row", titleHidden && "hidden")}> <div class={clsx("inline-title-row", titleHidden && "hidden")}>
<NoteIcon /> <NoteIcon />
<NoteTitleWidget /> <div class="note-title-caption">
<NoteTitleWidget />
<NoteTitleDetails />
</div>
</div> </div>
<NoteTitleDetails />
<EditedNotes /> <EditedNotes />
<NoteTypeSwitcher /> <NoteTypeSwitcher />
</div> </div>