diff --git a/templates/icontest.html b/templates/icontest.html deleted file mode 100644 index e22c016..0000000 --- a/templates/icontest.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - Font Awesome 图标示例 - - - - - -

Font Awesome 图标示例

- -
- 撤销 -
-
- 撤销(替代) -
-
- 取消链接 -
-
- 扳手 -
-
- 500px -
-
- 无障碍图标 -
-
- Accusoft -
-
- Acquisitions Inc -
- - \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 207c575..c18a9f0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -161,43 +161,83 @@ } /* 新增的搜索框样式 */ - .search-container { - margin: 20px auto; - max-width: 600px; - position: relative; - width: 100%; - padding: 0 15px; - } - .search-input { - width: 100%; - padding: 12px 20px; - border-radius: 25px; - border: 1px solid #ddd; - font-size: 16px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); - transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; - } - .search-results { - position: absolute; - width: calc(100% - 30px); - background: white; - border-radius: 0 0 10px 10px; - box-shadow: 0 5px 15px rgba(0,0,0,0.1); - z-index: 100; - max-height: 300px; - overflow-y: auto; - display: none; - transition: background-color 0.15s ease-in-out; - } - .search-result-item { - padding: 10px 20px; - border-bottom: 1px solid #eee; - cursor: pointer; - transition: background-color 0.15s ease-in-out; - } - .search-result-item:hover { - background: #f5f5f5; - } +/* 修改后的搜索框和结果样式 */ +.search-container { + margin: 20px auto; + max-width: 500px; /* 缩小搜索框最大宽度 */ + position: relative; + width: 100%; + padding: 0 15px; +} + +.search-input { + width: 100%; + padding: 12px 20px; + border-radius: 25px; + border: 1px solid #ddd; + font-size: 16px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; +} + +.search-results { + position: absolute; + width: calc(95% - 40px); /* 修改为与搜索框底边宽度一致 */ + left: 33px; /* 确保与搜索框对齐 */ + background: white; + border-radius: 0 0 10px 10px; + box-shadow: 0 5px 15px rgba(0,0,0,0.1); + z-index: 100; + max-height: 300px; + overflow-y: auto; + display: none; + transition: background-color 0.15s ease-in-out; + scrollbar-width: thin; + scrollbar-color: var(--primary-color) transparent; + margin-top: 3px; +} + +/* 自定义滚动条样式 */ +.search-results::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +.search-results::-webkit-scrollbar-track { + background: transparent; + border-radius: 3px; +} + +.search-results::-webkit-scrollbar-thumb { + background-color: var(--primary-color); + border-radius: 3px; +} + +.search-result-item { + padding: 10px 20px; + border-bottom: 1px solid #eee; + cursor: pointer; + transition: background-color 0.15s ease-in-out; +} + +.search-result-item:hover { + background: #f5f5f5; +} + +/* 暗黑模式下的搜索结果样式 */ +body.dark-theme .search-results { + background-color: #1e1e1e; + color: #e0e0e0; +} + +body.dark-theme .search-result-item { + border-bottom-color: #333; + color: #e0e0e0; +} + +body.dark-theme .search-result-item:hover { + background-color: #2a2a2a; +} /* 右下角按钮组 */ .floating-buttons {