Skip to content

Commit 6b9a68d

Browse files
codedogQBYcodedogQBY
committed
feat(样式): 添加自定义滚动条样式并优化搜索功能
1 parent bcd1b6c commit 6b9a68d

3 files changed

Lines changed: 122 additions & 53 deletions

File tree

‎website/src/pages/support.astro‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -110,34 +110,43 @@ const categories = [
110110

111111
<script is:inline>
112112
// Search bar logic
113-
const searchInput = document.getElementById('support-search-input');
114-
const searchBtn = document.querySelector('.search-btn');
115-
116-
function openSearch() {
117-
// Find Starlight's search button and click it to open the modal
118-
const starlightSearchBtn = document.querySelector('button[data-open-modal]');
119-
if (starlightSearchBtn) {
120-
starlightSearchBtn.click();
121-
122-
// Try to transfer the search query to the modal's input
123-
const query = searchInput.value;
124-
if (query) {
125-
setTimeout(() => {
126-
const modalInput = document.querySelector('.pagefind-ui__search-input');
127-
if (modalInput) {
128-
modalInput.value = query;
129-
modalInput.dispatchEvent(new Event('input', { bubbles: true }));
130-
}
131-
}, 100);
113+
function initSupportSearch() {
114+
const searchInput = document.getElementById('support-search-input');
115+
const searchBtn = document.querySelector('.search-btn');
116+
117+
function openSearch() {
118+
// Find Starlight's search button and click it to open the modal
119+
const starlightSearchBtn = document.querySelector('site-search button[data-open-modal]');
120+
if (starlightSearchBtn) {
121+
starlightSearchBtn.click();
122+
123+
// Try to transfer the search query to the modal's input
124+
const query = searchInput?.value;
125+
if (query) {
126+
setTimeout(() => {
127+
const modalInput = document.querySelector('.pagefind-ui__search-input');
128+
if (modalInput) {
129+
modalInput.value = query;
130+
modalInput.dispatchEvent(new Event('input', { bubbles: true }));
131+
}
132+
}, 100);
133+
}
132134
}
133135
}
136+
137+
searchInput?.addEventListener('click', openSearch);
138+
searchInput?.addEventListener('keydown', (e) => {
139+
if (e.key === 'Enter') openSearch();
140+
});
141+
searchBtn?.addEventListener('click', openSearch);
134142
}
135143

136-
searchInput?.addEventListener('click', openSearch);
137-
searchInput?.addEventListener('keydown', (e) => {
138-
if (e.key === 'Enter') openSearch();
139-
});
140-
searchBtn?.addEventListener('click', openSearch);
144+
// Initialize on page load
145+
if (document.readyState === 'loading') {
146+
document.addEventListener('DOMContentLoaded', initSupportSearch);
147+
} else {
148+
initSupportSearch();
149+
}
141150
</script>
142151

143152
<style>

‎website/src/pages/zh/support.astro‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -110,31 +110,40 @@ const categories = [
110110

111111
<script is:inline>
112112
// Search bar logic
113-
const searchInput = document.getElementById('support-search-input');
114-
const searchBtn = document.querySelector('.search-btn');
115-
116-
function openSearch() {
117-
const starlightSearchBtn = document.querySelector('button[data-open-modal]');
118-
if (starlightSearchBtn) {
119-
starlightSearchBtn.click();
120-
const query = searchInput.value;
121-
if (query) {
122-
setTimeout(() => {
123-
const modalInput = document.querySelector('.pagefind-ui__search-input');
124-
if (modalInput) {
125-
modalInput.value = query;
126-
modalInput.dispatchEvent(new Event('input', { bubbles: true }));
127-
}
128-
}, 100);
113+
function initSupportSearch() {
114+
const searchInput = document.getElementById('support-search-input');
115+
const searchBtn = document.querySelector('.search-btn');
116+
117+
function openSearch() {
118+
const starlightSearchBtn = document.querySelector('site-search button[data-open-modal]');
119+
if (starlightSearchBtn) {
120+
starlightSearchBtn.click();
121+
const query = searchInput?.value;
122+
if (query) {
123+
setTimeout(() => {
124+
const modalInput = document.querySelector('.pagefind-ui__search-input');
125+
if (modalInput) {
126+
modalInput.value = query;
127+
modalInput.dispatchEvent(new Event('input', { bubbles: true }));
128+
}
129+
}, 100);
130+
}
129131
}
130132
}
133+
134+
searchInput?.addEventListener('click', openSearch);
135+
searchInput?.addEventListener('keydown', (e) => {
136+
if (e.key === 'Enter') openSearch();
137+
});
138+
searchBtn?.addEventListener('click', openSearch);
131139
}
132140

133-
searchInput?.addEventListener('click', openSearch);
134-
searchInput?.addEventListener('keydown', (e) => {
135-
if (e.key === 'Enter') openSearch();
136-
});
137-
searchBtn?.addEventListener('click', openSearch);
141+
// Initialize on page load
142+
if (document.readyState === 'loading') {
143+
document.addEventListener('DOMContentLoaded', initSupportSearch);
144+
} else {
145+
initSupportSearch();
146+
}
138147
</script>
139148

140149
<style>

‎website/src/styles/starlight-custom.css‎

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -493,13 +493,6 @@ article {
493493
margin-bottom: 0.5rem;
494494
}
495495

496-
.sl-markdown-content>p:first-of-type {
497-
text-align: center;
498-
color: var(--sl-color-gray-3);
499-
font-size: 1.125rem;
500-
margin-bottom: 2rem;
501-
}
502-
503496
/* ── Footer ─────────────────────────────────────────── */
504497
.sl-footer {
505498
border-top: 1px solid var(--sl-color-border);
@@ -568,7 +561,7 @@ article {
568561
border: none !important;
569562
border-bottom: 1px solid var(--sl-color-border) !important;
570563
border-radius: 0 !important;
571-
padding: 1.75rem 1.5rem !important;
564+
padding: 1.75rem 1.5rem 1.75rem 3.5rem !important;
572565
font-size: 1.25rem !important;
573566
font-weight: 500 !important;
574567
color: var(--foreground) !important;
@@ -703,4 +696,62 @@ article {
703696
.main-pane {
704697
max-width: 100%;
705698
}
699+
}
700+
701+
/* ── Scrollbar Styles ─────────────────────────────────────────── */
702+
/* Light theme scrollbar */
703+
[data-theme="light"] ::-webkit-scrollbar {
704+
width: 10px;
705+
height: 10px;
706+
}
707+
708+
[data-theme="light"] ::-webkit-scrollbar-track {
709+
background: #f1f5f9;
710+
}
711+
712+
[data-theme="light"] ::-webkit-scrollbar-thumb {
713+
background: #cbd5e1;
714+
border-radius: 5px;
715+
}
716+
717+
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
718+
background: #94a3b8;
719+
}
720+
721+
/* Dark theme scrollbar */
722+
[data-theme="dark"] ::-webkit-scrollbar {
723+
width: 10px;
724+
height: 10px;
725+
}
726+
727+
[data-theme="dark"] ::-webkit-scrollbar-track {
728+
background: #27272a;
729+
}
730+
731+
[data-theme="dark"] ::-webkit-scrollbar-thumb {
732+
background: #52525b;
733+
border-radius: 5px;
734+
}
735+
736+
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
737+
background: #71717a;
738+
}
739+
740+
/* Sepia theme scrollbar */
741+
[data-theme="sepia"] ::-webkit-scrollbar {
742+
width: 10px;
743+
height: 10px;
744+
}
745+
746+
[data-theme="sepia"] ::-webkit-scrollbar-track {
747+
background: #e6d9c3;
748+
}
749+
750+
[data-theme="sepia"] ::-webkit-scrollbar-thumb {
751+
background: #c4b5a0;
752+
border-radius: 5px;
753+
}
754+
755+
[data-theme="sepia"] ::-webkit-scrollbar-thumb:hover {
756+
background: #a89a82;
706757
}

0 commit comments

Comments
 (0)