mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
160 lines
3.6 KiB
SCSS
160 lines
3.6 KiB
SCSS
@use "@docsearch/css/dist/style.css";
|
|
|
|
:root {
|
|
--docsearch-primary-color: var(--tblr-primary);
|
|
--docsearch-searchbox-background: var(--tblr-bg-surface-secondary);
|
|
--docsearch-searchbox-focus-background: var(--tblr-bg-surface-secondary);
|
|
--docsearch-text-color: var(--tblr-body-text);
|
|
--docsearch-key-shadow: none;
|
|
--docsearch-key-gradient: var(--tblr-bg-surface-secondary);
|
|
--docsearch-searchbox-shadow: 0 0 0 1px var(--tblr-border-color);
|
|
--docsearch-searchbox-focus-background: var(--tblr-bg-surface-tertiary);
|
|
}
|
|
|
|
.col-docs {
|
|
width: 15rem;
|
|
}
|
|
|
|
.bg-docs-gradient {
|
|
@media (min-width: 992px) {
|
|
background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--tblr-primary) 4%, transparent), transparent 80%) no-repeat 0 0 / 800px 800px !important;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Button {
|
|
width: 100%;
|
|
box-shadow: 0 0 0 1px var(--tblr-border-color);
|
|
font-weight: var(--tblr-font-weight-normal);
|
|
transition: all 0.2s ease-in-out;
|
|
border-radius: var(--tblr-border-radius);
|
|
}
|
|
|
|
.DocSearch-Button-Placeholder {
|
|
font-size: var(--tblr-font-size);
|
|
}
|
|
|
|
.DocSearch-SearchBar {
|
|
display: flex;
|
|
padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
|
|
background-color: var(--tblr-bg-surface) !important;
|
|
}
|
|
|
|
.DocSearch-Search-Icon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
.DocSearch-Hit-source {
|
|
background: none !important;
|
|
}
|
|
|
|
.DocSearch-Dropdown {
|
|
background-color: var(--tblr-bg-surface) !important;
|
|
}
|
|
|
|
.DocSearch-Hit a {
|
|
background-color: var(--tblr-bg-surface-secondary) !important;
|
|
border: 1px solid var(--tblr-border-color) !important;
|
|
color: var(--tblr-body-color) !important;
|
|
box-shadow: none !important;
|
|
|
|
&:hover {
|
|
background-color: var(--tblr-bg-surface-tertiary) !important;
|
|
border-color: var(--tblr-border-color-active) !important;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Hit-Container {
|
|
color: var(--tblr-body-color) !important;
|
|
}
|
|
|
|
.DocSearch-Hit-title {
|
|
color: var(--tblr-body-color) !important;
|
|
}
|
|
|
|
.DocSearch-Hit-path {
|
|
color: var(--tblr-muted) !important;
|
|
}
|
|
|
|
.DocSearch-Hit[aria-selected="true"] a {
|
|
background-color: var(--tblr-primary) !important;
|
|
border-color: var(--tblr-primary) !important;
|
|
color: var(--tblr-primary-fg) !important;
|
|
}
|
|
|
|
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Container,
|
|
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-title,
|
|
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-path {
|
|
color: var(--tblr-primary-fg) !important;
|
|
}
|
|
|
|
.DocSearch-Modal {
|
|
background-color: var(--tblr-bg-surface) !important;
|
|
box-shadow: var(--tblr-shadow-dropdown) !important;
|
|
}
|
|
|
|
.DocSearch-Form {
|
|
background-color: var(--tblr-bg-surface-secondary) !important;
|
|
border: 1px solid var(--tblr-border-color) !important;
|
|
}
|
|
|
|
.DocSearch-Input {
|
|
color: var(--tblr-body-color) !important;
|
|
|
|
&::placeholder {
|
|
color: var(--tblr-muted) !important;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Footer {
|
|
background-color: var(--tblr-bg-surface) !important;
|
|
border-top: 1px solid var(--tblr-border-color) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.DocSearch-Button-Keys {
|
|
min-width: 0;
|
|
gap: .25rem;
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
.DocSearch-Button-Key {
|
|
top: 0;
|
|
box-shadow: none;
|
|
background: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: auto;
|
|
font-size: var(--tblr-font-size);
|
|
}
|
|
|
|
.DocSearch-Container {
|
|
z-index: 10000;
|
|
}
|
|
|
|
.no-transition {
|
|
* {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
.example>.modal,
|
|
.example>.offcanvas {
|
|
display: block !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
.example>.offcanvas-backdrop {
|
|
position: absolute !important;
|
|
}
|
|
|
|
.shiki {
|
|
background: var(--tblr-gray-900) !important;
|
|
color: var(--tblr-gray-300) !important;
|
|
}
|
|
|
|
code {
|
|
::selection {
|
|
background: var(--tblr-primary);
|
|
}
|
|
} |