fix searchbar css

egoist · egoist · commit 5b91a2e7da49 · 2020-03-07T17:08:40.000+08:00
diff --git a/app/renderer/main.js b/app/renderer/main.js
@@ -110,7 +110,7 @@ function createWebView() {
       window: webview,
       showInspectElement: true,
       append(props) {
-        const hasText = props.selectionText.trim().length > 0
+        const hasText = props.selectionText && props.selectionText.trim().length > 0
         return [
           {
             id: 'searchGoogle',
diff --git a/app/renderer/search.css b/app/renderer/search.css
@@ -1,6 +1,6 @@
 .searcher {
   position: fixed;
-  top: var(--headerHeight);
+  top: var(--webHeaderHeight);
   right: 0;
   padding: 10px;
   background: var(--headerBackground);
@@ -13,7 +13,7 @@
 }
 
 .is-darwin .searcher {
-  top: 24px;
+  top: calc(24px + var(--webHeaderHeight));
 }
 
 .searcher-progress {
@@ -26,14 +26,15 @@
 }
 
 .searcher-action {
-  border: 1px solid var(--boxBorder);
-  background: var(--labelBackground);
+  border: 1px solid var(--searchActionBorder);
+  background: var(--contentBackgorund);
   outline: none;
   padding: 0 8px;
   cursor: pointer;
   font-size: .875rem;
   height: 30px;
   overflow: hidden;
+  color: var(--textColor);
 }
 
 .searcher-prev {
@@ -54,11 +55,11 @@
 }
 
 .searcher-action:hover {
-  background: var(--boxBorder);
+  background: var(--searchActionHoverBackground);
 }
 
 .searcher-input {
-  border: 1px solid var(--searchBorder);
+  border: 1px solid var(--searchInputBorder);
   border-radius: 3px;
   padding: 0 5px;
   outline: none;
@@ -67,6 +68,7 @@
   margin-right: 5px;
   width: 200px;
   background-color: var(--contentBackground);
+  color: var(--searchInputColor);
 }
 
 .searcher-input:focus {
diff --git a/app/renderer/style.css b/app/renderer/style.css
@@ -1,12 +1,26 @@
 :root {
+  --textColor: #333;
   --inputFocusBorder: #35b5f4 !important;
   --headerBackground: #eee;
+  --webHeaderHeight: 3rem;
+  --searchBorder: #ccc;
+  --searchInputBorder: #ccc;
+  --searchActionBorder: #ccc;
+  --searchActionHoverBackground: #ccc;
+  --contentBackground: white;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --textColor: #ccc;
     --headerColor: #999;
     --headerBackground: #1c1c1c;
+    --searchBorder: black;
+    --searchInputColor: white;
+    --searchInputBorder: black;
+    --contentBackground: #33373a;
+    --searchActionBorder: black;
+    --searchActionHoverBackground: #333;
   }
 }
 
@@ -25,6 +39,8 @@ body {
     "Helvetica Neue",
     Arial,
     sans-serif;
+  color: var(--textColor);
+  background-color: var(--contentBackground);
 }
 
 * {

Original file line number	Diff line number	Diff line change
`@@ -110,7 +110,7 @@ function createWebView() {`
`110`	`110`	`window: webview,`
`111`	`111`	`showInspectElement: true,`
`112`	`112`	`append(props) {`
`113`		`- const hasText = props.selectionText.trim().length > 0`
	`113`	`+ const hasText = props.selectionText && props.selectionText.trim().length > 0`
`114`	`114`	`return [`
`115`	`115`	`{`
`116`	`116`	`id: 'searchGoogle',`