CSS for filebrowser toolbar

jupyter · Dec 4, 2023 · b7f24c6 · b7f24c6
1 parent d5e77e7
commit b7f24c6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/tree-extension/src/fileactions.tsx b/packages/tree-extension/src/fileactions.tsx
@@ -53,6 +53,7 @@ export class FilesActionButtons {
         />
       );
       widget.id = `fileAction-${action}`;
+      widget.addClass('jp-ToolbarButton');
       widget.addClass('jp-FileAction');
       this._widgets.set(action, widget);
     });

diff --git a/packages/tree-extension/style/base.css b/packages/tree-extension/style/base.css
@@ -12,10 +12,24 @@
   padding: 0px;
 }
 
-.jp-FileBrowser-toolbar button.jp-ToolbarButtonComponent {
+.jp-FileBrowser-toolbar > .jp-Toolbar-item.jp-ToolbarButton:hover,
+.jp-FileBrowser-toolbar > .jp-Toolbar-item.jp-CommandToolbarButton:hover,
+.jp-FileBrowser-toolbar > .jp-Toolbar-item.jp-DropdownMenu:hover {
+  background: var(--neutral-fill-stealth-hover);
+}
+
+.jp-FileBrowser-toolbar .lm-MenuBar-item {
+  height: var(--jp-private-toolbar-height);
+}
+
+.jp-FileBrowser-toolbar .jp-ToolbarButtonComponent {
   height: var(--jp-flat-button-height);
 }
 
+.jp-FileBrowser-toolbar jp-button.jp-ToolbarButtonComponent:hover {
+  background: inherit;
+}
+
 .jp-FileBrowser-filterBox {
   padding: 0;
   flex: 0 0 auto;
@@ -35,10 +49,7 @@
   display: none;
 }
 
-.jp-FileBrowser-toolbar
-  .jp-FileAction:has(
-    > .jp-ToolbarButtonComponent[data-command='filebrowser:delete']
-  ) {
+.jp-FileBrowser-toolbar > #fileAction-delete {
   background-color: var(--jp-error-color1);
 }