From 6ec4ba748a78cb27b1a6bd85258f63b91004bac7 Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Mon, 18 Nov 2019 06:28:40 +0800
Subject: [PATCH] chore: small changes

---
 src/Console/Console.scss     |  2 --
 src/Console/Logger.scss      | 26 +++++---------------------
 src/Elements/Elements.scss   | 26 +++++++++++---------------
 src/Elements/Highlight.scss  |  2 +-
 src/Network/Network.scss     |  2 +-
 src/Settings/Settings.scss   |  2 +-
 src/Snippets/Snippets.scss   |  2 +-
 src/Snippets/searchText.scss |  4 ++--
 src/Sources/Sources.scss     |  2 +-
 src/style/style.scss         | 14 +-------------
 src/style/variable.scss      | 19 -------------------
 11 files changed, 24 insertions(+), 77 deletions(-)

diff --git a/src/Console/Console.scss b/src/Console/Console.scss
index 7481818..f6b145b 100644
--- a/src/Console/Console.scss
+++ b/src/Console/Console.scss
@@ -41,14 +41,12 @@
     }
     .filter {
       cursor: pointer;
-      color: $gray;
       margin: 0 1px;
       font-size: $font-size-s;
       height: 20px;
       display: inline-block;
       padding: 0 4px;
       line-height: 20px;
-      border-radius: $border-radius;
       transition: background $anim-duration, color $anim-duration;
       &.active {
         background: var(--highlight);
diff --git a/src/Console/Logger.scss b/src/Console/Logger.scss
index 461ab4b..5ffc7a9 100644
--- a/src/Console/Logger.scss
+++ b/src/Console/Logger.scss
@@ -46,7 +46,7 @@
     margin-top: -1px;
     margin-bottom: -1px;
     position: relative;
-    border-right: 1px solid $gray;
+    border-right: 1px solid var(--border);
     &.group-closed::before {
       content: '';
     }
@@ -71,27 +71,20 @@
     min-height: 24px;
     color: var(--foreground);
     a {
-      color: $blue !important;
+      color: var(--link-color) !important;
     }
     .icon-container {
       padding-top: 2px;
       margin: 0 -6px 0 $padding;
       .icon {
         line-height: 20px;
-        font-size: 12px;
-        color: $gray-dark;
+        font-size: $font-size-s;
+        color: var(--foreground);
         position: relative;
       }
       .icon-caret-right,
       .icon-caret-down {
         left: -2px;
-        color: var(--foreground);
-      }
-      .icon-arrow-right {
-        color: $blue;
-      }
-      .icon-info {
-        color: $blue;
       }
       .icon-error {
         color: var(--console-error-foreground);
@@ -123,9 +116,6 @@
         user-select: text;
       }
     }
-    &.input {
-      background: #fff;
-    }
     &.html,
     &.table {
       table {
@@ -149,9 +139,6 @@
           background: var(--contrast);
         }
       }
-      .blue {
-        color: $blue;
-      }
     }
     &.error {
       z-index: 50;
@@ -164,7 +151,7 @@
         white-space: nowrap;
       }
       .count {
-        background: $red;
+        background: var(--console-error-foreground);
       }
     }
     &.debug {
@@ -180,9 +167,6 @@
     &.info {
       z-index: 30;
     }
-    &.output {
-      color: $gray-dark;
-    }
     &.group,
     &.groupCollapsed {
       font-weight: bold;
diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss
index 8e2fc6f..377a35c 100644
--- a/src/Elements/Elements.scss
+++ b/src/Elements/Elements.scss
@@ -56,7 +56,7 @@
         width: 18px;
         height: 18px;
         line-height: 18px;
-        font-size: 12px;
+        font-size: $font-size-s;
       }
       background: var(--darker-background);
       border-top: 1px solid var(--border);
@@ -92,18 +92,18 @@
         cursor: pointer;
       }
       &.active-effect:active {
-        background: $blue;
-        color: #fff;
+        background: var(--highlight);
+        color: var(--select-foreground);
         span {
-          color: #fff;
+          color: var(--select-foreground);
         }
       }
     }
   }
   .attributes {
-    font-size: 12px;
+    font-size: $font-size-s;
     a {
-      color: $blue;
+      color: var(--link-color);
     }
     .table-wrapper {
       @include overflow-auto(x);
@@ -128,7 +128,7 @@
     height: 10px;
     border-radius: 50%;
     margin-right: 2px;
-    border: 1px solid $gray-dark;
+    border: 1px solid var(--border);
     display: inline-block;
   }
   .box-model {
@@ -191,7 +191,7 @@
   .computed-style {
     font-size: $font-size-s;
     a {
-      color: $blue;
+      color: var(--link-color);
     }
     .table-wrapper {
       @include overflow-auto(y);
@@ -208,11 +208,10 @@
     }
   }
   .styles {
-    font-size: 12px;
+    font-size: $font-size-s;
     .style-wrapper {
       padding: $padding;
       .style-rules {
-        border-radius: $border-radius;
         border: 1px solid var(--border);
         padding: $padding;
         margin-bottom: 10px;
@@ -220,7 +219,7 @@
           padding-left: 2em;
           word-break: break-all;
           a {
-            color: $blue;
+            color: var(--link-color);
           }
           span {
             color: var(--var-color);
@@ -233,7 +232,7 @@
     }
   }
   .listeners {
-    font-size: 12px;
+    font-size: $font-size-s;
     .listener-wrapper {
       padding: $padding;
       .listener {
@@ -250,9 +249,6 @@
             @include overflow-auto(x);
             padding: $padding;
             border-top: none;
-            &.capture {
-              background: $gray-light;
-            }
           }
         }
       }
diff --git a/src/Elements/Highlight.scss b/src/Elements/Highlight.scss
index b354882..8a3452a 100644
--- a/src/Elements/Highlight.scss
+++ b/src/Elements/Highlight.scss
@@ -48,7 +48,7 @@
     left: 0;
     background: #333740;
     color: #d9d9d9;
-    font-size: 12px;
+    font-size: $font-size-s;
     height: 25px;
     line-height: 25px;
     text-align: center;
diff --git a/src/Network/Network.scss b/src/Network/Network.scss
index d05d99a..948e921 100644
--- a/src/Network/Network.scss
+++ b/src/Network/Network.scss
@@ -26,7 +26,7 @@
       white-space: nowrap;
       &.error {
         span {
-          color: $red;
+          color: var(--console-error-foreground);
         }
       }
       span {
diff --git a/src/Settings/Settings.scss b/src/Settings/Settings.scss
index 0a99745..c179902 100644
--- a/src/Settings/Settings.scss
+++ b/src/Settings/Settings.scss
@@ -9,7 +9,7 @@
   .text {
     padding: $padding;
     color: var(--accent);
-    font-size: 12px;
+    font-size: $font-size-s;
   }
   .select,
   .range,
diff --git a/src/Snippets/Snippets.scss b/src/Snippets/Snippets.scss
index 2bf5a0d..ba62627 100644
--- a/src/Snippets/Snippets.scss
+++ b/src/Snippets/Snippets.scss
@@ -27,7 +27,7 @@
         width: 18px;
         height: 18px;
         line-height: 18px;
-        font-size: 12px;
+        font-size: $font-size-s;
       }
     }
     .description {
diff --git a/src/Snippets/searchText.scss b/src/Snippets/searchText.scss
index 84da001..df59a4f 100644
--- a/src/Snippets/searchText.scss
+++ b/src/Snippets/searchText.scss
@@ -3,7 +3,7 @@
 .search-highlight-block {
   display: inline;
   .keyword {
-    background: $yellow;
-    color: #fff;
+    background: var(--console-warn-background);
+    color: var(--console-warn-foreground);
   }
 }
diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss
index 07a6cf3..efc629e 100644
--- a/src/Sources/Sources.scss
+++ b/src/Sources/Sources.scss
@@ -53,7 +53,7 @@
     .img-info {
       text-align: center;
       margin: 20px 0;
-      color: $gray;
+      color: var(--foreground);
     }
   }
   .json {
diff --git a/src/style/style.scss b/src/style/style.scss
index cee8a74..18670bd 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -9,7 +9,7 @@
   width: 100%;
   height: 100%;
   z-index: 100000;
-  color: $gray-dark;
+  color: var(--foreground);
   font-family: $font-family;
   font-size: $font-size;
   direction: ltr;
@@ -37,18 +37,6 @@
   display: none;
 }
 
-.blue {
-  color: $blue;
-}
-
-.red {
-  color: $red;
-}
-
-.green {
-  color: $green;
-}
-
 .tag-name-color {
   color: var(--tag-name-color);
 }
diff --git a/src/style/variable.scss b/src/style/variable.scss
index e5020e6..3bc826e 100644
--- a/src/style/variable.scss
+++ b/src/style/variable.scss
@@ -1,7 +1,3 @@
-$box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.08),
-  0 3px 1px -2px rgba(0, 0, 0, 0.2);
-$border-radius: 4px;
-
 $padding: 10px;
 
 $font-size: 14px;
@@ -12,18 +8,3 @@ $font-family: 'Helvetica Neue', Helvetica, Arial, sans-seri;
 $font-family-code: Consolas, Lucida Console, Monaco, MonoSpace;
 
 $anim-duration: 0.3s;
-
-// https://www.google.com/design/spec/style/color.html#color-color-palette
-$blue: #2196f3;
-$blue-light: #90caf9;
-$blue-dark: #1565c0;
-$gray: #707d8b;
-$gray-light: #eceffe;
-$gray-dark: #263238;
-$red: #f44336;
-$red-light: #ffebee;
-$red-dark: #b71c1c;
-$green: #009688;
-$yellow: #ffc107;
-$yellow-light: #ffecb3;
-$yellow-dark: #ff6f00;