feat(ui): terminal themes

bleenco · Aug 8, 2017 · 9fd48a3 · 9fd48a3
1 parent 89fbf3f
commit 9fd48a3
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 136 deletions.
diff --git a/src/app/components/app-terminal/app-terminal.component.html b/src/app/components/app-terminal/app-terminal.component.html
@@ -1 +1 @@
-<pre class="window-terminal-container dracula-ansi-theme" [ngClass]="{ large: options.size === 'large' }" slimScroll [options]="scrollOptions" [scrollEvents]="scrollEvents"></pre>
+<pre class="window-terminal-container batman-ansi-theme" [ngClass]="{ large: options.size === 'large' }" slimScroll [options]="scrollOptions" [scrollEvents]="scrollEvents"></pre>
diff --git a/src/app/styles/dracula-ansi.scss b/src/app/styles/dracula-ansi.scss
diff --git a/src/app/styles/terminal.sass b/src/app/styles/terminal.sass
@@ -1,20 +1,20 @@
-@import 'dracula-ansi'
+@import 'terminal/material-dark-ansi'
+@import 'terminal/batman-ansi'
 
 .window-terminal-container
   position: relative
   display: block
-  color: #f8f8f2
+  color: #e5e5e5
   margin: 0
   font-family: monaco, monospace
   font-size: 12px
   padding: 0
   height: 400px
-  background: darken(#282a36, 10)
+  background: #111111
   border-radius: 4px
   box-shadow: 1px 2px 10px rgba($background, 0.7)
   border: 1px solid $divider
-  overflow-x: hidden
-  overflow-y: scroll
+  overflow: hidden
 
   &.large
     height: 700px
diff --git a/src/app/styles/terminal/batman-ansi.scss b/src/app/styles/terminal/batman-ansi.scss
@@ -0,0 +1,66 @@
+.batman-ansi-theme {
+
+  .ansi-black-fg, .ansi-black-bg {
+    color: #1b1d1e;
+  }
+
+  .ansi-red-fg, .ansi-red-bg {
+    color: #e6dc44;
+  }
+
+  .ansi-green-fg, .ansi-green-bg {
+    color: #c8be46;
+  }
+
+  .ansi-yellow-fg, .ansi-yellow-bg {
+    color: #f4fd22;
+  }
+
+  .ansi-blue-fg, .ansi-blue-bg {
+    color: #737174;
+  }
+
+  .ansi-magenta-fg, .ansi-magenta-bg {
+    color: #747271;
+  }
+
+  .ansi-cyan-fg, .ansi-cyan-bg {
+    color: #62605f;
+  }
+
+  .ansi-white-fg, .ansi-white-bg {
+    color: #c6c5bf;
+  }
+
+  .ansi-bright-black-fg, .ansi-bright-black-bg {
+    color: #505354;
+  }
+
+  .ansi-bright-red-fg, .ansi-bright-red-bg {
+    color: #fff78e;
+  }
+
+  .ansi-bright-green-fg, .ansi-bright-green-bg {
+    color: #fff27d;
+  }
+
+  .ansi-bright-yellow-fg, .ansi-bright-yellow-bg {
+    color: #feed6c;
+  }
+
+  .ansi-bright-blue-fg, .ansi-bright-blue-bg {
+    color: #919495;
+  }
+
+  .ansi-bright-magenta-fg, .ansi-bright-magenta-bg {
+    color: #9a9a9d;
+  }
+
+  .ansi-bright-cyan-fg, .ansi-bright-cyan-bg {
+    color: #a3a3a6;
+  }
+
+  .ansi-bright-white-fg, .ansi-bright-white-bg {
+    color: #dadbd6;
+  }
+}
diff --git a/src/app/styles/terminal/material-dark-ansi.scss b/src/app/styles/terminal/material-dark-ansi.scss
@@ -0,0 +1,66 @@
+.material-dark-ansi-theme {
+
+  .ansi-black-fg, .ansi-black-bg {
+    color: #212121;
+  }
+
+  .ansi-red-fg, .ansi-red-bg {
+    color: #b7141f;
+  }
+
+  .ansi-green-fg, .ansi-green-bg {
+    color: #457b24;
+  }
+
+  .ansi-yellow-fg, .ansi-yellow-bg {
+    color: #f6981e;
+  }
+
+  .ansi-blue-fg, .ansi-blue-bg {
+    color: #134eb2;
+  }
+
+  .ansi-magenta-fg, .ansi-magenta-bg {
+    color: #560088;
+  }
+
+  .ansi-cyan-fg, .ansi-cyan-bg {
+    color: #0e717c;
+  }
+
+  .ansi-white-fg, .ansi-white-bg {
+    color: #efefef;
+  }
+
+  .ansi-bright-black-fg, .ansi-bright-black-bg {
+    color: #424242;
+  }
+
+  .ansi-bright-red-fg, .ansi-bright-red-bg {
+    color: #e83b3f;
+  }
+
+  .ansi-bright-green-fg, .ansi-bright-green-bg {
+    color: #7aba3a;
+  }
+
+  .ansi-bright-yellow-fg, .ansi-bright-yellow-bg {
+    color: #ffea2e;
+  }
+
+  .ansi-bright-blue-fg, .ansi-bright-blue-bg {
+    color: #54a4f3;
+  }
+
+  .ansi-bright-magenta-fg, .ansi-bright-magenta-bg {
+    color: #aa4dbc;
+  }
+
+  .ansi-bright-cyan-fg, .ansi-bright-cyan-bg {
+    color: #26bbd1;
+  }
+
+  .ansi-bright-white-fg, .ansi-bright-white-bg {
+    color: #d9d9d9;
+  }
+}