调整样式；加入背景图；

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;
 }

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;
 }
 

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);
 }