136 lines
2.6 KiB
CSS
136 lines
2.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Enhanced search responsiveness styles */
|
|
.search-input-responsive {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.search-input-responsive:focus-within {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
/* Mobile-friendly search results */
|
|
@media (max-width: 768px) {
|
|
.search-results-grid {
|
|
gap: 1rem !important;
|
|
}
|
|
|
|
.search-card {
|
|
padding: 0.75rem !important;
|
|
}
|
|
|
|
.search-chip {
|
|
font-size: 0.7rem !important;
|
|
height: 18px !important;
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
|
|
/* Prevent text overflow in search components */
|
|
.search-result-card {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.search-result-card .MuiCardContent-root {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Ensure proper flex behavior for narrow windows */
|
|
@media (max-width: 1024px) {
|
|
/* Prevent horizontal overflow in search results */
|
|
.search-result-card {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Ensure chips wrap properly */
|
|
.MuiChip-root {
|
|
flex-shrink: 0;
|
|
margin: 2px;
|
|
}
|
|
|
|
/* Prevent button groups from overflowing */
|
|
.MuiToggleButtonGroup-root {
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Ensure search stats wrap on narrow screens */
|
|
.search-stats-container {
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
/* Extra small screens */
|
|
@media (max-width: 480px) {
|
|
/* Stack search mode buttons vertically */
|
|
.MuiToggleButtonGroup-root {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.MuiToggleButtonGroup-root .MuiToggleButton-root {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Reduce chip sizes further */
|
|
.search-chip {
|
|
font-size: 0.65rem !important;
|
|
height: 16px !important;
|
|
padding: 0 6px !important;
|
|
}
|
|
|
|
/* Stack action buttons vertically in cards */
|
|
.search-card-actions {
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
/* Touch-friendly interactive elements */
|
|
@media (pointer: coarse) {
|
|
.search-suggestion-chip {
|
|
min-height: 32px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.search-filter-button {
|
|
min-height: 40px;
|
|
min-width: 40px;
|
|
}
|
|
}
|
|
|
|
/* Smooth animations for search loading states */
|
|
.search-loading-fade {
|
|
opacity: 0;
|
|
animation: searchFadeIn 0.3s ease-in-out forwards;
|
|
}
|
|
|
|
@keyframes searchFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Enhanced hover states for better UX */
|
|
.search-result-card {
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.search-result-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Improved focus states for accessibility */
|
|
.search-focusable:focus-visible {
|
|
outline: 2px solid #6366f1;
|
|
outline-offset: 2px;
|
|
} |