search/app/assets/css/main.css

77 lines
2.0 KiB
CSS
Executable File

@import "tailwindcss" theme(static);
@import "@nuxt/ui";
@theme static {
--font-sans: 'Public Sans', sans-serif;
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
/* Search match highlighting --------------------------------------------- */
/* Meilisearch returns matches wrapped in <em>. We strip italics and add a
yellow background so they really pop in both list and detail. */
.search-highlight em,
.search-highlight em * {
font-style: normal;
background-color: #fde68a;
color: #78350f;
padding: 0 2px;
border-radius: 2px;
font-weight: 600;
box-shadow: 0 0 0 1px #f59e0b inset;
}
.dark .search-highlight em,
.dark .search-highlight em * {
background-color: #78350f;
color: #fde68a;
box-shadow: 0 0 0 1px #f59e0b inset;
}
/* Client-side highlights inside the detail body. */
mark.search-match {
background-color: #fde68a;
color: #78350f;
padding: 0 2px;
border-radius: 2px;
font-weight: 600;
box-shadow: 0 0 0 1px #f59e0b inset;
}
.dark mark.search-match {
background-color: #78350f;
color: #fde68a;
box-shadow: 0 0 0 1px #f59e0b inset;
}
/* The currently-focused match (the one the user navigated to). */
mark.search-match.is-current {
background-color: #f97316;
color: #ffffff;
box-shadow: 0 0 0 2px #c2410c inset;
animation: search-match-pulse 0.9s ease-out 1;
}
.dark mark.search-match.is-current {
background-color: #ea580c;
color: #fff7ed;
box-shadow: 0 0 0 2px #fdba74 inset;
}
@keyframes search-match-pulse {
0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.75), 0 0 0 2px #c2410c inset; }
70% { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0), 0 0 0 2px #c2410c inset; }
100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0), 0 0 0 2px #c2410c inset; }
}