gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-20 14:24:27 +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 {
margin-top: 2px; /* Allow space for the focus outline */
max-width: var(--max-content-width);
container-type: inline-size;
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-widget button.note-icon {
--input-focus-outline-color: var(--note-icon-button-hover-background-color);
position: relative;
outline-offset: 4px;
border-radius: 50%;
background: transparent !important;
&, &:hover {
border-radius: 50%;
}
/* The icon */
&::before {
position: relative;
@ -102,9 +106,8 @@ body.experimental-feature-new-layout {
background: var(--note-icon-button-background-color);
}
&:hover::after {
background: var(--note-icon-button-hover-background-color);
transition: background 200ms ease-out;
&:focus-visible {
outline: 2px solid var(--note-icon-button-color);
}
}
}

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 {
.title-row {
container-type: size;
border-bottom: 1px solid var(--main-border-color);
transition: border 400ms ease-out;