From baf15103cf7d4fa284e865315d6d78e87be8cbdd Mon Sep 17 00:00:00 2001
From: Chris van der Loo <chris.vanderloo@icloud.com>
Date: Sun, 6 Sep 2026 08:06:12 -0400
Subject: [PATCH] style(web): migrate explorer toolbar and native menus to
 Tailwind

---
 packages/web/src/styles/toolbar.css | 205 ----------------------------
 1 file changed, 205 deletions(-)
 delete mode 100644 packages/web/src/styles/toolbar.css

diff --git a/packages/web/src/styles/toolbar.css b/packages/web/src/styles/toolbar.css
deleted file mode 100644
index 610863b..0000000
--- a/packages/web/src/styles/toolbar.css
+++ /dev/null
@@ -1,205 +0,0 @@
-.file-toolbar {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.file-search {
-  flex: 1;
-  min-width: 0;
-}
-.file-search > label,
-.toolbar-group > span {
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 500;
-  color: #44403c;
-}
-.file-search > label {
-  display: none;
-}
-.search-control {
-  position: relative;
-  margin-top: 4px;
-  border-radius: 6px;
-  box-shadow: 0 1px 2px #0001;
-}
-.search-control input {
-  padding-right: 72px;
-}
-.search-control button {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  padding: 0 24px;
-  box-shadow: 0 4px 6px #0002;
-}
-.search-control .icon {
-  width: 16px;
-}
-.toolbar-controls {
-  display: flex;
-  justify-content: flex-end;
-  gap: 32px;
-  margin-top: 16px;
-}
-.toolbar-group {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 2px;
-}
-.file-menu {
-  position: relative;
-}
-.file-menu summary {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  cursor: pointer;
-  list-style: none;
-  padding: 6px 12px;
-  height: 40px;
-  background: var(--control);
-  border: 1px solid #d6d3d1;
-  color: #44403c;
-  border-radius: 4px;
-  box-shadow: 0 1px 2px #0001;
-}
-.file-menu summary::-webkit-details-marker {
-  display: none;
-}
-.sorting-menu {
-  width: 192px;
-}
-.menu-options {
-  position: absolute;
-  z-index: 5;
-  right: 0;
-  top: calc(100% + 4px);
-  display: flex;
-  flex-direction: column;
-  min-width: 192px;
-  padding: 4px 0;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  background: var(--panel);
-  box-shadow: 0 4px 6px #0003;
-  font:
-    400 14px/20px ui-sans-serif,
-    system-ui,
-    sans-serif;
-  color: var(--ink);
-}
-.menu-options button,
-.menu-options label {
-  padding: 8px 16px;
-  width: 100%;
-  text-align: left;
-  border-radius: 0;
-}
-.menu-options button:hover,
-.menu-options label:hover {
-  background: var(--subtle);
-}
-.menu-options [aria-pressed="true"] {
-  color: var(--accent);
-}
-.menu-options hr {
-  width: 100%;
-  margin: 4px 0;
-  border: 0;
-  border-top: 1px solid var(--line);
-}
-.view-controls {
-  display: inline-flex;
-  overflow: hidden;
-  border-radius: 4px;
-  box-shadow: 0 1px 2px #0001;
-}
-.view-controls button {
-  padding: 8px 16px;
-  border-radius: 0;
-  background: #f5f5f5;
-  color: #262626;
-}
-.view-controls button:hover {
-  background: #e5e5e5;
-}
-.view-controls [aria-pressed="true"] {
-  background: #d4d4d4;
-}
-.upload-button {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  cursor: pointer;
-}
-.upload-button:focus-within {
-  outline: 2px solid #2563eb;
-  outline-offset: 2px;
-}
-.upload-button input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  cursor: pointer;
-  width: 100%;
-}
-@media (min-width: 768px) {
-  .file-toolbar {
-    flex-direction: row;
-    gap: 32px;
-  }
-  .file-search > label {
-    display: block;
-  }
-  .toolbar-controls {
-    margin-top: 0;
-  }
-}
-@media (min-width: 1024px) {
-  .file-toolbar {
-    gap: 96px;
-  }
-}
-@media (min-width: 1536px) {
-  .file-toolbar {
-    gap: 192px;
-  }
-}
-@media (max-width: 639px) {
-  .toolbar-controls {
-    gap: 16px;
-  }
-  .sorting-menu {
-    width: 144px;
-  }
-  .toolbar-group > span {
-    font-size: 12px;
-  }
-  .view-controls button {
-    padding: 8px 12px;
-  }
-}
-@media (prefers-color-scheme: dark) {
-  .file-search > label,
-  .toolbar-group > span {
-    color: #a8a29e;
-  }
-  .file-menu summary {
-    color: #fafafa;
-    border-color: #404040;
-  }
-  .view-controls button {
-    background: #262626;
-    color: #e5e5e5;
-  }
-  .view-controls button:hover {
-    background: #404040;
-  }
-  .view-controls [aria-pressed="true"] {
-    background: #525252;
-  }
-}
-- 
2.51.2