diff --git a/docs/css/slinky.min.css b/docs/css/slinky.css similarity index 85% rename from docs/css/slinky.min.css rename to docs/css/slinky.css index 77490d5..00f6843 100644 --- a/docs/css/slinky.min.css +++ b/docs/css/slinky.css @@ -11,7 +11,8 @@ transform: translateZ(0); } -.slinky-menu ul, .slinky-menu li { +.slinky-menu ul, +.slinky-menu li { list-style: none; margin: 0; } @@ -76,7 +77,8 @@ background: rgba(90, 200, 250, 0.5); } -.slinky-theme-default .next::after, .slinky-theme-default .back::before { +.slinky-theme-default .next::after, +.slinky-theme-default .back::before { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICAgIDxwYXRoIGQ9Ik0xMi4yMTkgMi4yODFMMTAuNzggMy43MiAxOC4wNjIgMTFIMnYyaDE2LjA2M2wtNy4yODIgNy4yODEgMS40MzggMS40MzggOS05IC42ODctLjcxOS0uNjg3LS43MTl6IiAvPjwvc3ZnPg==) center no-repeat; background-size: 1em; content: ''; @@ -95,10 +97,12 @@ transform: scaleX(-1); } -.slinky-theme-default .next:hover::after, .slinky-theme-default .back:hover::before { +.slinky-theme-default .next:hover::after, +.slinky-theme-default .back:hover::before { opacity: 0.75; } -.slinky-theme-default .next:active::after, .slinky-theme-default .back:active::before { +.slinky-theme-default .next:active::after, +.slinky-theme-default .back:active::before { opacity: 1; } diff --git a/docs/css/style.css b/docs/css/style.css index a4c0b6a..45af22b 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -24,14 +24,19 @@ html { } body { - background: #F9F9F9; - color: #222; + background-attachment: fixed; + background-color: #F9F9F9; + background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + color: #000; cursor: default; display: flex; flex-direction: column; font: normal 14px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; justify-content: center; - margin: 5em auto; + margin: 6em auto; max-width: calc(100% - 2em); min-height: calc(100vh - 8em); /* text-transform: lowercase; */ @@ -64,10 +69,11 @@ h1, h2, h3 { } h2 { - color: #222; - font-size: 1.5em; + color: #FFF; + font-size: 1.6em; margin-bottom: 2em; position: relative; + text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2); } h2::before { @@ -134,11 +140,12 @@ th, td { vertical-align: top; } -/* layout */ +/* Layout */ header, h1 { align-items: center; align-self: center; + color: #444; display: flex; flex-direction: column; } @@ -153,14 +160,14 @@ header h1::before { } header p { - color: gray; + color: #555; margin-top: 1em; } main { margin: 4em 0; opacity: 0; - /* background: #fff; */ + /* background: #FFF; */ transition: opacity 1s; } @@ -169,17 +176,25 @@ main section:not(:first-child) { } footer { - color: #555; + color: #FFF; font-size: 0.9em; line-height: 1.5em; text-align: center; } +footer a { + color: #FFF; +} + footer img { height: 1.5em; } -/* components */ +footer p { + margin: 0; +} + +/* Components */ .loading { align-items: center; @@ -208,29 +223,35 @@ footer img { width: 8px; } ::-webkit-scrollbar-thumb { - background: #999; + background-color: #CCC; border-radius: 0; } +::-webkit-scrollbar-thumb:hover { + background-color: #03A9F4; +} ::-webkit-scrollbar-track { - background: #eee; + background-color: #FFF; border-radius: 0; } /* 工具面板 */ .tool-panel { - visibility: hidden; + /* visibility: hidden; */ z-index: 100; position: fixed; left: 0; - bottom: 0; + bottom: -110%; + opacity: 0; + transition: all 1.0s; } .tool-panel-bar { height: 32px; } -.tool-panel-newtab, .tool-panel-close { +.tool-panel-newtab, +.tool-panel-close { position: absolute; top: 0; height: 32px; @@ -291,6 +312,7 @@ main section li a:not(.back) { top: 50%; left: 50%; font-size: 5vw; + color: #FFF; transform: translate(-50%, -50%); transition: opacity 1s; } @@ -324,7 +346,8 @@ main section li a:not(.back) { .search-bar .search-input:hover { border: solid 2px #00BCD4; } -.search-bar .search-submit, .search-bar .search-cancel { +.search-bar .search-submit, +.search-bar .search-cancel { width: 75px; height: 50px; border: none; @@ -334,7 +357,8 @@ main section li a:not(.back) { color: #FFF; transition: background 0.2s; } -.search-bar .search-submit:hover, .search-bar .search-cancel:hover { +.search-bar .search-submit:hover, +.search-bar .search-cancel:hover { background-color: #00BCD4; } .search-bar .search-submit { @@ -370,7 +394,8 @@ main section li a:not(.back) { height: 40px; font-size: 16px; } - .search-bar .search-submit, .search-bar .search-cancel { + .search-bar .search-submit, + .search-bar .search-cancel { width: 16%; height: 40px; font-size: 16px; @@ -398,6 +423,10 @@ main section li a:not(.back) { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); white-space: nowrap; } +.search-engine-select { + color: #FFF; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); +} #search-engine-input { padding-left: 15px; box-sizing: border-box; @@ -474,22 +503,27 @@ main section li a:not(.back) { left: 0; bottom: 20px; width: 100%; - opacity: 0.9; + /* opacity: 0.9; */ text-align: center; animation: FloatingBarSlide 1s ease-out 1; } -.floating-bar-search, .floating-bar-tool, .floating-bar-about, .floating-bar-totop { +.floating-bar-search, +.floating-bar-tool, +.floating-bar-about, +.floating-bar-totop { display: inline-block; - width: 45px; - height: 30px; + width: 50px; + height: 32px; background-color: #4CAF50; - box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); + box-shadow: 0 8px 10px -4px rgba(76, 175, 80, 0.5); text-align: center; - line-height: 30px; + line-height: 32px; font-size: 14px; color: #fff; } -.floating-bar-tool, .floating-bar-about, .floating-bar-totop { +.floating-bar-tool, +.floating-bar-about, +.floating-bar-totop { margin-left: 5px; } diff --git a/docs/css/tool.css b/docs/css/tool.css index 3657911..4faefbf 100644 --- a/docs/css/tool.css +++ b/docs/css/tool.css @@ -9,7 +9,12 @@ html { } body { padding: 20px 0 50px 0; - background-color: #F5F5F5; + background-attachment: fixed; + background-color: #F9F9F9; + background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; scroll-behavior: smooth; } @@ -20,11 +25,14 @@ body { width: 8px; } ::-webkit-scrollbar-thumb { - background: #999; + background-color: #CCC; border-radius: 0; } +::-webkit-scrollbar-thumb:hover { + background-color: #03A9F4; +} ::-webkit-scrollbar-track { - background: #eee; + background-color: #FFF; border-radius: 0; } @@ -48,7 +56,7 @@ body { .main { margin: 0 auto; width: 90%; - max-width: 400px; + max-width: 450px; } .main > div { margin: 20px 0; @@ -57,7 +65,7 @@ body { width: 100%; border-radius: 5px; background-color: #FFF; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } .main > div header { margin-bottom: 10px; @@ -234,14 +242,26 @@ body { position: fixed; right: 20px; bottom: 20px; + height: 50px; + width: 50px; + border-radius: 50%; + box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.1); + background-color: #FFF; + text-align: center; + line-height: 50px; + font-family: monospace; + font-size: 20px; + color: #2196F3; + user-select: none; + transition: all 0.5s; +} +.to-top:hover { + right: 25px; + bottom: 25px; height: 40px; width: 40px; - border-radius: 50%; - box-shadow: 2px 2px 5px rgba(76, 175, 80, 0.5); - background-color: #4CAF50; - text-align: center; - line-height: 36px; + line-height: 40px; font-size: 20px; color: #FFF; - user-select: none; + transform: rotate(360deg); } diff --git a/docs/img/Unsplash_V6TWE6h8gyg.jpg b/docs/img/Unsplash_V6TWE6h8gyg.jpg new file mode 100644 index 0000000..5a6dadc Binary files /dev/null and b/docs/img/Unsplash_V6TWE6h8gyg.jpg differ diff --git a/docs/img/Unsplash_V6TWE6h8gyg_0.jpg b/docs/img/Unsplash_V6TWE6h8gyg_0.jpg new file mode 100644 index 0000000..a3cc108 Binary files /dev/null and b/docs/img/Unsplash_V6TWE6h8gyg_0.jpg differ diff --git a/docs/index.html b/docs/index.html index 49224b7..df2c5ee 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,15 +1,15 @@ - - - - + + + + Frost 网址导航 - - - - + + + +
@@ -26,19 +26,19 @@