Skip to content

Commit 4d25bc4

Browse files
thecrypticacethecrypticace
authored
Fix dark mode docsearch styles (#2072)
1 parent 2bd250f commit 4d25bc4

File tree

1 file changed

+46
-38
lines changed

1 file changed

+46
-38
lines changed

‎src/app/search.css

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -134,20 +134,22 @@
134134
@apply ml-12;
135135
}
136136

137-
.DocSearch-Hit--Result.DocSearch-Hit--Child::before {
138-
content: "";
139-
position: absolute;
140-
top: -0.25rem;
141-
bottom: -0.25rem;
142-
left: -1rem;
143-
width: 1px;
144-
background: var(--color-gray-200);
137+
.DocSearch-Hit--Result.DocSearch-Hit--Child {
138+
&::before {
139+
content: "";
140+
position: absolute;
141+
top: -0.25rem;
142+
bottom: -0.25rem;
143+
left: -1rem;
144+
width: 1px;
145+
background: var(--color-gray-200);
146+
}
145147

146-
.dark & {
148+
.dark &::before {
147149
background: color-mix(in oklab, var(--color-gray-200) 20%, transparent);
148150
}
149151
@media (prefers-color-scheme: dark) {
150-
.system & {
152+
.system &::before {
151153
background: color-mix(in oklab, var(--color-gray-200) 20%, transparent);
152154
}
153155
}
@@ -672,17 +674,19 @@
672674
}
673675
}
674676

675-
.DocSearch-Hit-action [title="Remove this search from favorites"]::before {
676-
pointer-events: none;
677-
position: absolute;
678-
inset: calc(var(--spacing) * 0);
679-
background-color: var(--color-sky-50);
680-
content: "";
681-
.dark & {
677+
.DocSearch-Hit-action [title="Remove this search from favorites"] {
678+
&::before {
679+
pointer-events: none;
680+
position: absolute;
681+
inset: calc(var(--spacing) * 0);
682+
background-color: var(--color-sky-50);
683+
content: "";
684+
}
685+
.dark &::before {
682686
background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
683687
}
684688
@media (prefers-color-scheme: dark) {
685-
.system & {
689+
.system &::before {
686690
background-color: color-mix(in oklab, var(--color-gray-700) 30%, transparent);
687691
}
688692
}
@@ -692,45 +696,49 @@
692696
@apply bg-sky-100 dark:bg-gray-700/40;
693697
}
694698

695-
.DocSearch-Hit-action [title="Remove this search from favorites"]::after {
696-
content: "";
697-
position: absolute;
698-
pointer-events: none;
699-
width: calc(4.5rem + 1px);
700-
height: 1.5rem;
701-
margin-left: calc(-3rem - 1px);
702-
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
703-
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
704-
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
705-
background-repeat: no-repeat, repeat-y, no-repeat;
706-
background-position: left, center, right;
699+
.DocSearch-Hit-action [title="Remove this search from favorites"] {
700+
&::after {
701+
content: "";
702+
position: absolute;
703+
pointer-events: none;
704+
width: calc(4.5rem + 1px);
705+
height: 1.5rem;
706+
margin-left: calc(-3rem - 1px);
707+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
708+
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
709+
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
710+
background-repeat: no-repeat, repeat-y, no-repeat;
711+
background-position: left, center, right;
712+
}
707713

708-
.dark & {
714+
.dark &::after {
709715
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
710716
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' opacity='0.05' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
711717
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
712718
}
713719
@media (prefers-color-scheme: dark) {
714-
.system & {
720+
.system &::after {
715721
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
716722
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' opacity='0.05' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
717723
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
718724
}
719725
}
720726
}
721727

722-
.DocSearch-Hit-action [title="Remove this search from favorites"]:hover::after {
723-
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
724-
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
725-
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
728+
.DocSearch-Hit-action [title="Remove this search from favorites"]:hover {
729+
&::after {
730+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
731+
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
732+
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
733+
}
726734

727-
.dark & {
735+
.dark &::after {
728736
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
729737
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' opacity='0.05' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
730738
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
731739
}
732740
@media (prefers-color-scheme: dark) {
733-
.system & {
741+
.system &::after {
734742
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 2 5h5l-4 4 2 5-5-3-5 3 2-5-4-4h5l2-5Z' fill='%230EA5E9' stroke='%230EA5E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
735743
url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23e2e8f0' opacity='0.05' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E"),
736744
url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 7 7 17M7 7l10 10' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

0 commit comments

Comments
 (0)