Skip to content

Commit 2b4f9e4

Browse files
shortcutsshortcuts
authored
feat(css): match DocSearch style with site theme #330 
1 parent a16aa04 commit 2b4f9e4

File tree

2 files changed

+107
-8
lines changed

2 files changed

+107
-8
lines changed

Diff for: ‎_layouts/default.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@
77
<meta name="description" content="{{site.description}}">
88
{% feed_meta %}
99
<title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
10-
<link href="/css/normalize.min.css" rel="stylesheet">
11-
<link href="/css/bootstrap.min.css" rel="stylesheet">
12-
<link href="/css/main.css" rel="stylesheet">
13-
<link href="/css/neovim-hi.css" rel="stylesheet">
14-
<link rel="canonical" href="{{ site.url }}{% if page.canonical_url %}{{ page.canonical_url }}{% else %}{{ page.url }}{% endif %}" />
1510

1611
<!-- algolia docsearch https://docsearch.algolia.com/docs/docsearch-v3/ -->
1712
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
1813
<link rel="preconnect" href="https://X185E15FPG-dsn.algolia.net" crossorigin />
1914

15+
<link href="/css/normalize.min.css" rel="stylesheet">
16+
<link href="/css/bootstrap.min.css" rel="stylesheet">
17+
<link href="/css/main.css" rel="stylesheet">
18+
<link href="/css/neovim-hi.css" rel="stylesheet">
19+
<link rel="canonical" href="{{ site.url }}{% if page.canonical_url %}{{ page.canonical_url }}{% else %}{{ page.url }}{% endif %}" />
2020
</head>
2121

2222
<body>

Diff for: ‎css/main.css

+102-3
Original file line numberDiff line numberDiff line change
@@ -565,6 +565,105 @@ iframe.poll {
565565
* DocSearch overrides
566566
*/
567567

568-
.DocSearch mark {
569-
padding: 0;
570-
}
568+
:root {
569+
--docsearch-primary-color: var(--accent-color);
570+
--docsearch-text-color: var(--fg-color);
571+
--docsearch-highlight-color: var(--link-color);
572+
--docsearch-container-background: rgba(231, 238, 232, 0.2);
573+
574+
/* modal */
575+
--docsearch-modal-background: var(--bg-color);
576+
--docsearch-modal-shadow: none;
577+
578+
/* searchbox */
579+
--docsearch-searchbox-background: var(--accent-bg-color);
580+
--docsearch-searchbox-focus-background: var(--accent-bg-color);
581+
582+
/* hit */
583+
--docsearch-hit-color: var(--docsearch-text-color);
584+
--docsearch-hit-active-color: #fff;
585+
--docsearch-hit-background: var(--accent-bg-color);
586+
--docsearch-hit-shadow: none;
587+
588+
/* key */
589+
--docsearch-key-gradient: transparent;
590+
--docsearch-key-shadow: none;
591+
592+
/* footer */
593+
--docsearch-footer-background: var(--bg-color);
594+
--docsearch-footer-shadow: none;
595+
}
596+
597+
@media (prefers-color-scheme: dark) {
598+
:root {
599+
--docsearch-primary-color: var(--accent-color);
600+
--docsearch-text-color: var(--fg-color);
601+
--docsearch-highlight-color: var(--link-color);
602+
--docsearch-container-background: rgba(231, 238, 232, 0.2);
603+
604+
/* modal */
605+
--docsearch-modal-background: var(--bg-color);
606+
--docsearch-modal-shadow: none;
607+
608+
/* searchbox */
609+
--docsearch-searchbox-background: var(--accent-bg-color);
610+
--docsearch-searchbox-focus-background: var(--accent-bg-color);
611+
612+
/* hit */
613+
--docsearch-hit-color: var(--docsearch-text-color);
614+
--docsearch-hit-active-color: #fff;
615+
--docsearch-hit-background: var(--accent-bg-color);
616+
--docsearch-hit-shadow: none;
617+
618+
/* key */
619+
--docsearch-key-gradient: transparent;
620+
--docsearch-key-shadow: none;
621+
622+
/* footer */
623+
--docsearch-footer-background: var(--bg-color);
624+
--docsearch-footer-shadow: none;
625+
}
626+
}
627+
628+
.DocSearch mark {
629+
padding: 0;
630+
}
631+
632+
.DocSearch footer {
633+
border-top: 1px solid var(--link-color)
634+
}
635+
636+
.DocSearch-Button-Key {
637+
top: 0;
638+
padding: 0;
639+
margin-right: 0;
640+
width: auto;
641+
}
642+
643+
.DocSearch-Button-Keys {
644+
border-radius: 4px;
645+
padding: 0 6px;
646+
min-width: auto;
647+
border: 1px solid var(--hi-b-black);
648+
}
649+
650+
.DocSearch-Button {
651+
border: 1px solid var(--docsearch-primary-color)
652+
}
653+
654+
@media (prefers-color-scheme: dark) {
655+
.DocSearch footer {
656+
border-top: 1px solid var(--link-color)
657+
}
658+
659+
.DocSearch-Button-Keys {
660+
border-radius: 4px;
661+
padding: 0 6px;
662+
min-width: auto;
663+
border: 1px solid var(--hi-b-black);
664+
}
665+
666+
.DocSearch-Button {
667+
border: 1px solid var(--docsearch-primary-color)
668+
}
669+
}

0 commit comments

Comments
 (0)