style: 修改搜索框样式，适配暗黑主题

imhanjie · Jul 29, 2020 · 0969c06 · 0969c06
1 parent dc55878
commit 0969c06
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 70 deletions.
diff --git a/assets/styles/main.less b/assets/styles/main.less
@@ -200,71 +200,20 @@ ul {
   position: relative;
   left: -2px;
   width: 180px;
-  height: 26px;
-  padding: 0 0 2px 27px;
-  font-size: 14px;
-  background: url(https://i.loli.net/2020/01/12/X3cnLxGjo7Wb8Jk.png) 6px 3px no-repeat;
-  background-color: #F3F3F3 !important;
+  height: 30px;
+  padding: 0 0 2px 35px;
+  font-size: 12px;
   background-size: 20px;
   border: 0;
   border-radius: 15px;
   border-bottom-color: currentcolor;
   border-bottom-style: none;
   border-bottom-width: medium;
   outline: 0;
-  color: #495057;
   border-bottom: 2px #495057;
-  transition: border-color .2s
+  transition: border-color .2s;
 }
 
-//.gt-bg-theme-color-first {
-//  background: @theme-color-first;
-//}
-//
-//.gt-bg-them-color-second {
-//  background: @theme-color-second;
-//}
-//
-//.gt-bg-content-color-first {
-//  background: @content-color-first;
-//}
-//
-//.gt-bg-content-color-second {
-//  background: @content-color-second;
-//}
-//
-//.gt-bg-accent-color-first {
-//  background: @accent-color-first;
-//}
-//
-//.gt-bg-accent-color-second {
-//  background: @accent-color-second;
-//}
-//
-//.gt-c-theme-color-first {
-//  color: @theme-color-first;
-//}
-//
-//.gt-c-them-color-second {
-//  color: @theme-color-second;
-//}
-//
-//.gt-c-content-color-first {
-//  color: @content-color-first;
-//}
-//
-//.gt-c-content-color-second {
-//  color: @content-color-second;
-//}
-//
-//.gt-c-accent-color-first {
-//  color: @accent-color-first;
-//}
-//
-//.gt-c-accent-color-second {
-//  color: @accent-color-second;
-//}
-
 @import "./components/header.less";
 @import "./components/home.less";
 @import "./components/post.less";

diff --git a/style-override.js b/style-override.js
@@ -142,6 +142,15 @@ const generateOverride = (params = {}) => {
         .gt-post-content code {
           background: ${colors["accent-color-second"][params.skin]}!important;
         }
+        
+        input::placeholder {
+          color: ${colors["content-color-second"][params.skin]}!important;
+        }
+        
+        .search-input {
+          color: ${colors["content-color-first"][params.skin]}!important;
+          background-color: ${colors["theme-color-second"][params.skin]}!important;
+        }
          `;
     if (params.customCss) {
         result += `

diff --git a/templates/includes/header.ejs b/templates/includes/header.ejs
@@ -6,29 +6,30 @@
         </div>
     </div>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <i class="fas fa-bars gt-c-content-color-first" style="font-size: 18px"></i>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <div class="navbar-nav mr-auto" style="text-align: center">
             <% menus.forEach(function(menu) { %>
-            <div class="nav-item">
-                <% if (menu.openType === 'External') { %>
-                <a href="<%= menu.link %>" class="menu gt-a-link" target="_blank">
-                    <%= menu.name %>
-                </a>
-                <% } else { %>
-                <a href="<%= menu.link %>" class="menu gt-a-link">
-                    <%= menu.name %>
-                </a>
-                <% } %>
-            </div>
+                <div class="nav-item">
+                    <% if (menu.openType === 'External') { %>
+                        <a href="<%= menu.link %>" class="menu gt-a-link" target="_blank">
+                            <%= menu.name %>
+                        </a>
+                    <% } else { %>
+                        <a href="<%= menu.link %>" class="menu gt-a-link">
+                            <%= menu.name %>
+                        </a>
+                    <% } %>
+                </div>
             <% }); %>
         </div>
         <div style="text-align: center">
-            <form id="gridea-search-form" data-update="<%=site.utils.now%>" action="/search/index.html"><input
-                    class="search-input" autocomplete="off" spellcheck="false" name="q" placeholder="在这里搜索哦！" />
+            <form id="gridea-search-form" style="position: relative" data-update="<%=site.utils.now%>" action="/search/index.html">
+                <input class="search-input" autocomplete="off" spellcheck="false" name="q" placeholder="搜索文章" />
+                <i class="fas fa-search gt-c-content-color-first" style="position: absolute; top: 9px; left: 10px;"></i>
             </form>
         </div>
     </div>
-</nav>
+</nav>