feat: invert

Author: ndabAP

src/components/VueCommand.vue

@@ -501,6 +501,7 @@ defineExpose({
 <style lang="scss">
 .vue-command,
 .vue-command--invert {
+  font-family: 'Fira Code', monospace;
 
   @mixin clearfix() {
 
@@ -554,8 +555,6 @@ defineExpose({
     margin: 0;
     white-space: pre-line;
     line-height: 1.33;
-    font-size: 1rem;
-    font-family: monospace;
     height: 100%;
 
     /* Provide reasonable default values */
@@ -571,8 +570,8 @@ defineExpose({
       border: none;
       outline: none;
       flex: 1;
-      width: 100%;
       font-size: 1rem;
+      width: 100%;
       resize: none;
       overflow: hidden;
     }

src/components/VueCommandQuery.vue

@@ -228,14 +228,18 @@ defineExpose({
   .vue-command__query--invert {
     display: flex;
 
+    input::placeholder,
+    input {
+      font: 1rem monospace;
+    }
+
     .vue-command__query__input,
     .vue-command__query__input--invert {
       border: none;
       outline: none;
       flex: 1;
       width: 100%;
-      font-family: monospace;
-      font-size: 1rem;
+
     }
 
     .vue-command__query__prompt,
@@ -248,8 +252,6 @@ defineExpose({
 .vue-command {
   .vue-command__query {
     .vue-command__query__input {
-      background: none;
-
       &::placeholder {
         color: rgba(255, 255, 255, 0.5);
       }
@@ -260,8 +262,6 @@ defineExpose({
 .vue-command--invert {
   .vue-command__query--invert {
     .vue-command__query__input--invert {
-      background: none;
-
       &::placeholder {
         color: rgba(0, 0, 0, 0.5);
       }

src/hosted/App.vue

@@ -1,22 +1,16 @@
 <template>
   <main>
-    <h1><a href="https://github.com/ndabAP/vue-command">vue-command</a></h1>
-    <p>A fully working, most feature-rich Vue.js terminal emulator. Now with Vue.js 3 support!</p>
-
-    <vue-command
-      v-model:history="history"
-      v-model:query="query"
-      :commands="commands"
-      :prompt="prompt"
-      help-text="Type in help"
-      :invert="invert"
-      show-help>
-    </vue-command>
-    <pre>
-      <code>
-$ npm install --save vue-command
-      </code>
-    </pre>
+    <div>
+      <vue-command
+        v-model:history="history"
+        v-model:query="query"
+        :commands="commands"
+        :prompt="prompt"
+        help-text="Type in help"
+        :invert="invert"
+        show-help>
+      </vue-command>
+    </div>
   </main>
 </template>
 
@@ -33,7 +27,7 @@ import {
 import NanoEditor from '@/hosted/NanoEditor.vue'
 import ChuckNorris from '@/hosted/ChuckNorris.vue'
 
-const PROMPT = '~$'
+const PROMPT = 'neil@moon~$'
 
 export default {
   components: {
@@ -94,59 +88,66 @@ export default {
 
 <style lang="scss">
 body {
-  font-family: sans-serif;
-  display: grid;
-  place-items: center;
-  margin: 0;
+  color: #fff;
+  background: #000;
 
   main {
-    max-width: 400px;
-
-    .vue-command,
-    .vue-command--invert {
-      ::-webkit-scrollbar {
-        width: 6px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    div {
+
+      .vue-command,
+      .vue-command--invert {
+        width: 450px;
+
+        ::-webkit-scrollbar {
+          width: 6px;
+        }
+
+        .vue-command__bar,
+        .vue-command__bar--invert {
+          border-top-right-radius: 5px;
+          border-top-left-radius: 5px;
+        }
+
+        .vue-command__history,
+        .vue-command__history--invert {
+          height: 260px;
+          border-bottom-right-radius: 5px;
+          border-bottom-left-radius: 5px;
+        }
       }
 
-      .vue-command__bar,
-      .vue-command__bar--invert {
-        border-top-right-radius: 5px;
-        border-top-left-radius: 5px;
-      }
+      .vue-command {
+        ::-webkit-scrollbar-track {
+          background: #252525;
+        }
 
-      .vue-command__history,
-      .vue-command__history--invert {
-        height: 260px;
-        border-bottom-right-radius: 5px;
-        border-bottom-left-radius: 5px;
-      }
-    }
+        ::-webkit-scrollbar-thumb {
+          background: #f1f1f1;
+        }
 
-    .vue-command {
-      ::-webkit-scrollbar-track {
-        background: #252525;
+        ::-webkit-scrollbar-thumb:hover {
+          background: #333;
+        }
       }
 
-      ::-webkit-scrollbar-thumb {
-        background: #f1f1f1;
-      }
+      .vue-command--invert {
+        ::-webkit-scrollbar-track {
+          background: #dadada;
+        }
 
-      ::-webkit-scrollbar-thumb:hover {
-        background: #333;
-      }
-    }
-
-    .vue-command--invert {
-      ::-webkit-scrollbar-track {
-        background: #dadada;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        background: #0e0e0e;
-      }
+        ::-webkit-scrollbar-thumb {
+          background: #0e0e0e;
+        }
 
-      ::-webkit-scrollbar-thumb:hover {
-        background: #cccccc;
+        ::-webkit-scrollbar-thumb:hover {
+          background: #cccccc;
+        }
       }
     }
   }