mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-14 00:16:31 +00:00
George Cushen
f4280ddb1c
BREAKING CHANGE Module paths moved to `github.com/HugoBlox/kit` with new names: - core `blox-tailwind` → `blox` - analytics → `analytics` - netlify → `integrations/netlify` - slides (reveal) → `slides` Update go.mod, module.yaml/params, scripts, tests, and v0.11 migration guide accordingly.
87 lines
1.7 KiB
CSS
87 lines
1.7 KiB
CSS
/* Hugo Blox Search - Custom Pagefind Implementation */
|
|
|
|
/* Animations */
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Search result highlights */
|
|
.search-result mark {
|
|
background-color: rgb(254 240 138);
|
|
color: rgb(17 24 39);
|
|
font-weight: 600;
|
|
padding: 0.05rem 0.2rem;
|
|
border-radius: 0.125rem;
|
|
}
|
|
|
|
.dark .search-result mark {
|
|
background-color: rgb(133 77 14);
|
|
color: rgb(254 240 138);
|
|
}
|
|
|
|
/* Result hover state */
|
|
.search-result:hover mark {
|
|
background-color: rgb(253 224 71);
|
|
}
|
|
|
|
.dark .search-result:hover mark {
|
|
background-color: rgb(161 98 7);
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
.search-modal-enter {
|
|
animation: slide-in-up 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes slide-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(1rem) scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
/* Loading skeleton */
|
|
.search-skeleton {
|
|
background: linear-gradient(90deg, rgb(229 231 235) 25%, rgb(243 244 246) 50%, rgb(229 231 235) 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
.dark .search-skeleton {
|
|
background: linear-gradient(90deg, rgb(55 65 81) 25%, rgb(75 85 99) 50%, rgb(55 65 81) 75%);
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
/* Keyboard navigation highlight - handled by Alpine :class binding */
|
|
/* Smooth transition for selection state */
|
|
.search-result {
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
/* Additional hover effects for keyboard-selected items */
|
|
.search-result:focus-visible {
|
|
outline: 2px solid rgb(59 130 246);
|
|
outline-offset: -2px;
|
|
}
|