3 files changed, 59 insertions, 0 deletions
diff --git a/src/command-line/index.html b/src/command-line/index.html
new file mode 100644
index 0000000..e9e4123
--- /dev/null
+++ b/src/command-line/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset=utf-8 />
+    <title>VimVixen command-line</title>
+    <script src='command-line.js'></script>
+  </head>
+  <body class='vimvixen-command-line'>
+    <div>
+      <p class='vimvixen-command-line-title'></p>
+      <div class='vimvixen-command-line-line'>
+        <i class='vimvixen-command-line-line-prompt'></i><input class='vimvixen-command-line-line-input'></input>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/command-line/index.js b/src/command-line/index.js
new file mode 100644
index 0000000..67aac61
--- /dev/null
+++ b/src/command-line/index.js
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/src/command-line/index.scss b/src/command-line/index.scss
new file mode 100644
index 0000000..2256bf2
--- /dev/null
+++ b/src/command-line/index.scss
@@ -0,0 +1,42 @@
+html, body, * {
+  margin: 0;
+  padding: 0;
+}
+
+.vimvixen-command-line {
+  border-top: 1px solid gray;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+
+  &-title {
+    background-color: lightgray;
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+  }
+
+  &-line {
+    background-color: white;
+    display: flex;
+
+    @mixin input-style {
+      font-style: normal;
+      font-family: monospace;
+      font-size: 12px;
+    }
+
+    &-prompt:before {
+      content: ':';
+
+      @include input-style;
+    }
+
+    &-input {
+      border: none;
+      flex-grow: 1;
+
+      @include input-style;
+    }
+  }
+}