コマンドライン

resources/assets/js/app.js

@@ -21,5 +21,5 @@ Vue.component('bash', bash);
 // Vue.component('example', require('./components/Example.vue'));
 
 const app = new Vue({
-    el: '#app'
+  el: '#app'
 });

resources/assets/js/components/cli.vue

@@ -4,30 +4,17 @@
       <span class="regBold">
         {{ user }}@{{ host }}:<span class="pathText">{{ pwd }}</span>
       </span>$
-      <span id="box">&#9646;</span>
       <span v-for="(l, i) in line" :key="`l-${i}`">
-        <span v-if="l.active">
-          <input
-            :key="i"
-            autofocus
-            spellcheck="false"
-            type="text"
-            class="inputField"
-            v-model="l.command"
-            @keyup.enter="exec(l.command, i)"
-          />
-        </span>
-        <span v-else>
-          <input
-            :key="i"
-            disabled
-            spellcheck="false"
-            type="text"
-            class="inputField"
-            v-model="l.command"
-            @keyup.enter="exec(l.command, i)"
-          />
-        </span>
+        <input
+          :key="i"
+          :autofocus="l.active"
+          :disabled="!l.active"
+          spellcheck="false"
+          type="text"
+          class="inputField"
+          v-model="l.command"
+          @keyup.enter="exec(l.command, i)"
+        />
         <br />
       </span>
       <span v-for="(res, d) in result" :key="`res-${d}`">
@@ -35,54 +22,29 @@
         {{ res.text }}
         <span v-if="res.field">
           <span v-if="res.password">
-            <span v-if="res.active">
-              <input
-                :key="d"
-                password="password"
-                autofocus
-                spellcheck="false"
-                type="text"
-                class="inputField"
-                v-model="res.command"
-                @keyup.enter="execContinue(res.command, d)"
-              />
-            </span>
-            <span v-else>
-              <input
-                :key="d"
-                password="password"
-                disabled
-                spellcheck="false"
-                type="text"
-                class="inputField"
-                v-model="res.command"
-                @keyup.enter="execContinue(res.command, d)"
-              />
-            </span>
+            <input
+              :key="d"
+              password="password"
+              :autofocus="res.active"
+              :disabled="!res.active"
+              spellcheck="false"
+              type="text"
+              class="inputField"
+              v-model="res.command"
+              @keyup.enter="execContinue(res.command, d)"
+            />
           </span>
           <span v-else>
-            <span v-if="res.active">
-              <input
-                :key="d"
-                spellcheck="false"
-                autofocus
-                type="text"
-                class="inputField"
-                v-model="res.command"
-                @keyup.enter="execContinue(res.command, d)"
-              />
-            </span>
-            <span v-else>
-              <input
-                :key="d"
-                disabled
-                spellcheck="false"
-                type="text"
-                class="inputField"
-                v-model="res.command"
-                @keyup.enter="execContinue(res.command, d)"
-              />
-            </span>
+            <input
+              :key="d"
+              spellcheck="false"
+              :autofocus="res.active"
+              :disabled="!res.active"
+              type="text"
+              class="inputField"
+              v-model="res.command"
+              @keyup.enter="execContinue(res.command, d)"
+            />
           </span>
           <br />
         </span>
@@ -199,17 +161,9 @@
 </script>
 
 <style scoped>
-  @keyframes blink {
-    0%   { opacity: 0; }
-    50%  { opacity: 1; }
-    100% { opacity: 0; }
-  }
-  #box {
-    animation: blink 1s infinite;
-  }
   .inputField {
-    background-color: #000000;
-    color: #73D216;
+    background-color: #31363b;
+    color: #2ecc71;
     border-width: 0px;
     font-family: monospace;
     font-size: large;
@@ -220,10 +174,10 @@
     font-weight: bold;
   }
   .regText {
-    color: #73D216;
+    color: #2ecc71;
   }
   .pathText {
-    color: #5454FF;
+    color: #3498db;
   }
   h1, h2 {
     font-weight: normal;
@@ -237,6 +191,6 @@
     margin: 0 10px;
   }
   a {
-    color: #42b983;
+    color: #1cdc9a;
   }
 </style>

resources/assets/sass/_variables.scss

@@ -1,25 +1,23 @@
 
 // Body
-//$body-bg: #f5f8fa;
-$body-bg: #000;
+$body-bg: #31363b;
 
 // Typography
 $font-family-sans-serif: "Raleway", sans-serif;
 $font-size-base: 1rem;
 $line-height-base: 1.6;
 
-
 body{
-    background-color: #000000;
-    color: #ffffff;
-  }
-  #app {
-    font-family: monospace;
-    font-size: large;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: left;
-    margin-top: 20px;
-    margin-left: 20px;
-  }
-  
+  background-color: #31363b;
+  color: #fcfcfc !important;
+}
+#app {
+  font-family: monospace;
+  font-size: large;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: left;
+  margin-top: 20px;
+  margin-left: 20px;
+}
+

resources/assets/sass/app.scss

@@ -8,7 +8,3 @@
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
 
-.navbar-laravel {
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
-}

resources/views/layouts/app.blade.php

@@ -11,10 +11,6 @@
   <title>{{ config('app.name', 'Laravel') }}</title>
 
   <style>
-    body{
-      background-color: #000000 !important;
-      color: #ffffff !important;
-    }
     #app {
       font-family: monospace;
       font-size: large;