diff --git a/README.md b/README.md index b6c83de..3cb8bcf 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,8 @@ ## To Do -- [ ] 搜索框 -- [ ] 美化 +- [x] 搜索框 - [ ] 加入链接图标 - [ ] 加入更多的链接 +- [ ] 美化 +- [ ] 优化代码 diff --git a/docs/css/styles.css b/docs/css/styles.css index 8eb1cec..2ee3099 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -200,15 +200,19 @@ footer img { width: 1.5em; } -/* 全屏文字 */ +/* 滚动条 */ -.fullscreen-text { - position: fixed; - top: 50%; - left: 50%; - font-size: 10vw; - transform: translate(-50%, -50%); - transition: opacity 1s; +::-webkit-scrollbar { + height: 8px; + width: 8px; +} +::-webkit-scrollbar-thumb { + background: #999; + border-radius: 0; +} +::-webkit-scrollbar-track { + background: #eee; + border-radius: 0; } /* 链接的图标 */ @@ -225,6 +229,109 @@ main section li a:not(.back) { } */ +/* 全屏文字 */ + +.fullscreen-text { + position: fixed; + top: 50%; + left: 50%; + font-size: 10vw; + transform: translate(-50%, -50%); + transition: opacity 1s; +} + +/* 搜索面板 */ + +.search-panel { + display: none; + position: fixed; + top: 50%; + left: 50%; + height: 300px; + width: 500px; + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + transform: translate(-50%, -50%); +} +.search-bar{ + text-align: center; +} +.search-bar .search-input { + margin: 20px 5px 0 0; + padding: 0 15px; + width: 60%; + height: 50px; + border: solid 2px #03A9F4; + font-size: 20px; +} +.search-bar .search-submit, .search-bar .search-cancel { + width: 75px; + height: 50px; + border: none; + background-color: #03A9F4; + font-size: 20px; + color: #FFF; +} +.search-bar .search-submit { + margin-right: 5px; +} +.search-result { + margin-top: 10px; + padding: 0 16px; + height: calc(100% - 100px); + overflow-y: scroll; +} +.search-result a { + display: block; + margin-bottom: 10px; + font-size: 20px; +} +@media screen and (max-width: 500px) { + .search-panel { + top: 32%; + height: 300px; + width: 100%; + } + .search-bar .search-input { + margin: 15px 5px 0 0; + padding: 0 10px; + width: 50%; + height: 40px; + font-size: 16px; + } + .search-bar .search-submit, .search-bar .search-cancel { + width: 16%; + height: 40px; + font-size: 16px; + } + .search-result { + padding: 0 6%; + height: calc(100% - 80px); + } + .search-result a { + margin-bottom: 10px; + font-size: 20px; + } +} + +/* 悬浮栏 */ + +.floating-bar { + position: fixed; + left: 50%; + bottom: 16px; + padding-top: 7px; + width: 50px; + height: 32px; + background-color: #4CAF50; + box-shadow: 0 0 10px rgba(76, 175, 80, 0.8); + text-align: center; + font-size: 16px; + color: #fff; + opacity: 0.9; + transform: translateX(-50%) +} + /* 选中 */ ::selection { diff --git a/docs/index.html b/docs/index.html index c332073..bba397d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -90,10 +90,10 @@

博客 / 论坛 / 社区

-
+
+ +
+
加载中...
+
搜索