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

Merge pull request #760 from TriliumNext/style/next/restyle-tree-actions

Browse Source 
Style Next: Restyle the tree action buttons
This commit is contained in:
Elian Doran 2024-12-12 08:43:42 +02:00 committed by GitHub
commit 62e797a3aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 83 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/public/stylesheets/theme-next.css
View File

@ -48,6 +48,12 @@
--launcher-pane-button-margin: 6px;
--launcher-pane-button-gap: 3px;
--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;
--tab-bar-height: 50px;
--tab-height: 36px;
--tab-first-item-horiz-offset: 1px;

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

@ -345,23 +345,8 @@ div.quick-search .search-button.show {
/* Tree */
#left-pane .tree-actions {
right: 3px;
bottom: 6px;
transform: translateY(200%) !important;
transition: transform 250ms ease-in-out;
}
#left-pane:hover .tree-actions {
transform: translateY(0) !important;
}
button.tree-floating-button {
font-size: 18px !important;
}
#left-pane div.tree {
padding: 3px 6px;
padding: 3px 6px 40px 6px;
animation: fade-in 200ms ease-in;
}
@ -481,6 +466,82 @@ button.tree-floating-button {
--menu-item-icon-vert-offset: 1.5px;
}
/* Tree actions toolbar */
/* 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 400ms ease-out,
background-color 400ms ease-out,
border-color 400ms 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);
backdrop-filter: blur(10px) saturate(6);
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;
transition: opacity 200ms ease-out;
}
/* 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 250ms 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);
box-shadow: 2px 2px 6px var(--left-pane-background-color);
border-radius: 50%;
background: var(--left-pane-item-action-button-background);
backdrop-filter: blur(10px);
color: var(--left-pane-item-action-button-color);
font-family: boxicons;
font-size: 18px;
line-height: 1;
transform: translateY(-50%);
transition: color 200ms ease-in;
}
/* 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);
transition: color 200ms ease-out;
}
/*
* Gutter
*/