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

style/inline title: improve the note icon focus indicator

Browse Source
This commit is contained in:
Adorian Doran 2025-12-17 00:33:33 +02:00
parent 07dcdf3078
commit 5446d8a932
3 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/widgets/layout/InlineTitle.css
View File

@ -7,6 +7,7 @@
} }
.inline-title { .inline-title {
margin-top: 2px; /* Allow space for the focus outline */
max-width: var(--max-content-width); max-width: var(--max-content-width);
container-type: inline-size; container-type: inline-size;
padding-inline-start: 24px; padding-inline-start: 24px;

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

@ -81,11 +81,15 @@ body.experimental-feature-new-layout {
--note-icon-button-color: white; --note-icon-button-color: white;
.note-icon-widget button.note-icon { .note-icon-widget button.note-icon {
--input-focus-outline-color: var(--note-icon-button-hover-background-color);
position: relative; position: relative;
outline-offset: 4px;
border-radius: 50%;
background: transparent !important; background: transparent !important;
&, &:hover {
border-radius: 50%;
}
/* The icon */ /* The icon */
&::before { &::before {
position: relative; position: relative;
@ -102,9 +106,8 @@ body.experimental-feature-new-layout {
background: var(--note-icon-button-background-color); background: var(--note-icon-button-background-color);
} }
&:hover::after { &:focus-visible {
background: var(--note-icon-button-hover-background-color); outline: 2px solid var(--note-icon-button-color);
transition: background 200ms ease-out;
} }
} }
} }

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

@ -35,7 +35,6 @@ body.mobile .note-title-widget input.note-title {
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;