diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index aa671d131a..b7a08b4c97 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -801,7 +801,8 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i opacity: 0.5; } -#left-pane .tree-item-button { +#left-pane .tree-item-button, +#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon { margin-inline-end: 6px; border: unset; border-radius: 50%; @@ -812,7 +813,8 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i box-shadow 200ms ease-out; } -#left-pane .tree-item-button:hover { +#left-pane .tree-item-button:hover, +#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon:hover { background: var(--left-pane-item-action-button-hover-background); box-shadow: var(--left-pane-item-action-button-hover-shadow); transition: @@ -820,10 +822,47 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i box-shadow 100ms ease-in; } -#left-pane span.fancytree-node.fancytree-active .tree-item-button:hover { +#left-pane span.fancytree-node.fancytree-active .tree-item-button:hover, +#left-pane span.fancytree-node.fancytree-active.fancy-tree-selected .fancytree-custom-icon:hover { box-shadow: var(--left-pane-item-selected-action-button-hover-shadow); } +/* Selected item bulk action button */ + +@keyframes bulk-action-button-blink { + from { + opacity: 1; + } + to { + opacity: .3; + } +} + +#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon { + display: flex; + justify-content: center; + align-items: center; + width: 1em; + height: 1em; + margin: 0; + +} + +#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon::before { + border: 0; + font-size: .65em; +} + +#left-pane span.fancytree-node.fancytree-selected:hover .fancytree-custom-icon:not(:hover)::before { + animation: bulk-action-button-blink 500ms linear infinite alternate; +} + +#left-pane span.fancytree-node.fancytree-selected.protected .fancytree-custom-icon::after { + /* Protected note indicator */ + display: none; +} + + #context-menu-container { /* The context menu of the tree */ --menu-item-icon-vert-offset: -1px; diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css index a4869d674e..cb354d30df 100644 --- a/apps/client/src/stylesheets/tree.css +++ b/apps/client/src/stylesheets/tree.css @@ -202,8 +202,8 @@ span.fancytree-node.fancytree-selected { span.fancytree-selected .fancytree-custom-icon::before { font-family: "boxicons"; - content: "\eb43"; - border: 1px solid var(--main-border-color); + content: "\ef05"; + border: 1px solid var(--main-text-color); border-radius: 3px; }