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:
@@ -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
|
||||
============================================================================= */
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user