feat: redesign CMD+K button as macOS Spotlight-style search bar

Replace simple search button with search bar design in action bar:
- Semi-transparent styling integrated with dark action bar
- Keyboard shortcut indicators (⌘ K) shown as individual kbd elements
- Search icon and "Search" text for better discoverability
- Responsive: kbd keys hidden on mobile (<900px)
- Remove unused cmd-k-button.html partial template

Update test to verify new search bar structure (styling, kbd elements, icon).
This commit is contained in:
juanatsap
2025-12-04 12:59:16 +00:00
parent b5a50ca3ef
commit 404748afb5
6 changed files with 163 additions and 81 deletions
+66
View File
@@ -176,6 +176,72 @@
The 900px media query there uses clamp() for smooth scaling of all buttons and icons */
/* =============================================================================
CMD+K SEARCH BAR BUTTON (Integrated in Action Bar)
============================================================================= */
/* Search bar button - styled to look like a search input within the dark action bar */
.search-bar-btn {
display: flex !important;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.6rem !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 6px !important;
min-width: 140px;
transition: all 0.2s ease;
}
.search-bar-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
.search-bar-icon {
color: rgba(255, 255, 255, 0.6);
flex-shrink: 0;
}
.search-bar-text {
color: rgba(255, 255, 255, 0.6);
font-size: 0.8rem;
flex-grow: 1;
text-align: left;
}
.search-bar-keys {
display: flex;
align-items: center;
gap: 0.2rem;
flex-shrink: 0;
}
.search-bar-keys kbd {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
font-size: 0.65rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 3px;
padding: 0.1rem 0.3rem;
min-width: 1.2rem;
text-align: center;
}
/* Hide kbd keys on smaller screens to save space */
@media (max-width: 900px) {
.search-bar-keys {
display: none;
}
.search-bar-btn {
min-width: auto;
}
}
/* =============================================================================
NINJA-KEYS COMMAND BAR STYLING
============================================================================= */
+1 -1
View File
File diff suppressed because one or more lines are too long