156 lines
4.8 KiB
CSS
156 lines
4.8 KiB
CSS
/*
|
|
================================================================================
|
|
DocSearch Component Styling (Themed Version)
|
|
- This version uses the CSS variables defined in :root and .dark
|
|
to automatically adapt to your site's light and dark themes.
|
|
================================================================================
|
|
*/
|
|
.docsearch {
|
|
/* Map theme variables to DocSearch's internal variables */
|
|
--docsearch-primary-color: hsl(var(--primary));
|
|
--docsearch-text-color: hsl(var(--foreground));
|
|
--docsearch-container-background: hsla(var(--background) / 0.8); /* Use theme background with transparency */
|
|
--docsearch-modal-background: hsl(var(--card)); /* Modals should use card color */
|
|
--docsearch-modal-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--docsearch-searchbox-background: hsl(var(--secondary));
|
|
--docsearch-searchbox-focus-background: hsl(var(--secondary));
|
|
--docsearch-hit-color: hsl(var(--foreground));
|
|
--docsearch-hit-background: hsl(var(--card));
|
|
--docsearch-hit-shadow: none;
|
|
--docsearch-hit-active-color: hsl(var(--primary-foreground));
|
|
--docsearch-selected-background: hsl(var(--secondary)); /* Use secondary for selection */
|
|
--docsearch-footer-background: hsl(var(--card));
|
|
--docsearch-footer-shadow: inset 0 1px 0 0 hsl(var(--border));
|
|
--docsearch-key-gradient: transparent;
|
|
--docsearch-key-shadow: none;
|
|
--docsearch-muted-color: hsl(var(--muted-foreground)); /* Use muted for less important text */
|
|
}
|
|
|
|
/*
|
|
* =====================================
|
|
* 1. Initial Search Button Styling
|
|
* =====================================
|
|
*/
|
|
.docsearch .DocSearch-Button {
|
|
background-color: hsl(var(--secondary)); /* Use secondary for the button background */
|
|
border: 1px solid hsl(var(--border)); /* Use the standard border color */
|
|
border-radius: 9999px; /* Pill shape */
|
|
width: 160px; /* Lebar default untuk desktop */
|
|
height: 40px;
|
|
color: hsl(var(--muted-foreground)); /* Use muted text color for the placeholder */
|
|
transition: width 0.3s ease; /* Transisi untuk perubahan lebar */
|
|
}
|
|
|
|
.docsearch .DocSearch-Button:hover {
|
|
border-color: var(--docsearch-primary-color);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Magnifying glass icon */
|
|
.docsearch .DocSearch-Search-Icon {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* The 'Search' placeholder text */
|
|
.docsearch .DocSearch-Button-Placeholder {
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Styling for the '⌘K' keys */
|
|
.docsearch .DocSearch-Button-Key {
|
|
background: hsl(var(--primary)); /* Use primary color for the key background */
|
|
border-radius: 6px;
|
|
color: hsl(var(--primary-foreground)); /* Use primary-foreground for the key text */
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
height: 24px;
|
|
padding: 0 6px;
|
|
border: none;
|
|
box-shadow: none;
|
|
top: 0;
|
|
}
|
|
|
|
|
|
/*
|
|
* =====================================
|
|
* 2. Modal and Results Styling
|
|
* =====================================
|
|
*/
|
|
|
|
/* Main modal window */
|
|
.docsearch .DocSearch-Modal {
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.docsearch .DocSearch-Container {
|
|
box-shadow: var(--docsearch-modal-shadow);
|
|
}
|
|
|
|
/* Search input form */
|
|
.docsearch .DocSearch-Form {
|
|
border: 1px solid hsl(var(--border));
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* The 'Return' and 'Esc' hints */
|
|
.docsearch .DocSearch-Reset-Icon,
|
|
.docsearch .DocSearch-Cancel {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Style for each search result item */
|
|
.docsearch .DocSearch-Hit a {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Selected search result */
|
|
.docsearch .DocSearch-Hit[aria-selected="true"] a {
|
|
background: var(--docsearch-selected-background); /* Highlight color for selected item */
|
|
}
|
|
|
|
/* Hide category headers if not needed */
|
|
.docsearch .DocSearch-Hit-source {
|
|
display: none;
|
|
}
|
|
|
|
/* Icon next to each result title */
|
|
.docsearch .DocSearch-Hit-icon {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Footer instructions ('to navigate', 'to select', etc.) */
|
|
.docsearch .DocSearch-Footer {
|
|
border-top: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.docsearch .DocSearch-Footer--commands kbd {
|
|
background: hsl(var(--muted)); /* Use muted for the background of keyboard hints */
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 4px;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/*
|
|
* =====================================
|
|
* 3. Responsive Styling (Mobile)
|
|
* =====================================
|
|
*/
|
|
@media (max-width: 768px) {
|
|
/* Aturan ini akan aktif pada layar 768px ke bawah */
|
|
|
|
.docsearch .DocSearch-Button {
|
|
width: 40px; /* Mengubah lebar tombol menjadi seukuran ikon */
|
|
height: 40px; /* Memastikan tinggi tetap sama */
|
|
padding: 0; /* Menghapus padding agar ikon bisa di tengah */
|
|
justify-content: center; /* Memusatkan ikon di dalam tombol */
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
/* Menyembunyikan teks "Search..." dan shortcut keyboard */
|
|
.docsearch .DocSearch-Button-Placeholder,
|
|
.docsearch .DocSearch-Button-Key {
|
|
display: none;
|
|
}
|
|
} |