调整样式；加入背景图；

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