gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-28 17:43:36 +01:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

style/tree items: restyle selection
Some checks are pending
Checks / main (push) Waiting to run
Details

Browse Source
This commit is contained in:
Adorian Doran 2026-02-26 09:31:39 +02:00
parent b24d2c65a1
commit 6b82943871
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/client/src/stylesheets/theme-next/shell.css
View File

@ -685,7 +685,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
#left-pane span.fancytree-node.fancytree-active {
position: relative;
background: transparent !important;
background: transparent;
color: var(--custom-color, var(--left-pane-item-selected-color));
}
@ -698,6 +698,14 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
}
}
/*
* .fancytree-node pseudo-elements:
*
* - ::before: the active tree item decorator.
* - ::after: the selected tree item background. A pseudo-element is used instead of the
* element's background color, to allow alpha compositing for the hover state.
*/
#left-pane span.fancytree-node.fancytree-active::before {
position: absolute;
content: "";
@ -712,6 +720,24 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
z-index: -1;
}
#left-pane span.fancytree-node.fancytree-selected {
--left-pane-item-selected-shadow-size: 4px;
position: relative;
background-color: transparent;
border-radius: 0;
}
#left-pane span.fancytree-node.fancytree-selected::after {
display: block;
position: absolute;
z-index: -2;
content: "";
inset: 0;
background: var(--selection-background-color);
animation: left-pane-item-select 100ms ease-out;
}
#left-pane span.fancytree-node.protected > span.fancytree-custom-icon {
position: relative;
filter: unset !important;

13
apps/client/src/stylesheets/tree.css
View File

@ -185,7 +185,7 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
span.fancytree-active {
color: var(--active-item-text-color);
background-color: var(--active-item-background-color) !important;
background-color: var(--active-item-background-color);
border-color: transparent; /* invisible border */
border-radius: 5px;
}
@ -195,14 +195,9 @@ span.fancytree-active .fancytree-title {
border: 0;
}
span.fancytree-selected {
border-color: var(--main-border-color) !important;
border-radius: 5px;
}
span.fancytree-selected .fancytree-title {
text-decoration: underline;
font-style: italic;
span.fancytree-node.fancytree-selected {
background-color: var(--selection-background-color);
border-radius: 0;
}
span.fancytree-selected .fancytree-custom-icon::before {