docs: polish search form

This commit is contained in:
ob-yalian
2026-03-26 16:08:29 +08:00
parent a77d3c78e8
commit b4e5346e52
4 changed files with 669 additions and 19 deletions
+244
View File
@@ -156,6 +156,231 @@
padding: 0 0.12em !important;
}
.wy-nav-content .rst-content .section-search-panel {
margin: 1.35rem 0 1rem !important;
}
.wy-nav-content .rst-content .section-search-form {
display: flex !important;
align-items: stretch !important;
gap: 0.85rem !important;
margin-bottom: 0.75rem !important;
}
.wy-nav-content .rst-content .section-search-form__field {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important;
min-height: 3.15rem !important;
padding: 0 1rem !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
border: 1px solid #d0d7de !important;
border-radius: 16px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 20px rgba(31, 35, 40, 0.06) !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}
.wy-nav-content .rst-content .section-search-form__field:focus-within {
border-color: #0969da !important;
box-shadow: 0 0 0 4px rgba(9, 105, 218, 0.12), 0 12px 28px rgba(31, 35, 40, 0.1) !important;
transform: translateY(-1px) !important;
}
.wy-nav-content .rst-content .section-search-form__icon {
flex: 0 0 auto !important;
margin-right: 0.7rem !important;
color: #57606a !important;
font-size: 1.15rem !important;
line-height: 1 !important;
}
.wy-nav-content .rst-content .section-search-form input[name="q"] {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #1f2328 !important;
font-size: 1rem !important;
line-height: 1.5 !important;
box-shadow: none !important;
}
.wy-nav-content .rst-content .section-search-form input[name="q"]::placeholder {
color: #8c959f !important;
}
.wy-nav-content .rst-content .section-search-form input[name="q"]:focus {
outline: none !important;
}
.wy-nav-content .rst-content .section-search-form__submit {
flex: 0 0 auto !important;
min-width: 7rem !important;
padding: 0 1.35rem !important;
border: 0 !important;
border-radius: 16px !important;
background: linear-gradient(135deg, #0969da 0%, #1f6feb 100%) !important;
color: #ffffff !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
box-shadow: 0 12px 28px rgba(9, 105, 218, 0.22) !important;
cursor: pointer !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}
.wy-nav-content .rst-content .section-search-form__submit:hover {
transform: translateY(-1px) !important;
box-shadow: 0 16px 32px rgba(9, 105, 218, 0.28) !important;
filter: brightness(1.02) !important;
}
.wy-nav-content .rst-content .section-search-form__submit:focus {
outline: 3px solid rgba(9, 105, 218, 0.18) !important;
outline-offset: 2px !important;
}
.wy-nav-content .rst-content .section-search-history {
margin-bottom: 0.8rem !important;
padding: 0.9rem 1rem 1rem !important;
background: #ffffff !important;
border: 1px solid #d8dee4 !important;
border-radius: 16px !important;
box-shadow: 0 10px 24px rgba(31, 35, 40, 0.08) !important;
}
.wy-nav-content .rst-content .section-search-history__header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.75rem !important;
margin-bottom: 0.8rem !important;
}
.wy-nav-content .rst-content .section-search-history__title {
color: #57606a !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
}
.wy-nav-content .rst-content .section-search-history__clear {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #0969da !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
cursor: pointer !important;
}
.wy-nav-content .rst-content .section-search-history__clear:hover {
color: #0550ae !important;
text-decoration: underline !important;
}
.wy-nav-content .rst-content .section-search-history__list {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.65rem !important;
}
.wy-nav-content .rst-content .section-search-history__item,
.wy-nav-content .rst-content .section-search-history__empty {
display: inline-flex !important;
align-items: center !important;
min-height: 2.2rem !important;
padding: 0.4rem 0.8rem !important;
border-radius: 999px !important;
font-size: 0.95rem !important;
line-height: 1.3 !important;
}
.wy-nav-content .rst-content .section-search-history__item {
color: #1f2328 !important;
background: #f6f8fa !important;
border: 1px solid #d0d7de !important;
text-decoration: none !important;
transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}
.wy-nav-content .rst-content .section-search-history__item:hover {
color: #0550ae !important;
background: #edf4ff !important;
border-color: #9ec1ff !important;
transform: translateY(-1px) !important;
}
.wy-nav-content .rst-content .section-search-history__item[aria-current="true"] {
color: #0550ae !important;
background: #eaf2ff !important;
border-color: #7aa7ff !important;
font-weight: 700 !important;
}
.wy-nav-content .rst-content .section-search-history__empty {
color: #57606a !important;
background: #f6f8fa !important;
border: 1px dashed #d0d7de !important;
}
.wy-nav-content .rst-content #section-search-results .search {
list-style: none !important;
padding-left: 0 !important;
margin: 1.2rem 0 0 !important;
display: grid !important;
gap: 0.95rem !important;
}
.wy-nav-content .rst-content #section-search-results .search li.section-search-result {
margin: 0 !important;
padding: 1rem 1.1rem 1.05rem !important;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
border: 1px solid #d8dee4 !important;
border-radius: 14px !important;
box-shadow: 0 1px 2px rgba(31, 35, 40, 0.06) !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}
.wy-nav-content .rst-content #section-search-results .search li.section-search-result:hover {
border-color: #b6c2cf !important;
box-shadow: 0 10px 24px rgba(31, 35, 40, 0.08) !important;
transform: translateY(-1px) !important;
}
.wy-nav-content .rst-content .section-search-result__header {
margin-bottom: 0.35rem !important;
}
.wy-nav-content .rst-content .section-search-result__title {
display: block !important;
font-size: 1.08rem !important;
font-weight: 700 !important;
line-height: 1.45 !important;
text-decoration: none !important;
}
.wy-nav-content .rst-content .section-search-result__meta {
display: inline-block !important;
margin-bottom: 0.6rem !important;
padding: 0.18rem 0.55rem !important;
font-size: 0.86rem !important;
line-height: 1.4 !important;
color: #57606a !important;
background: #f6f8fa !important;
border: 1px solid #d8dee4 !important;
border-radius: 999px !important;
}
.wy-nav-content .rst-content .section-search-result__snippet {
margin: 0 !important;
color: #24292f !important;
line-height: 1.7 !important;
}
.wy-nav-content .rst-content code,
.wy-nav-content .rst-content tt,
.wy-nav-content .rst-content .literal {
@@ -351,4 +576,23 @@
.wy-nav-content .rst-content h2 {
font-size: 1.45rem !important;
}
.wy-nav-content .rst-content .section-search-form {
flex-direction: column !important;
gap: 0.7rem !important;
}
.wy-nav-content .rst-content .section-search-form__submit {
width: 100% !important;
min-height: 3rem !important;
}
.wy-nav-content .rst-content .section-search-history {
padding: 0.85rem 0.85rem 0.9rem !important;
}
.wy-nav-content .rst-content .section-search-history__header {
align-items: flex-start !important;
flex-direction: column !important;
}
}