Merge pull request #837 from ueokande/use-styled-components

Use styled-components instead of vanilla CSS/SCSS in console

1 files changed, 12 insertions, 123 deletions

diff --git a/src/console/components/console.scss b/src/console/components/console.scss
index ccb769b..2d548df 100644
--- a/src/console/components/console.scss
+++ b/src/console/components/console.scss
@@ -1,38 +1,18 @@
-[data-theme="light"] {
-  --completion-title-background: lightgray;
-  --completion-title-foreground: #000000;
-  --completion-item-background: #ffffff;
-  --completion-item-foreground: #000000;
-  --completion-item-description-foreground: #008000;
-  --completion-selected-background: #ffff00;
-  --completion-selected-foreground: #000000;
-  --command-background: #ffffff;
-  --command-foreground: #000000;
-  --console-error-background: #ff0000;
-  --console-error-foreground: #ffffff;
-  --console-info-background: #ffffff;
-  --console-info-foreground: #018786;
-}
-
-[data-theme="dark"] {
-  --completion-title-background: #052027;
-  --completion-title-foreground: white;
-  --completion-item-background: #2f474f;
-  --completion-item-foreground: white;
-  --completion-item-description-foreground: #86fab0;
-  --completion-selected-background: #eeff41;
-  --completion-selected-foreground: #000000;
-  --command-background: #052027;
-  --command-foreground: white;
-  --console-error-background: red;
-  --console-error-foreground: white;
-  --console-info-background: #052027;
-  --console-info-foreground: #ffffff;
-}
-
 html, body, * {
   margin: 0;
   padding: 0;
+
+  font-style: normal;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+input {
+  font-style: normal;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 16px;
 }
 
 body {
@@ -47,95 +27,4 @@ body {
   bottom: 0;
   margin: 0;
   padding: 0;
-
-  @mixin console-font {
-    font-style: normal;
-    font-family: monospace;
-    font-size: 12px;
-    line-height: 16px;
-  }
-
-  &-command-wrapper {
-    border-top: 1px solid gray;
-  }
-
-  &-completion {
-    @include console-font;
-
-    &-title {
-      background-color: var(--completion-title-background);
-      color: var(--completion-title-foreground);
-      font-weight: bold;
-      margin: 0;
-      padding: 0;
-    }
-
-    &-item {
-      background-color: var(--completion-item-background);
-      color: var(--completion-item-foreground);
-
-      padding-left: 1.5rem;
-      background-position: 0 center;
-      background-size: contain;
-      background-repeat: no-repeat;
-      white-space: pre;
-
-      &.vimvixen-completion-selected {
-        background-color: var(--completion-selected-background);
-        color: var(--completion-selected-foreground);
-      }
-
-      &-caption {
-        display: inline-block;
-        width: 40%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      &-url {
-        display: inline-block;
-        color: var(--completion-item-description-foreground);
-        width: 60%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-  }
-
-  &-message {
-    @include console-font;
-
-    border-top: 1px solid gray;
-  }
-
-  &-error {
-    background-color: var(--console-error-background);
-    color: var(--console-error-foreground);
-    font-weight: bold;
-  }
-
-  &-info {
-    background-color: var(--console-info-background);
-    color: var(--console-info-foreground);
-    font-weight: normal;
-  }
-
-  &-command {
-    background-color: var(--command-background);
-    color: var(--command-foreground);
-    display: flex;
-
-    &-prompt {
-      @include console-font;
-    }
-
-    &-input {
-      border: none;
-      flex-grow: 1;
-      background-color: var(--command-background);
-      color: var(--command-foreground);
-
-      @include console-font;
-    }
-  }
 }