Skip to content

Commit 867af73

Browse files
guimachiavelliguimachiavelli
committed
WIP moving styling to css, testing light colours
1 parent f8bf1b0 commit 867af73

File tree

3 files changed

+130
-94
lines changed

3 files changed

+130
-94
lines changed

‎docs.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@
2020
}
2121
},
2222
"appearance": {
23-
"default": "dark",
24-
"strict": true
23+
"default": "light"
2524
},
2625
"navbar": {
2726
"primary": {

‎meilisearch-search-bar.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
.meilisearch-bar-container {
2+
max-width: 480px;
3+
width: 100%;
4+
margin: 0 auto;
5+
padding: 0 10px;
6+
}
7+
8+
.meilisearch-search-bar {
9+
background-color: white;
10+
color: rgba(25, 25, 25, 0.7);
11+
border: 1px solid rgba(255, 255, 255, 0.1);
12+
display: flex;
13+
align-items: center;
14+
border-radius: 12px;
15+
padding: 8px 16px;
16+
cursor: pointer;
17+
width: 100%;
18+
transition: all 0.2s ease;
19+
backdrop-filter: blur(8px);
20+
font-size: 14px;
21+
}
22+
23+
.dark .meilisearch-search-bar {
24+
background-color: rgba(25, 17, 53, 0.5);
25+
color: rgba(255, 255, 255, 0.7);
26+
border: 1px solid rgba(255, 255, 255, 0.1);
27+
}
28+
29+
.meilisearch-search-bar__text {
30+
flex-grow: 1;
31+
}
32+
33+
.meilisearch-search-bar__shortcut {
34+
opacity: 0.7;
35+
font-size: 12px;
36+
}
37+
38+
.meilisearch-modal-overlay {
39+
position: fixed;
40+
top: 0;
41+
left: 0;
42+
width: 100%;
43+
height: 100%;
44+
backdrop-filter: blur(8px);
45+
background-color: rgba(0, 0, 0, 0.4);
46+
z-index: 9999;
47+
display: none;
48+
align-items: flex-start; /* Align to top */
49+
justify-content: center;
50+
padding-top: 0;
51+
box-sizing: border-box;
52+
}
53+
54+
.meilisearch-modal {
55+
width: 600px;
56+
max-width: 90%;
57+
max-height: 80vh;
58+
margin-top: 70px; /* Fixed distance from top */
59+
border-radius: 12px;
60+
background-color: #1a1033;
61+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
62+
display: flex;
63+
flex-direction: column;
64+
border: 1px solid rgba(255, 255, 255, 0.1);
65+
overflow: hidden;
66+
}
67+
68+
.meilisearch-modal__input-container {
69+
display: flex;
70+
align-items: center;
71+
padding: 16px 20px;
72+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
73+
}
74+
75+
.meilisearch-modal__input {
76+
background: transparent;
77+
border: none;
78+
color: white;
79+
font-size: 16px;
80+
outline: none;
81+
width: 100%;
82+
margin-right: 10px;
83+
}
84+
85+
.meilisearch-modal__escape {
86+
color: rgba(255, 255, 255, 0.5);
87+
font-size: 12px;
88+
padding: 4px 8px;
89+
border-radius: 4px;
90+
background-color: rgba(255, 255, 255, 0.1);
91+
margin-left: auto;
92+
}
93+
94+
.meilisearch-modal__results {
95+
flex-grow: 1;
96+
overflow-y: auto;
97+
padding: 0;
98+
}
99+
100+
.meilisearch-modal__category-header {
101+
padding: 12px 20px 8px;
102+
font-size: 14px;
103+
font-weight: 600;
104+
color: rgba(255, 255, 255, 0.5);
105+
text-transform: uppercase;
106+
}
107+
108+
.meilisearch-modal__category-link {
109+
display: block;
110+
padding: 12px 20px;
111+
text-decoration: none;
112+
color: white;
113+
border-left: 3px solid transparent;
114+
transition: background-color 0.2s, border-color 0.2s;
115+
}

‎search.js‎

Lines changed: 14 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -103,41 +103,23 @@ function initializeMeilisearchIntegration() {
103103
// Create our search input container
104104
const searchBarContainer = document.createElement('div');
105105
searchBarContainer.id = 'meilisearch-bar-container';
106-
searchBarContainer.style.cssText = `
107-
max-width: 480px;
108-
width: 100%;
109-
margin: 0 auto;
110-
padding: 0 10px;
111-
`;
106+
searchBarContainer.className = 'meilisearch-bar-container';
112107

113108
// Create the search input that looks like Meilisearch's
114109
const searchBar = document.createElement('div');
115110
searchBar.id = 'meilisearch-search-bar';
111+
searchBar.className = 'meilisearch-search-bar';
116112
searchBar.role = 'button';
117113
searchBar.tabIndex = 0;
118-
searchBar.style.cssText = `
119-
display: flex;
120-
align-items: center;
121-
background-color: rgba(25, 17, 53, 0.5);
122-
border-radius: 12px;
123-
padding: 8px 16px;
124-
color: rgba(255, 255, 255, 0.7);
125-
border: 1px solid rgba(255, 255, 255, 0.1);
126-
cursor: pointer;
127-
width: 100%;
128-
transition: all 0.2s ease;
129-
backdrop-filter: blur(8px);
130-
font-size: 14px;
131-
`;
132114

133115
// Add the search icon and placeholder text
134116
searchBar.innerHTML = `
135117
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
136118
<circle cx="11" cy="11" r="8"></circle>
137119
<path d="m21 21-4.3-4.3"></path>
138120
</svg>
139-
<span style="flex-grow: 1;">Search...</span>
140-
<span style="opacity: 0.7; font-size: 12px;">⌘K</span>
121+
<span class="meilisearch-search-bar__text">Search…</span>
122+
<span class="meilisearch-search-bar__shortcut">⌘K</span>
141123
`;
142124

143125
// Append the search bar to the container
@@ -182,77 +164,32 @@ function initializeMeilisearchIntegration() {
182164
// ========= Step 2: Create the modal search overlay =========
183165
const modalOverlay = document.createElement('div');
184166
modalOverlay.id = 'meilisearch-modal-overlay';
185-
modalOverlay.style.cssText = `
186-
position: fixed;
187-
top: 0;
188-
left: 0;
189-
width: 100%;
190-
height: 100%;
191-
backdrop-filter: blur(8px);
192-
background-color: rgba(0, 0, 0, 0.4);
193-
z-index: 9999;
194-
display: none;
195-
align-items: flex-start; /* Align to top */
196-
justify-content: center;
197-
padding-top: 0;
198-
box-sizing: border-box;
199-
`;
167+
modalOverlay.className = 'meilisearch-modal-overlay';
200168

201169
// Create the search modal container
202170
const searchModal = document.createElement('div');
203171
searchModal.id = 'meilisearch-modal';
204-
searchModal.style.cssText = `
205-
width: 600px;
206-
max-width: 90%;
207-
max-height: 80vh;
208-
margin-top: 70px; /* Fixed distance from top */
209-
border-radius: 12px;
210-
background-color: #1a1033;
211-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
212-
display: flex;
213-
flex-direction: column;
214-
border: 1px solid rgba(255, 255, 255, 0.1);
215-
overflow: hidden;
216-
`;
172+
searchModal.className = 'meilisearch-modal';
217173

218174
// Create the search input container
219175
const searchInputContainer = document.createElement('div');
220-
searchInputContainer.style.cssText = `
221-
display: flex;
222-
align-items: center;
223-
padding: 16px 20px;
224-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
225-
`;
176+
searchInputContainer.className = 'meilisearch-modal__input-container'
226177

227178
// Create the search input
228179
const searchInput = document.createElement('input');
229180
searchInput.id = 'meilisearch-search-input';
181+
searchInput.className = 'meilisearch-modal__input';
230182
searchInput.type = 'text';
231-
searchInput.placeholder = 'Search...';
232-
searchInput.style.cssText = `
233-
background: transparent;
234-
border: none;
235-
color: white;
236-
font-size: 16px;
237-
outline: none;
238-
width: 100%;
239-
margin-right: 10px;
240-
`;
183+
searchInput.placeholder = 'Search…';
241184

242185
// Create the ESC key indicator
243186
const escIndicator = document.createElement('span');
244187
escIndicator.textContent = 'ESC';
245-
escIndicator.style.cssText = `
246-
color: rgba(255, 255, 255, 0.5);
247-
font-size: 12px;
248-
padding: 4px 8px;
249-
border-radius: 4px;
250-
background-color: rgba(255, 255, 255, 0.1);
251-
margin-left: auto;
252-
`;
188+
escIndicator.className = 'meilisearch-modal__escape';
253189

254190
// Create the search icon
255191
const searchIcon = document.createElement('div');
192+
searchIcon.className = 'meilisearch-modal__icon';
256193
searchIcon.innerHTML = `
257194
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
258195
<circle cx="11" cy="11" r="8"></circle>
@@ -268,10 +205,8 @@ function initializeMeilisearchIntegration() {
268205
// Create the results container
269206
const resultsContainer = document.createElement('div');
270207
resultsContainer.id = 'meilisearch-results';
208+
resultsContainer.className = 'meilisearch-modal__results';
271209
resultsContainer.style.cssText = `
272-
flex-grow: 1;
273-
overflow-y: auto;
274-
padding: 0;
275210
`;
276211

277212
// Append everything to the modal
@@ -455,28 +390,15 @@ function initializeMeilisearchIntegration() {
455390
// Only add category header if there are multiple categories
456391
if (Object.keys(grouped).length > 1) {
457392
const categoryHeader = document.createElement('div');
458-
categoryHeader.style.cssText = `
459-
padding: 12px 20px 8px;
460-
font-size: 14px;
461-
font-weight: 600;
462-
color: rgba(255, 255, 255, 0.5);
463-
text-transform: uppercase;
464-
`;
393+
categoryHeader.className = 'meilisearch-modal__category-header';
465394
categoryHeader.textContent = category;
466395
resultsContainer.appendChild(categoryHeader);
467396
}
468397

469398
results.forEach(hit => {
470399
const resultItem = document.createElement('a');
471400
resultItem.href = hit.url || `/${hit.path}`;
472-
resultItem.style.cssText = `
473-
display: block;
474-
padding: 12px 20px;
475-
text-decoration: none;
476-
color: white;
477-
border-left: 3px solid transparent;
478-
transition: background-color 0.2s, border-color 0.2s;
479-
`;
401+
resultItem.className = 'meilisearch-modal__category-link';
480402

481403
// Format content nicely
482404
// Build title from hierarchy levels

0 commit comments

Comments
 (0)