diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css
index a2603b2..c9b6462 100644
--- a/media_server/static/css/styles.css
+++ b/media_server/static/css/styles.css
@@ -1261,6 +1261,68 @@
gap: 0.75rem;
}
+/* Browser Search */
+.browser-search-wrapper {
+ flex: 1;
+ position: relative;
+ min-width: 0;
+ max-width: 300px;
+}
+
+.browser-search-icon {
+ position: absolute;
+ left: 0.6rem;
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--text-muted);
+ pointer-events: none;
+}
+
+.browser-search-input {
+ width: 100%;
+ padding: 0.4rem 2rem 0.4rem 2rem;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ color: var(--text-primary);
+ font-size: 0.813rem;
+ outline: none;
+ transition: border-color 0.2s;
+}
+
+.browser-search-input:focus {
+ border-color: var(--accent);
+}
+
+.browser-search-input::placeholder {
+ color: var(--text-muted);
+}
+
+.browser-search-clear {
+ position: absolute;
+ right: 0.4rem;
+ top: 50%;
+ transform: translateY(-50%);
+ background: none;
+ border: none;
+ color: var(--text-muted);
+ cursor: pointer;
+ padding: 0.15rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ width: auto;
+ height: auto;
+ transition: color 0.15s;
+}
+
+.browser-search-clear:hover {
+ color: var(--text-primary);
+ background: transparent !important;
+ transform: translateY(-50%) !important;
+}
+
.view-toggle {
display: flex;
background: var(--bg-tertiary);
@@ -1853,6 +1915,10 @@
align-items: stretch;
}
+ .browser-search-wrapper {
+ max-width: none;
+ }
+
.browser-toolbar-right {
justify-content: flex-end;
}
diff --git a/media_server/static/index.html b/media_server/static/index.html
index 2e71a3d..2ba3afa 100644
--- a/media_server/static/index.html
+++ b/media_server/static/index.html
@@ -196,6 +196,13 @@
Play All
+