Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-09 17:52:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): overhaul the tree actions toolbar

Browse Source
This commit is contained in:
Adorian Doran 2024-12-12 00:31:19 +02:00
parent 4325c90f09
commit 9ce97decf2
1 changed files with 75 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/public/stylesheets/theme-next/shell.css
View File

@ -345,11 +345,6 @@ div.quick-search .search-button.show {
/* Tree */
#left-pane .tree-actions {
/* TODO: relocate instead of hiding */
display: none;
}
#left-pane div.tree {
padding: 3px 6px;
animation: fade-in 200ms ease-in;
@ -471,6 +466,81 @@ div.quick-search .search-button.show {
--menu-item-icon-vert-offset: 1.5px;
}
/* Tree actions toolbar */
#left-pane .tree-actions {
--tree-actions-toolbar-horizontal-margin: 8px;
--tree-actions-toolbar-vertical-margin: 8px;
--tree-actions-toolbar-padding-size: 4px;
--tree-actions-toolbar-collapsed-width: 40px;
--tree-actions-toolbar-expand-button-size: 25px;
}
/* Toolbar container (collapsed state) */
#left-pane .tree-actions {
max-width: var(--tree-actions-toolbar-collapsed-width);
right: var(--tree-actions-toolbar-horizontal-margin);
bottom: var(--tree-actions-toolbar-vertical-margin);
overflow: hidden;
border: 1px solid transparent;
padding: var(--tree-actions-toolbar-padding-size);
padding-right: var(--tree-actions-toolbar-collapsed-width);
background: transparent;
transition: max-width 300ms ease-out;
}
/* Toolbar container (expanded state) */
#left-pane .tree-actions:hover {
max-width: 200px;
border-color: var(--dropdown-border-color);
background: var(--menu-background-color);
box-shadow: 0 5px 10px rgba(0, 0, 0, var(--dropdown-shadow-opacity))
}
/* Toolbar button (toolbar collapsed)*/
#left-pane .tree-actions button {
border: unset;
color: var(--menu-item-icon-color);
opacity: 0;
}
/* Toolbar button on hover */
#left-pane .tree-actions button:hover {
background: var(--hover-item-background-color);
}
/* Toolbar button (toolbar expanded) */
#left-pane .tree-actions:hover button {
opacity: 1;
transition: opacity 200ms ease-in;
}
/* The floating expand button (toolbar collapsed) */
#left-pane .tree-actions::after {
display: flex;
content: "\eab4";
position: absolute;
justify-content: center;
align-items: center;
top: 50%;
right: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2);
width: var(--tree-actions-toolbar-expand-button-size);
height: var(--tree-actions-toolbar-expand-button-size);
border-radius: 50%;
background: var(--left-pane-item-action-button-background);
color: var(--left-pane-item-action-button-color);
font-family: boxicons;
font-size: 18px;
transform: translateY(-50%);
}
/* The floating expand button (toolbar expanded) */
#left-pane .tree-actions:hover::after {
background: transparent;
color: var(--menu-item-icon-color);
opacity: var(--menu-item-disabled-opacity);
}
/*
* Gutter
*/