Skip to content

Commit 0e076ca

Browse files
josevalimzachdanielThaddeusJiangarathunku
authored
Search previews (#1884)
Co-authored-by: Zach Daniel <zach@zachdaniel.dev> Co-authored-by: TJ <thaddeusjiang@gmail.com> Co-authored-by: arathunku <m@forys.de>
1 parent e7ba368 commit 0e076ca

38 files changed

+815
-448
lines changed

‎assets/css/_html.css

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
@import "print-cheatsheet.css";
3838
@import "makeup.css";
3939
@import "tabset.css";
40+
@import "preview.css";
4041

4142
body:not(.dark) .content-inner img[src*="#gh-dark-mode-only"],
4243
body.dark .content-inner img[src*="#gh-light-mode-only"] {

‎assets/css/autocomplete.css

+122-14
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
height: 0;
1111
border-left: 12px solid transparent;
1212
border-right: 12px solid transparent;
13-
border-bottom: 12px solid var(--autocompleBackground);
13+
border-bottom: 12px solid var(--autocompleteBackground);
1414
position: absolute;
1515
top: 8px;
1616
left: 26px;
@@ -19,6 +19,58 @@
1919
background-color: transparent;
2020
}
2121

22+
.autocomplete-preview {
23+
width: 100%;
24+
margin: 0;
25+
height: 100%;
26+
line-height: 20px;
27+
background-color: var(--background);
28+
font-family: var(--sansFontFamily);
29+
border: 4px solid var(--autocompleteBorder);
30+
padding: 12px 16px;
31+
}
32+
33+
.autocomplete-preview div, .autocomplete-preview span {
34+
display: none;
35+
}
36+
37+
.autocomplete-preview.loading div {
38+
float: left;
39+
display: block;
40+
border: 5px solid var(--autocompleteBorder);
41+
border-radius: 50%;
42+
border-top: 5px solid var(--textDetailAccent);
43+
width: 20px;
44+
height: 20px;
45+
animation: spinner 4s linear infinite;
46+
}
47+
48+
.autocomplete-preview.loading span {
49+
color: var(--autocompleteResults);
50+
display: inline;
51+
margin-left: 6px;
52+
}
53+
54+
.autocomplete-preview.loading span:after {
55+
color: var(--autocompleteResults);
56+
content: "Loading";
57+
}
58+
59+
@keyframes spinner {
60+
0% { transform: rotate(0deg); }
61+
100% { transform: rotate(360deg); }
62+
}
63+
64+
.autocomplete-preview.loading iframe {
65+
height: 0;
66+
}
67+
68+
.autocomplete-preview iframe {
69+
width: 100%;
70+
height: 100%;
71+
border: 0;
72+
}
73+
2274
.autocomplete-results {
2375
list-style: none;
2476
margin: 0;
@@ -40,43 +92,97 @@
4092
display: block;
4193
}
4294

43-
.autocomplete-suggestions {
44-
background-color: var(--autocompleBackground);
45-
border-radius: 8px;
95+
.autocomplete-container {
4696
position: absolute;
4797
top: 15px;
4898
width: 100%;
4999
z-index: 200;
100+
}
101+
102+
.autocomplete-suggestions {
103+
background-color: var(--autocompleteBackground);
104+
border-radius: 8px;
50105
box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
51106
overflow-y: auto;
52107
max-height: 450px;
53108
white-space: normal;
54109
overflow-x: hidden;
55110
}
56111

112+
.autocomplete-suggestions.previewing:has(.selected) {
113+
max-height: 900px;
114+
}
115+
116+
.autocomplete-suggestions.previewing:has(.selected) .autocomplete-suggestion:not(.selected) {
117+
display: none;
118+
}
119+
120+
.autocomplete-suggestions.previewing:not(:has(.selected)) .autocomplete-preview {
121+
display: none;
122+
}
123+
124+
.autocomplete-suggestions:not(.previewing) .autocomplete-preview {
125+
display: none;
126+
}
127+
57128
.autocomplete-suggestion {
58129
color: inherit;
59130
display: block;
60131
padding: 12px 20px;
61132
text-decoration: none;
62133
transition: background-color 0.3s ease-in-out;
63-
border-bottom: 1px solid var(--suggestionBorder);
134+
border-top: 1px solid var(--suggestionBorder);
64135
font-size: 0.9rem;
65136
}
66137

67-
.autocomplete-suggestion:first-child {
68-
border-top: 1px solid var(--suggestionBorder);
138+
.autocomplete-suggestion:hover,
139+
.autocomplete-suggestion.selected {
140+
background-color: var(--autocompleteHover);
69141
}
70142

71-
.autocomplete-suggestion:last-child {
72-
border-bottom: 0;
143+
.autocomplete-suggestion:not(.selected) .autocomplete-preview-indicator {
144+
display: none;
73145
}
74146

75-
.autocomplete-suggestion:hover,
76-
.autocomplete-suggestion.selected {
147+
.autocomplete-preview-indicator {
148+
float: right;
149+
}
150+
151+
.autocomplete-preview-indicator button {
152+
color: var(--iconAction);
153+
display: flex;
154+
align-items: center;
155+
text-decoration: none;
156+
border: 1px solid var(--suggestionBorder);
157+
border-radius: 8px;
158+
transition: color .3s ease-in-out;
159+
background-color: var(--autocompletePreview);
160+
cursor: pointer;
161+
padding: 4px 8px;
162+
font-size: 14px;
163+
}
164+
165+
.autocomplete-preview-indicator button:hover {
166+
color: var(--iconActionHover);
77167
background-color: var(--autocompleteHover);
78168
}
79169

170+
.autocomplete-preview-indicator button i {
171+
margin-right: 4px;
172+
}
173+
174+
.autocomplete-suggestions.previewing .autocomplete-preview-indicator-closed {
175+
display: none;
176+
}
177+
178+
.autocomplete-suggestions:not(.previewing) .autocomplete-preview-indicator-open {
179+
display: none;
180+
}
181+
182+
.autocomplete-suggestion:hover:not(.selected) .autocomplete-preview-indicator-closed {
183+
display: block;
184+
}
185+
80186
.autocomplete-suggestion em {
81187
font-style: normal;
82188
font-weight: bold;
@@ -117,8 +223,10 @@
117223

118224
/* Style the scrollbar track (the area behind the thumb) */
119225
.autocomplete-suggestions::-webkit-scrollbar {
120-
width: 5px; /* Set the width of the scrollbar */
121-
border-radius: 7px; /* Add rounded corners to the thumb */
226+
width: 5px;
227+
/* Set the width of the scrollbar */
228+
border-radius: 7px;
229+
/* Add rounded corners to the thumb */
122230
flex-shrink: 0;
123231
}
124232

@@ -137,4 +245,4 @@
137245
.autocomplete-results .press-return {
138246
display: none;
139247
}
140-
}
248+
}

‎assets/css/content/functions.css

+14-9
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,22 @@
22
from {
33
background-color: var(--textDetailBackground);
44
}
5+
56
to {
67
background-color: var(--blink);
78
}
89
}
910

1011
.content-inner .detail:target .detail-header {
11-
animation-duration: .55s;
12+
animation-duration: 0.55s;
1213
animation-name: blink-background;
1314
animation-iteration-count: 1;
1415
animation-timing-function: ease-in-out;
1516
}
1617

1718
.content-inner .detail-header {
18-
margin: 2.0em 0 1.0em;
19-
padding: .5em 1em;
19+
margin: 2 0 1em;
20+
padding: 0.5em 1em;
2021
background-color: var(--textDetailBackground);
2122
border-left: 3px solid var(--textDetailAccent);
2223
font-size: 1em;
@@ -42,13 +43,13 @@
4243
}
4344

4445
.content-inner .detail-header a.detail-link {
45-
transition: opacity .3s ease-in-out;
46+
transition: opacity 0.3s ease-in-out;
4647
position: absolute;
4748
top: 0;
4849
left: 0;
4950
display: block;
5051
opacity: 0;
51-
padding: .6em;
52+
padding: 0.6em;
5253
line-height: 1.5em;
5354
margin-left: -2.5em;
5455
text-decoration: none;
@@ -63,7 +64,7 @@
6364

6465
.content-inner .specs pre {
6566
font-family: var(--monoFontFamily);
66-
font-size: .9em;
67+
font-size: 0.9em;
6768
font-style: normal;
6869
line-height: 24px;
6970
white-space: pre-wrap;
@@ -88,17 +89,21 @@
8889
.content-inner .docstring:is(h2, h3, h4, h5) {
8990
font-weight: 700;
9091
}
92+
9193
.content-inner .docstring h2 {
9294
font-size: 1.1em;
9395
}
96+
9497
.content-inner .docstring h3 {
95-
font-size: 1.0em;
98+
font-size: 1em;
9699
}
100+
97101
.content-inner .docstring h4 {
98-
font-size: .95em;
102+
font-size: 0.95em;
99103
}
104+
100105
.content-inner .docstring h5 {
101-
font-size: .9em;
106+
font-size: 0.9em;
102107
}
103108

104109
.content-inner div.deprecated {

‎assets/css/content/general.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
.content-inner h1 {
1919
font-size: 2em;
20-
margin: 0.8em 0 0.5em;
20+
margin: 0.5em 0;
2121
}
2222

2323
.content-inner h1.signature {

‎assets/css/custom-props/theme-dark.css

+3-2
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,10 @@ body.dark {
9191
--searchBarBorder: var(--gray500);
9292
--searchAccentMain: var(--gray300);
9393
--searchSearch: var(--gray900);
94-
--autocompleteBorder: rgba(0,0,0,.25);
94+
--autocompleteBorder: rgba(28,42,60,.75);
95+
--autocompletePreview: var(--gray750);
9596
--autocompleteHover: var(--gray700);
96-
--autocompleBackground: var(--gray800);
97+
--autocompleteBackground: var(--gray800);
9798
--suggestionBorder: var(--gray600);
9899
--autocompleteResults: var(--gray200);
99100
--autocompleteResultsBold: var(--gray100);

‎assets/css/custom-props/theme-light.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,9 @@
9393
--searchLanguageAccentBar: var(--main);
9494
--searchSearch: var(--white);
9595
--autocompleteBorder: rgba(3, 9, 19, 0.10);
96+
--autocompletePreview: var(--gray25);
9697
--autocompleteHover: var(--grey50, #F0F5F9);
97-
--autocompleBackground: var(--white);
98+
--autocompleteBackground: var(--white);
9899
--suggestionBorder: var(--gray200);
99100
--autocompleteResults: var(--gray600);
100101
--autocompleteResultsBold: var(--gray800);

‎assets/css/icons.css

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/*
2+
* Only used icons are included in the font
3+
* Icons can be generated at https://remixicon.com/
4+
* In assets/fonts/RemixIconCollection.remixicon there's easy to import on website list of icons
5+
*/
6+
17
@font-face {
28
font-family: 'remixicon';
39
src: url('../fonts/remixicon.woff2') format('woff2');
@@ -47,4 +53,4 @@
4753
.ri-information-line:before { content: var(--icon-information); }
4854
.ri-alert-line:before { content: var(--icon-alert); }
4955
.ri-double-quotes-l:before { content: var(--icon-double-quotes-l); }
50-
.ri-printer-line:before { content: var(--icon-printer-line); }
56+
.ri-printer-line:before { content: var(--icon-printer-line); }

‎assets/css/layout.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ body {
2222
box-sizing: inherit;
2323
}
2424

25-
.main {
25+
.body-wrapper {
2626
display: flex;
2727
height: 100%;
2828
}
@@ -60,7 +60,7 @@ body {
6060
position: absolute;
6161
}
6262

63-
.content-inner {
63+
.content .content-inner {
6464
max-width: var(--content-width);
6565
min-height: 100%;
6666
margin: 0 auto;

‎assets/css/preview.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
body.preview {
2+
--sidebarWidth: 0px;
3+
}
4+
5+
body.preview .content {
6+
height: auto;
7+
}
8+
9+
body.preview .content-inner {
10+
padding: 0;
11+
}
12+
13+
body.preview .sidebar, body.preview #sidebar-menu {
14+
display: none;
15+
}
16+
17+
body.preview .hover-link, body.preview .detail-link {
18+
display: none;
19+
}
20+
21+
body.preview :is(h1, h2, h3):first-of-type {
22+
margin-top: 0;
23+
}

‎assets/css/print.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@media print {
2-
.main {
2+
.body-wrapper {
33
display: block;
44
}
55

‎assets/fonts/RemixIconCollection.remixicon

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
settings-3-line,add-line,subtract-line,arrow-up-s-line,arrow-down-s-line,arrow-right-s-line,search-2-line,menu-line,close-line,link-m,code-s-slash-line,error-warning-line,information-line,alert-line,double-quotes-l,printer-line

0 commit comments

Comments
 (0)