Use GitLab UI when render CI

30 files changed, 1182 insertions, 1337 deletions

diff --git a/app/assets/javascripts/ci/application.js.coffee b/app/assets/javascripts/ci/application.js.coffee
index c2f7bfe9776..05aa0f366bb 100644
--- a/app/assets/javascripts/ci/application.js.coffee
+++ b/app/assets/javascripts/ci/application.js.coffee
@@ -10,20 +10,10 @@
 # WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
 # GO AFTER THE REQUIRES BELOW.
 #
-#= require jquery
-#= require bootstrap
-#= require jquery_ujs
-#= require turbolinks
-#= require jquery.turbolinks
-#= require jquery.endless-scroll
 #= require pager
-#= require nprogress
-#= require nprogress-turbolinks
 #= require jquery_nested_form
 #= require_tree .
 #
-#
-
 $(document).on 'click', '.edit-runner-link', (event) ->
   event.preventDefault()
 
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 46f7feddf8d..d9ede637944 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -61,3 +61,9 @@
  * Styles for JS behaviors.
  */
 @import "behaviors.scss";
+
+/**
+ * CI specific styles:
+ */
+@import "ci/**/*";
+
diff --git a/app/assets/stylesheets/ci/application.scss b/app/assets/stylesheets/ci/application.scss
deleted file mode 100644
index 2f2928f7054..00000000000
--- a/app/assets/stylesheets/ci/application.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the top of the
- * compiled file, but it's generally better to create a new file per style scope.
- *
- *= require_self
- */
-
-@import "../base/fonts";
-@import "../base/variables";
-@import "../base/mixins";
-@import "../base/layout";
-@import "../base/gl_variables";
-@import "../base/gl_bootstrap";
-
-/**
- * Customized Twitter bootstrap
- */
-@import '../base/gl_variables';
-@import '../base/gl_bootstrap';
-
-
-/**
- * Font icons
- *
- */
-@import "font-awesome";
-
-/**
- * Generic css (forms, nav etc):
- */
-@import "../generic/**/*";
-
-/**
- * Page specific styles (issues, projects etc):
- */
-
-@import "xterm";
-@import "sections/*";
-
-/*
- * NProgress
- */
-$nprogress-color: #9BC;
-@import 'nprogress';
-@import 'nprogress-bootstrap';
-
-body {
-  padding-top: 0 !important;
-
-  a {
-    color: #3084bb;
-  }
-}
diff --git a/app/assets/stylesheets/ci/builds.scss b/app/assets/stylesheets/ci/builds.scss
new file mode 100644
index 00000000000..a11a935b54d
--- /dev/null
+++ b/app/assets/stylesheets/ci/builds.scss
@@ -0,0 +1,70 @@
+.ci-body {
+  pre.trace {
+    background: #111111;
+    color: #fff;
+    font-family: $monospace_font;
+    white-space: pre;
+    white-space: pre-wrap;       /* css-3 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+    overflow: auto;
+    overflow-y: hidden;
+    font-size: 12px;
+
+    .fa-refresh {
+      font-size: 24px;
+      margin-left: 20px;
+    }
+  }
+
+  .autoscroll-container {
+    position: fixed;
+    bottom: 10px;
+    right: 20px;
+    z-index: 100;
+  }
+
+  .scroll-controls {
+    position: fixed;
+    bottom: 10px;
+    left: 250px;
+    z-index: 100;
+
+    a {
+      display: block;
+      margin-bottom: 5px;
+    }
+  }
+
+  .page-sidebar-collapsed {
+    .scroll-controls {
+      left: 70px;
+    }
+  }
+
+  .build-widget {
+    padding: 10px;
+    background: $background-color;
+    margin-bottom: 20px;
+    border-radius: 4px;
+
+    .title {
+      margin-top: 0;
+      color: #666;
+      line-height: 1.5;
+    }
+    .attr-name {
+      color: #777;
+    }
+  }
+
+  .alert-disabled {
+    background: $background-color;
+
+    a {
+      color: #3084bb !important;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/ci/lint.scss b/app/assets/stylesheets/ci/lint.scss
new file mode 100644
index 00000000000..6d2bd33b28b
--- /dev/null
+++ b/app/assets/stylesheets/ci/lint.scss
@@ -0,0 +1,10 @@
+.ci-body {
+  .incorrect-syntax{
+    font-size: 19px;
+    color: red;
+  }
+  .correct-syntax{
+    font-size: 19px;
+    color: #47a447;
+  }
+}
diff --git a/app/assets/stylesheets/ci/projects.scss b/app/assets/stylesheets/ci/projects.scss
new file mode 100644
index 00000000000..167df54453a
--- /dev/null
+++ b/app/assets/stylesheets/ci/projects.scss
@@ -0,0 +1,50 @@
+.ci-body {
+  .project-title {
+    margin: 0;
+    color: #444;
+    font-size: 20px;
+    line-height: 1.5;
+  }
+
+  .builds {
+    @extend .table;
+
+    .build {
+      &.alert{
+        margin-bottom: 6px;
+      }
+    }
+  }
+
+  .projects-table {
+    td {
+      vertical-align: middle !important;
+    }
+  }
+
+  .commit-info {
+    font-size: 14px;
+
+    .attr-name {
+      font-weight: 300;
+      color: #666;
+      margin-right: 5px;
+    }
+
+    pre.commit-message {
+      font-size: 14px;
+      background: none;
+      padding: 0;
+      margin: 0;
+      border: none;
+      margin: 20px 0;
+      border-bottom: 1px solid #EEE;
+      padding-bottom: 20px;
+      border-radius: 0;
+    }
+  }
+
+  .loading{
+    font-size: 20px;
+  }
+}
diff --git a/app/assets/stylesheets/ci/runners.scss b/app/assets/stylesheets/ci/runners.scss
new file mode 100644
index 00000000000..2b15ab83129
--- /dev/null
+++ b/app/assets/stylesheets/ci/runners.scss
@@ -0,0 +1,36 @@
+.ci-body {
+  .runner-state {
+    padding: 6px 12px;
+    margin-right: 10px;
+    color: #FFF;
+
+    &.runner-state-shared {
+      background: #32b186;
+    }
+    &.runner-state-specific {
+      background: #3498db;
+    }
+  }
+
+  .runner-status-online {
+    color: green;
+  }
+
+  .runner-status-offline {
+    color: gray;
+  }
+
+  .runner-status-paused {
+    color: red;
+  }
+
+  .runner {
+    .btn {
+      padding: 1px 6px;
+    }
+
+    h4 {
+      font-weight: normal;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/ci/sections/builds.scss b/app/assets/stylesheets/ci/sections/builds.scss
deleted file mode 100644
index 600919635d0..00000000000
--- a/app/assets/stylesheets/ci/sections/builds.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-pre.trace {
-  background: #111111;
-  color: #fff;
-  font-family: $monospace_font;
-  white-space: pre;
-  white-space: pre-wrap;       /* css-3 */
-  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
-  overflow: auto;
-  overflow-y: hidden;
-  font-size: 12px;
-
-  .fa-refresh {
-    font-size: 24px;
-    margin-left: 20px;
-  }
-}
-
-.autoscroll-container {
-  position: fixed;
-  bottom: 10px;
-  right: 20px;
-  z-index: 100;
-}
-
-.scroll-controls {
-  position: fixed;
-  bottom: 10px;
-  left: 20px;
-  z-index: 100;
-
-  a {
-    display: block;
-    margin-bottom: 5px;
-  }
-}
-
-.build-widget {
-  padding: 10px;
-  background: #f4f4f4;
-  margin-bottom: 20px;
-  border-radius: 4px;
-
-  .title {
-    margin-top: 0;
-    color: #666;
-    line-height: 1.5;
-  }
-  .attr-name {
-    color: #777;
-  }
-}
-
-.alert-disabled {
-  background: #EEE;
-
-  a {
-    color: #3084bb !important;
-  }
-}
diff --git a/app/assets/stylesheets/ci/sections/lint.scss b/app/assets/stylesheets/ci/sections/lint.scss
deleted file mode 100644
index 7191b5d47aa..00000000000
--- a/app/assets/stylesheets/ci/sections/lint.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.incorrect-syntax{
-  font-size: 19px;
-  color: red;
-}
-.correct-syntax{
-  font-size: 19px;
-  color: #47a447;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/ci/sections/login.scss b/app/assets/stylesheets/ci/sections/login.scss
deleted file mode 100644
index 47e453ec8d2..00000000000
--- a/app/assets/stylesheets/ci/sections/login.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.login-block {
-  padding: 15px;
-  margin: 0 auto;
-  text-align: center;
-
-  p {
-    font-size: 15px;
-  }
-
-  .btn-login {
-    padding: 18px 32px;
-  }
-}
diff --git a/app/assets/stylesheets/ci/sections/navbar.scss b/app/assets/stylesheets/ci/sections/navbar.scss
deleted file mode 100644
index 80d93087e66..00000000000
--- a/app/assets/stylesheets/ci/sections/navbar.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.navbar-static-top {
-  margin-bottom: 20px;
-}
-
-.navbar-ci {
-  background: #224466;
-
-  .navbar-brand {
-    color: #fff;
-
-    &:hover {
-      color: #fff;
-    }
-  }
-  .brand,
-  .nav > li > a {
-    color: #fff;
-
-    &:hover, &:focus, &:active {
-      background: none;
-    }
-  }
-
-  .profile-holder {
-    position: relative;
-
-    img {
-      position: absolute;
-      top: -8px;
-      width: 32px;
-      @include border-radius(32px);
-    }
-
-    span {
-      margin-left: 42px;
-    }
-  }
-
-  .btn-login {
-    padding: 7px 22px;
-    margin-top: 7px;
-    &:hover, &:active, &:focus {
-      background: #018865 !important;
-    }
-  }
-}
-
-.turbolink-spinner {
-  position: absolute;
-  top: 11px;
-  left: 50%;
-  color: #FFF;
-  font-size: 20px;
-}
diff --git a/app/assets/stylesheets/ci/sections/projects.scss b/app/assets/stylesheets/ci/sections/projects.scss
deleted file mode 100644
index 84ee1399bff..00000000000
--- a/app/assets/stylesheets/ci/sections/projects.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.project-title {
-  margin: 0;
-  color: #444;
-  font-size: 20px;
-  line-height: 1.5;
-}
-
-.builds {
-  @extend .table;
-
-  .build {
-    &.alert{
-      margin-bottom: 6px;
-    }
-  }
-}
-
-.projects-table {
-  td {
-    vertical-align: middle !important;
-  }
-}
-
-.commit-info {
-  font-size: 14px;
-
-  .attr-name {
-    font-weight: 300;
-    color: #666;
-    margin-right: 5px;
-  }
-
-  pre.commit-message {
-    font-size: 14px;
-    background: none;
-    padding: 0;
-    margin: 0;
-    border: none;
-    margin: 20px 0;
-    border-bottom: 1px solid #EEE;
-    padding-bottom: 20px;
-    border-radius: 0;
-  }
-}
-
-.search{
-  width: 300px;
-
-  .search-input{
-    height: 35px;
-  }
-
-  form{
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-.loading{
-  font-size: 20px;
-}
diff --git a/app/assets/stylesheets/ci/sections/runners.scss b/app/assets/stylesheets/ci/sections/runners.scss
deleted file mode 100644
index a9111a7388f..00000000000
--- a/app/assets/stylesheets/ci/sections/runners.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.runner-state {
-  padding: 6px 12px;
-  margin-right: 10px;
-  color: #FFF;
-
-  &.runner-state-shared {
-    background: #32b186;
-  }
-  &.runner-state-specific {
-    background: #3498db;
-  }
-}
-
-.runner-status-online {
-  color: green;
-}
-
-.runner-status-offline {
-  color: gray;
-}
-
-.runner-status-paused {
-  color: red;
-}
-
-.runner {
-  .btn {
-    padding: 1px 6px;
-  }
-
-  h4 {
-    font-weight: normal;
-  }
-}
diff --git a/app/assets/stylesheets/ci/sections/setup.scss b/app/assets/stylesheets/ci/sections/setup.scss
deleted file mode 100644
index 242614616d1..00000000000
--- a/app/assets/stylesheets/ci/sections/setup.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.welcome-block {
-  margin-top: 50px;
-  color: #555;
-  font-size: 16px;
-  line-height: 1.5;
-
-  h1, h2, h3 {
-    font-weight: bold;
-    margin-bottom: 20px;
-  }
-}
diff --git a/app/assets/stylesheets/ci/xterm.scss b/app/assets/stylesheets/ci/xterm.scss
index 460a6bb2024..532dede0b23 100644
--- a/app/assets/stylesheets/ci/xterm.scss
+++ b/app/assets/stylesheets/ci/xterm.scss
@@ -1,904 +1,906 @@
-// color codes are based on http://en.wikipedia.org/wiki/File:Xterm_256color_chart.svg
-// see also: https://gist.github.com/jasonm23/2868981
+.ci-body {
+  // color codes are based on http://en.wikipedia.org/wiki/File:Xterm_256color_chart.svg
+  // see also: https://gist.github.com/jasonm23/2868981
 
-$black: #000000;
-$red: #cd0000;
-$green: #00cd00;
-$yellow: #cdcd00;
-$blue: #0000ee;   // according to wikipedia, this is the xterm standard
-//$blue: #1e90ff; // this is used by all the terminals I tried (when configured with the xterm color profile)
-$magenta: #cd00cd;
-$cyan: #00cdcd;
-$white: #e5e5e5;
-$l-black: #7f7f7f;
-$l-red: #ff0000;
-$l-green: #00ff00;
-$l-yellow: #ffff00;
-$l-blue: #5c5cff;
-$l-magenta: #ff00ff;
-$l-cyan: #00ffff;
-$l-white: #ffffff;
+  $black: #000000;
+  $red: #cd0000;
+  $green: #00cd00;
+  $yellow: #cdcd00;
+  $blue: #0000ee;   // according to wikipedia, this is the xterm standard
+  //$blue: #1e90ff; // this is used by all the terminals I tried (when configured with the xterm color profile)
+  $magenta: #cd00cd;
+  $cyan: #00cdcd;
+  $white: #e5e5e5;
+  $l-black: #7f7f7f;
+  $l-red: #ff0000;
+  $l-green: #00ff00;
+  $l-yellow: #ffff00;
+  $l-blue: #5c5cff;
+  $l-magenta: #ff00ff;
+  $l-cyan: #00ffff;
+  $l-white: #ffffff;
 
-.term-bold {
-    font-weight: bold;
-}
-.term-italic {
-    font-style: italic;
-}
-.term-conceal {
-    visibility: hidden;
-}
-.term-underline {
-    text-decoration: underline;
-}
-.term-cross {
-    text-decoration: line-through;
-}
+  .term-bold {
+      font-weight: bold;
+  }
+  .term-italic {
+      font-style: italic;
+  }
+  .term-conceal {
+      visibility: hidden;
+  }
+  .term-underline {
+      text-decoration: underline;
+  }
+  .term-cross {
+      text-decoration: line-through;
+  }
 
-.term-fg-black {
-  color: $black;
-}
-.term-fg-red {
-  color: $red;
-}
-.term-fg-green {
-  color: $green;
-}
-.term-fg-yellow {
-  color: $yellow;
-}
-.term-fg-blue {
-  color: $blue;
-}
-.term-fg-magenta {
-  color: $magenta;
-}
-.term-fg-cyan {
-  color: $cyan;
-}
-.term-fg-white {
-  color: $white;
-}
-.term-fg-l-black {
-  color: $l-black;
-}
-.term-fg-l-red {
-  color: $l-red;
-}
-.term-fg-l-green {
-  color: $l-green;
-}
-.term-fg-l-yellow {
-  color: $l-yellow;
-}
-.term-fg-l-blue {
-  color: $l-blue;
-}
-.term-fg-l-magenta {
-  color: $l-magenta;
-}
-.term-fg-l-cyan {
-  color: $l-cyan;
-}
-.term-fg-l-white {
-  color: $l-white;
-}
+  .term-fg-black {
+    color: $black;
+  }
+  .term-fg-red {
+    color: $red;
+  }
+  .term-fg-green {
+    color: $green;
+  }
+  .term-fg-yellow {
+    color: $yellow;
+  }
+  .term-fg-blue {
+    color: $blue;
+  }
+  .term-fg-magenta {
+    color: $magenta;
+  }
+  .term-fg-cyan {
+    color: $cyan;
+  }
+  .term-fg-white {
+    color: $white;
+  }
+  .term-fg-l-black {
+    color: $l-black;
+  }
+  .term-fg-l-red {
+    color: $l-red;
+  }
+  .term-fg-l-green {
+    color: $l-green;
+  }
+  .term-fg-l-yellow {
+    color: $l-yellow;
+  }
+  .term-fg-l-blue {
+    color: $l-blue;
+  }
+  .term-fg-l-magenta {
+    color: $l-magenta;
+  }
+  .term-fg-l-cyan {
+    color: $l-cyan;
+  }
+  .term-fg-l-white {
+    color: $l-white;
+  }
 
-.term-bg-black {
-  background-color: $black;
-}
-.term-bg-red {
-  background-color: $red;
-}
-.term-bg-green {
-  background-color: $green;
-}
-.term-bg-yellow {
-  background-color: $yellow;
-}
-.term-bg-blue {
-  background-color: $blue;
-}
-.term-bg-magenta {
-  background-color: $magenta;
-}
-.term-bg-cyan {
-  background-color: $cyan;
-}
-.term-bg-white {
-  background-color: $white;
-}
-.term-bg-l-black {
-  background-color: $l-black;
-}
-.term-bg-l-red {
-  background-color: $l-red;
-}
-.term-bg-l-green {
-  background-color: $l-green;
-}
-.term-bg-l-yellow {
-  background-color: $l-yellow;
-}
-.term-bg-l-blue {
-  background-color: $l-blue;
-}
-.term-bg-l-magenta {
-  background-color: $l-magenta;
-}
-.term-bg-l-cyan {
-  background-color: $l-cyan;
-}
-.term-bg-l-white {
-  background-color: $l-white;
-}
+  .term-bg-black {
+    background-color: $black;
+  }
+  .term-bg-red {
+    background-color: $red;
+  }
+  .term-bg-green {
+    background-color: $green;
+  }
+  .term-bg-yellow {
+    background-color: $yellow;
+  }
+  .term-bg-blue {
+    background-color: $blue;
+  }
+  .term-bg-magenta {
+    background-color: $magenta;
+  }
+  .term-bg-cyan {
+    background-color: $cyan;
+  }
+  .term-bg-white {
+    background-color: $white;
+  }
+  .term-bg-l-black {
+    background-color: $l-black;
+  }
+  .term-bg-l-red {
+    background-color: $l-red;
+  }
+  .term-bg-l-green {
+    background-color: $l-green;
+  }
+  .term-bg-l-yellow {
+    background-color: $l-yellow;
+  }
+  .term-bg-l-blue {
+    background-color: $l-blue;
+  }
+  .term-bg-l-magenta {
+    background-color: $l-magenta;
+  }
+  .term-bg-l-cyan {
+    background-color: $l-cyan;
+  }
+  .term-bg-l-white {
+    background-color: $l-white;
+  }
 
 
-.xterm-fg-0 {
-  color: #000000;
-}
-.xterm-fg-1 {
-  color: #800000;
-}
-.xterm-fg-2 {
-  color: #008000;
-}
-.xterm-fg-3 {
-  color: #808000;
-}
-.xterm-fg-4 {
-  color: #000080;
-}
-.xterm-fg-5 {
-  color: #800080;
-}
-.xterm-fg-6 {
-  color: #008080;
-}
-.xterm-fg-7 {
-  color: #c0c0c0;
-}
-.xterm-fg-8 {
-  color: #808080;
-}
-.xterm-fg-9 {
-  color: #ff0000;
-}
-.xterm-fg-10 {
-  color: #00ff00;
-}
-.xterm-fg-11 {
-  color: #ffff00;
-}
-.xterm-fg-12 {
-  color: #0000ff;
-}
-.xterm-fg-13 {
-  color: #ff00ff;
-}
-.xterm-fg-14 {
-  color: #00ffff;
-}
-.xterm-fg-15 {
-  color: #ffffff;
-}
-.xterm-fg-16 {
-  color: #000000;
-}
-.xterm-fg-17 {
-  color: #00005f;
-}
-.xterm-fg-18 {
-  color: #000087;
-}
-.xterm-fg-19 {
-  color: #0000af;
-}
-.xterm-fg-20 {
-  color: #0000d7;
-}
-.xterm-fg-21 {
-  color: #0000ff;
-}
-.xterm-fg-22 {
-  color: #005f00;
-}
-.xterm-fg-23 {
-  color: #005f5f;
-}
-.xterm-fg-24 {
-  color: #005f87;
-}
-.xterm-fg-25 {
-  color: #005faf;
-}
-.xterm-fg-26 {
-  color: #005fd7;
-}
-.xterm-fg-27 {
-  color: #005fff;
-}
-.xterm-fg-28 {
-  color: #008700;
-}
-.xterm-fg-29 {
-  color: #00875f;
-}
-.xterm-fg-30 {
-  color: #008787;
-}
-.xterm-fg-31 {
-  color: #0087af;
-}
-.xterm-fg-32 {
-  color: #0087d7;
-}
-.xterm-fg-33 {
-  color: #0087ff;
-}
-.xterm-fg-34 {
-  color: #00af00;
-}
-.xterm-fg-35 {
-  color: #00af5f;
-}
-.xterm-fg-36 {
-  color: #00af87;
-}
-.xterm-fg-37 {
-  color: #00afaf;
-}
-.xterm-fg-38 {
-  color: #00afd7;
-}
-.xterm-fg-39 {
-  color: #00afff;
-}
-.xterm-fg-40 {
-  color: #00d700;
-}
-.xterm-fg-41 {
-  color: #00d75f;
-}
-.xterm-fg-42 {
-  color: #00d787;
-}
-.xterm-fg-43 {
-  color: #00d7af;
-}
-.xterm-fg-44 {
-  color: #00d7d7;
-}
-.xterm-fg-45 {
-  color: #00d7ff;
-}
-.xterm-fg-46 {
-  color: #00ff00;
-}
-.xterm-fg-47 {
-  color: #00ff5f;
-}
-.xterm-fg-48 {
-  color: #00ff87;
-}
-.xterm-fg-49 {
-  color: #00ffaf;
-}
-.xterm-fg-50 {
-  color: #00ffd7;
-}
-.xterm-fg-51 {
-  color: #00ffff;
-}
-.xterm-fg-52 {
-  color: #5f0000;
-}
-.xterm-fg-53 {
-  color: #5f005f;
-}
-.xterm-fg-54 {
-  color: #5f0087;
-}
-.xterm-fg-55 {
-  color: #5f00af;
-}
-.xterm-fg-56 {
-  color: #5f00d7;
-}
-.xterm-fg-57 {
-  color: #5f00ff;
-}
-.xterm-fg-58 {
-  color: #5f5f00;
-}
-.xterm-fg-59 {
-  color: #5f5f5f;
-}
-.xterm-fg-60 {
-  color: #5f5f87;
-}
-.xterm-fg-61 {
-  color: #5f5faf;
-}
-.xterm-fg-62 {
-  color: #5f5fd7;
-}
-.xterm-fg-63 {
-  color: #5f5fff;
-}
-.xterm-fg-64 {
-  color: #5f8700;
-}
-.xterm-fg-65 {
-  color: #5f875f;
-}
-.xterm-fg-66 {
-  color: #5f8787;
-}
-.xterm-fg-67 {
-  color: #5f87af;
-}
-.xterm-fg-68 {
-  color: #5f87d7;
-}
-.xterm-fg-69 {
-  color: #5f87ff;
-}
-.xterm-fg-70 {
-  color: #5faf00;
-}
-.xterm-fg-71 {
-  color: #5faf5f;
-}
-.xterm-fg-72 {
-  color: #5faf87;
-}
-.xterm-fg-73 {
-  color: #5fafaf;
-}
-.xterm-fg-74 {
-  color: #5fafd7;
-}
-.xterm-fg-75 {
-  color: #5fafff;
-}
-.xterm-fg-76 {
-  color: #5fd700;
-}
-.xterm-fg-77 {
-  color: #5fd75f;
-}
-.xterm-fg-78 {
-  color: #5fd787;
-}
-.xterm-fg-79 {
-  color: #5fd7af;
-}
-.xterm-fg-80 {
-  color: #5fd7d7;
-}
-.xterm-fg-81 {
-  color: #5fd7ff;
-}
-.xterm-fg-82 {
-  color: #5fff00;
-}
-.xterm-fg-83 {
-  color: #5fff5f;
-}
-.xterm-fg-84 {
-  color: #5fff87;
-}
-.xterm-fg-85 {
-  color: #5fffaf;
-}
-.xterm-fg-86 {
-  color: #5fffd7;
-}
-.xterm-fg-87 {
-  color: #5fffff;
-}
-.xterm-fg-88 {
-  color: #870000;
-}
-.xterm-fg-89 {
-  color: #87005f;
-}
-.xterm-fg-90 {
-  color: #870087;
-}
-.xterm-fg-91 {
-  color: #8700af;
-}
-.xterm-fg-92 {
-  color: #8700d7;
-}
-.xterm-fg-93 {
-  color: #8700ff;
-}
-.xterm-fg-94 {
-  color: #875f00;
-}
-.xterm-fg-95 {
-  color: #875f5f;
-}
-.xterm-fg-96 {
-  color: #875f87;
-}
-.xterm-fg-97 {
-  color: #875faf;
-}
-.xterm-fg-98 {
-  color: #875fd7;
-}
-.xterm-fg-99 {
-  color: #875fff;
-}
-.xterm-fg-100 {
-  color: #878700;
-}
-.xterm-fg-101 {
-  color: #87875f;
-}
-.xterm-fg-102 {
-  color: #878787;
-}
-.xterm-fg-103 {
-  color: #8787af;
-}
-.xterm-fg-104 {
-  color: #8787d7;
-}
-.xterm-fg-105 {
-  color: #8787ff;
-}
-.xterm-fg-106 {
-  color: #87af00;
-}
-.xterm-fg-107 {
-  color: #87af5f;
-}
-.xterm-fg-108 {
-  color: #87af87;
-}
-.xterm-fg-109 {
-  color: #87afaf;
-}
-.xterm-fg-110 {
-  color: #87afd7;
-}
-.xterm-fg-111 {
-  color: #87afff;
-}
-.xterm-fg-112 {
-  color: #87d700;
-}
-.xterm-fg-113 {
-  color: #87d75f;
-}
-.xterm-fg-114 {
-  color: #87d787;
-}
-.xterm-fg-115 {
-  color: #87d7af;
-}
-.xterm-fg-116 {
-  color: #87d7d7;
-}
-.xterm-fg-117 {
-  color: #87d7ff;
-}
-.xterm-fg-118 {
-  color: #87ff00;
-}
-.xterm-fg-119 {
-  color: #87ff5f;
-}
-.xterm-fg-120 {
-  color: #87ff87;
-}
-.xterm-fg-121 {
-  color: #87ffaf;
-}
-.xterm-fg-122 {
-  color: #87ffd7;
-}
-.xterm-fg-123 {
-  color: #87ffff;
-}
-.xterm-fg-124 {
-  color: #af0000;
-}
-.xterm-fg-125 {
-  color: #af005f;
-}
-.xterm-fg-126 {
-  color: #af0087;
-}
-.xterm-fg-127 {
-  color: #af00af;
-}
-.xterm-fg-128 {
-  color: #af00d7;
-}
-.xterm-fg-129 {
-  color: #af00ff;
-}
-.xterm-fg-130 {
-  color: #af5f00;
-}
-.xterm-fg-131 {
-  color: #af5f5f;
-}
-.xterm-fg-132 {
-  color: #af5f87;
-}
-.xterm-fg-133 {
-  color: #af5faf;
-}
-.xterm-fg-134 {
-  color: #af5fd7;
-}
-.xterm-fg-135 {
-  color: #af5fff;
-}
-.xterm-fg-136 {
-  color: #af8700;
-}
-.xterm-fg-137 {
-  color: #af875f;
-}
-.xterm-fg-138 {
-  color: #af8787;
-}
-.xterm-fg-139 {
-  color: #af87af;
-}
-.xterm-fg-140 {
-  color: #af87d7;
-}
-.xterm-fg-141 {
-  color: #af87ff;
-}
-.xterm-fg-142 {
-  color: #afaf00;
-}
-.xterm-fg-143 {
-  color: #afaf5f;
-}
-.xterm-fg-144 {
-  color: #afaf87;
-}
-.xterm-fg-145 {
-  color: #afafaf;
-}
-.xterm-fg-146 {
-  color: #afafd7;
-}
-.xterm-fg-147 {
-  color: #afafff;
-}
-.xterm-fg-148 {
-  color: #afd700;
-}
-.xterm-fg-149 {
-  color: #afd75f;
-}
-.xterm-fg-150 {
-  color: #afd787;
-}
-.xterm-fg-151 {
-  color: #afd7af;
-}
-.xterm-fg-152 {
-  color: #afd7d7;
-}
-.xterm-fg-153 {
-  color: #afd7ff;
-}
-.xterm-fg-154 {
-  color: #afff00;
-}
-.xterm-fg-155 {
-  color: #afff5f;
-}
-.xterm-fg-156 {
-  color: #afff87;
-}
-.xterm-fg-157 {
-  color: #afffaf;
-}
-.xterm-fg-158 {
-  color: #afffd7;
-}
-.xterm-fg-159 {
-  color: #afffff;
-}
-.xterm-fg-160 {
-  color: #d70000;
-}
-.xterm-fg-161 {
-  color: #d7005f;
-}
-.xterm-fg-162 {
-  color: #d70087;
-}
-.xterm-fg-163 {
-  color: #d700af;
-}
-.xterm-fg-164 {
-  color: #d700d7;
-}
-.xterm-fg-165 {
-  color: #d700ff;
-}
-.xterm-fg-166 {
-  color: #d75f00;
-}
-.xterm-fg-167 {
-  color: #d75f5f;
-}
-.xterm-fg-168 {
-  color: #d75f87;
-}
-.xterm-fg-169 {
-  color: #d75faf;
-}
-.xterm-fg-170 {
-  color: #d75fd7;
-}
-.xterm-fg-171 {
-  color: #d75fff;
-}
-.xterm-fg-172 {
-  color: #d78700;
-}
-.xterm-fg-173 {
-  color: #d7875f;
-}
-.xterm-fg-174 {
-  color: #d78787;
-}
-.xterm-fg-175 {
-  color: #d787af;
-}
-.xterm-fg-176 {
-  color: #d787d7;
-}
-.xterm-fg-177 {
-  color: #d787ff;
-}
-.xterm-fg-178 {
-  color: #d7af00;
-}
-.xterm-fg-179 {
-  color: #d7af5f;
-}
-.xterm-fg-180 {
-  color: #d7af87;
-}
-.xterm-fg-181 {
-  color: #d7afaf;
-}
-.xterm-fg-182 {
-  color: #d7afd7;
-}
-.xterm-fg-183 {
-  color: #d7afff;
-}
-.xterm-fg-184 {
-  color: #d7d700;
-}
-.xterm-fg-185 {
-  color: #d7d75f;
-}
-.xterm-fg-186 {
-  color: #d7d787;
-}
-.xterm-fg-187 {
-  color: #d7d7af;
-}
-.xterm-fg-188 {
-  color: #d7d7d7;
-}
-.xterm-fg-189 {
-  color: #d7d7ff;
-}
-.xterm-fg-190 {
-  color: #d7ff00;
-}
-.xterm-fg-191 {
-  color: #d7ff5f;
-}
-.xterm-fg-192 {
-  color: #d7ff87;
-}
-.xterm-fg-193 {
-  color: #d7ffaf;
-}
-.xterm-fg-194 {
-  color: #d7ffd7;
-}
-.xterm-fg-195 {
-  color: #d7ffff;
-}
-.xterm-fg-196 {
-  color: #ff0000;
-}
-.xterm-fg-197 {
-  color: #ff005f;
-}
-.xterm-fg-198 {
-  color: #ff0087;
-}
-.xterm-fg-199 {
-  color: #ff00af;
-}
-.xterm-fg-200 {
-  color: #ff00d7;
-}
-.xterm-fg-201 {
-  color: #ff00ff;
-}
-.xterm-fg-202 {
-  color: #ff5f00;
-}
-.xterm-fg-203 {
-  color: #ff5f5f;
-}
-.xterm-fg-204 {
-  color: #ff5f87;
-}
-.xterm-fg-205 {
-  color: #ff5faf;
-}
-.xterm-fg-206 {
-  color: #ff5fd7;
-}
-.xterm-fg-207 {
-  color: #ff5fff;
-}
-.xterm-fg-208 {
-  color: #ff8700;
-}
-.xterm-fg-209 {
-  color: #ff875f;
-}
-.xterm-fg-210 {
-  color: #ff8787;
-}
-.xterm-fg-211 {
-  color: #ff87af;
-}
-.xterm-fg-212 {
-  color: #ff87d7;
-}
-.xterm-fg-213 {
-  color: #ff87ff;
-}
-.xterm-fg-214 {
-  color: #ffaf00;
-}
-.xterm-fg-215 {
-  color: #ffaf5f;
-}
-.xterm-fg-216 {
-  color: #ffaf87;
-}
-.xterm-fg-217 {
-  color: #ffafaf;
-}
-.xterm-fg-218 {
-  color: #ffafd7;
-}
-.xterm-fg-219 {
-  color: #ffafff;
-}
-.xterm-fg-220 {
-  color: #ffd700;
-}
-.xterm-fg-221 {
-  color: #ffd75f;
-}
-.xterm-fg-222 {
-  color: #ffd787;
-}
-.xterm-fg-223 {
-  color: #ffd7af;
-}
-.xterm-fg-224 {
-  color: #ffd7d7;
-}
-.xterm-fg-225 {
-  color: #ffd7ff;
-}
-.xterm-fg-226 {
-  color: #ffff00;
-}
-.xterm-fg-227 {
-  color: #ffff5f;
-}
-.xterm-fg-228 {
-  color: #ffff87;
-}
-.xterm-fg-229 {
-  color: #ffffaf;
-}
-.xterm-fg-230 {
-  color: #ffffd7;
-}
-.xterm-fg-231 {
-  color: #ffffff;
-}
-.xterm-fg-232 {
-  color: #080808;
-}
-.xterm-fg-233 {
-  color: #121212;
-}
-.xterm-fg-234 {
-  color: #1c1c1c;
-}
-.xterm-fg-235 {
-  color: #262626;
-}
-.xterm-fg-236 {
-  color: #303030;
-}
-.xterm-fg-237 {
-  color: #3a3a3a;
-}
-.xterm-fg-238 {
-  color: #444444;
-}
-.xterm-fg-239 {
-  color: #4e4e4e;
-}
-.xterm-fg-240 {
-  color: #585858;
-}
-.xterm-fg-241 {
-  color: #626262;
-}
-.xterm-fg-242 {
-  color: #6c6c6c;
-}
-.xterm-fg-243 {
-  color: #767676;
-}
-.xterm-fg-244 {
-  color: #808080;
-}
-.xterm-fg-245 {
-  color: #8a8a8a;
-}
-.xterm-fg-246 {
-  color: #949494;
-}
-.xterm-fg-247 {
-  color: #9e9e9e;
-}
-.xterm-fg-248 {
-  color: #a8a8a8;
-}
-.xterm-fg-249 {
-  color: #b2b2b2;
-}
-.xterm-fg-250 {
-  color: #bcbcbc;
-}
-.xterm-fg-251 {
-  color: #c6c6c6;
-}
-.xterm-fg-252 {
-  color: #d0d0d0;
-}
-.xterm-fg-253 {
-  color: #dadada;
-}
-.xterm-fg-254 {
-  color: #e4e4e4;
-}
-.xterm-fg-255 {
-  color: #eeeeee;
+  .xterm-fg-0 {
+    color: #000000;
+  }
+  .xterm-fg-1 {
+    color: #800000;
+  }
+  .xterm-fg-2 {
+    color: #008000;
+  }
+  .xterm-fg-3 {
+    color: #808000;
+  }
+  .xterm-fg-4 {
+    color: #000080;
+  }
+  .xterm-fg-5 {
+    color: #800080;
+  }
+  .xterm-fg-6 {
+    color: #008080;
+  }
+  .xterm-fg-7 {
+    color: #c0c0c0;
+  }
+  .xterm-fg-8 {
+    color: #808080;
+  }
+  .xterm-fg-9 {
+    color: #ff0000;
+  }
+  .xterm-fg-10 {
+    color: #00ff00;
+  }
+  .xterm-fg-11 {
+    color: #ffff00;
+  }
+  .xterm-fg-12 {
+    color: #0000ff;
+  }
+  .xterm-fg-13 {
+    color: #ff00ff;
+  }
+  .xterm-fg-14 {
+    color: #00ffff;
+  }
+  .xterm-fg-15 {
+    color: #ffffff;
+  }
+  .xterm-fg-16 {
+    color: #000000;
+  }
+  .xterm-fg-17 {
+    color: #00005f;
+  }
+  .xterm-fg-18 {
+    color: #000087;
+  }
+  .xterm-fg-19 {
+    color: #0000af;
+  }
+  .xterm-fg-20 {
+    color: #0000d7;
+  }
+  .xterm-fg-21 {
+    color: #0000ff;
+  }
+  .xterm-fg-22 {
+    color: #005f00;
+  }
+  .xterm-fg-23 {
+    color: #005f5f;
+  }
+  .xterm-fg-24 {
+    color: #005f87;
+  }
+  .xterm-fg-25 {
+    color: #005faf;
+  }
+  .xterm-fg-26 {
+    color: #005fd7;
+  }
+  .xterm-fg-27 {
+    color: #005fff;
+  }
+  .xterm-fg-28 {
+    color: #008700;
+  }
+  .xterm-fg-29 {
+    color: #00875f;
+  }
+  .xterm-fg-30 {
+    color: #008787;
+  }
+  .xterm-fg-31 {
+    color: #0087af;
+  }
+  .xterm-fg-32 {
+    color: #0087d7;
+  }
+  .xterm-fg-33 {
+    color: #0087ff;
+  }
+  .xterm-fg-34 {
+    color: #00af00;
+  }
+  .xterm-fg-35 {
+    color: #00af5f;
+  }
+  .xterm-fg-36 {
+    color: #00af87;
+  }
+  .xterm-fg-37 {
+    color: #00afaf;
+  }
+  .xterm-fg-38 {
+    color: #00afd7;
+  }
+  .xterm-fg-39 {
+    color: #00afff;
+  }
+  .xterm-fg-40 {
+    color: #00d700;
+  }
+  .xterm-fg-41 {
+    color: #00d75f;
+  }
+  .xterm-fg-42 {
+    color: #00d787;
+  }
+  .xterm-fg-43 {
+    color: #00d7af;
+  }
+  .xterm-fg-44 {
+    color: #00d7d7;
+  }
+  .xterm-fg-45 {
+    color: #00d7ff;
+  }
+  .xterm-fg-46 {
+    color: #00ff00;
+  }
+  .xterm-fg-47 {
+    color: #00ff5f;
+  }
+  .xterm-fg-48 {
+    color: #00ff87;
+  }
+  .xterm-fg-49 {
+    color: #00ffaf;
+  }
+  .xterm-fg-50 {
+    color: #00ffd7;
+  }
+  .xterm-fg-51 {
+    color: #00ffff;
+  }
+  .xterm-fg-52 {
+    color: #5f0000;
+  }
+  .xterm-fg-53 {
+    color: #5f005f;
+  }
+  .xterm-fg-54 {
+    color: #5f0087;
+  }
+  .xterm-fg-55 {
+    color: #5f00af;
+  }
+  .xterm-fg-56 {
+    color: #5f00d7;
+  }
+  .xterm-fg-57 {
+    color: #5f00ff;
+  }
+  .xterm-fg-58 {
+    color: #5f5f00;
+  }
+  .xterm-fg-59 {
+    color: #5f5f5f;
+  }
+  .xterm-fg-60 {
+    color: #5f5f87;
+  }
+  .xterm-fg-61 {
+    color: #5f5faf;
+  }
+  .xterm-fg-62 {
+    color: #5f5fd7;
+  }
+  .xterm-fg-63 {
+    color: #5f5fff;
+  }
+  .xterm-fg-64 {
+    color: #5f8700;
+  }
+  .xterm-fg-65 {
+    color: #5f875f;
+  }
+  .xterm-fg-66 {
+    color: #5f8787;
+  }
+  .xterm-fg-67 {
+    color: #5f87af;
+  }
+  .xterm-fg-68 {
+    color: #5f87d7;
+  }
+  .xterm-fg-69 {
+    color: #5f87ff;
+  }
+  .xterm-fg-70 {
+    color: #5faf00;
+  }
+  .xterm-fg-71 {
+    color: #5faf5f;
+  }
+  .xterm-fg-72 {
+    color: #5faf87;
+  }
+  .xterm-fg-73 {
+    color: #5fafaf;
+  }
+  .xterm-fg-74 {
+    color: #5fafd7;
+  }
+  .xterm-fg-75 {
+    color: #5fafff;
+  }
+  .xterm-fg-76 {
+    color: #5fd700;
+  }
+  .xterm-fg-77 {
+    color: #5fd75f;
+  }
+  .xterm-fg-78 {
+    color: #5fd787;
+  }
+  .xterm-fg-79 {
+    color: #5fd7af;
+  }
+  .xterm-fg-80 {
+    color: #5fd7d7;
+  }
+  .xterm-fg-81 {
+    color: #5fd7ff;
+  }
+  .xterm-fg-82 {
+    color: #5fff00;
+  }
+  .xterm-fg-83 {
+    color: #5fff5f;
+  }
+  .xterm-fg-84 {
+    color: #5fff87;
+  }
+  .xterm-fg-85 {
+    color: #5fffaf;
+  }
+  .xterm-fg-86 {
+    color: #5fffd7;
+  }
+  .xterm-fg-87 {
+    color: #5fffff;
+  }
+  .xterm-fg-88 {
+    color: #870000;
+  }
+  .xterm-fg-89 {
+    color: #87005f;
+  }
+  .xterm-fg-90 {
+    color: #870087;
+  }
+  .xterm-fg-91 {
+    color: #8700af;
+  }
+  .xterm-fg-92 {
+    color: #8700d7;
+  }
+  .xterm-fg-93 {
+    color: #8700ff;
+  }
+  .xterm-fg-94 {
+    color: #875f00;
+  }
+  .xterm-fg-95 {
+    color: #875f5f;
+  }
+  .xterm-fg-96 {
+    color: #875f87;
+  }
+  .xterm-fg-97 {
+    color: #875faf;
+  }
+  .xterm-fg-98 {
+    color: #875fd7;
+  }
+  .xterm-fg-99 {
+    color: #875fff;
+  }
+  .xterm-fg-100 {
+    color: #878700;
+  }
+  .xterm-fg-101 {
+    color: #87875f;
+  }
+  .xterm-fg-102 {
+    color: #878787;
+  }
+  .xterm-fg-103 {
+    color: #8787af;
+  }
+  .xterm-fg-104 {
+    color: #8787d7;
+  }
+  .xterm-fg-105 {
+    color: #8787ff;
+  }
+  .xterm-fg-106 {
+    color: #87af00;
+  }
+  .xterm-fg-107 {
+    color: #87af5f;
+  }
+  .xterm-fg-108 {
+    color: #87af87;
+  }
+  .xterm-fg-109 {
+    color: #87afaf;
+  }
+  .xterm-fg-110 {
+    color: #87afd7;
+  }
+  .xterm-fg-111 {
+    color: #87afff;
+  }
+  .xterm-fg-112 {
+    color: #87d700;
+  }
+  .xterm-fg-113 {
+    color: #87d75f;
+  }
+  .xterm-fg-114 {
+    color: #87d787;
+  }
+  .xterm-fg-115 {
+    color: #87d7af;
+  }
+  .xterm-fg-116 {
+    color: #87d7d7;
+  }
+  .xterm-fg-117 {
+    color: #87d7ff;
+  }
+  .xterm-fg-118 {
+    color: #87ff00;
+  }
+  .xterm-fg-119 {
+    color: #87ff5f;
+  }
+  .xterm-fg-120 {
+    color: #87ff87;
+  }
+  .xterm-fg-121 {
+    color: #87ffaf;
+  }
+  .xterm-fg-122 {
+    color: #87ffd7;
+  }
+  .xterm-fg-123 {
+    color: #87ffff;
+  }
+  .xterm-fg-124 {
+    color: #af0000;
+  }
+  .xterm-fg-125 {
+    color: #af005f;
+  }
+  .xterm-fg-126 {
+    color: #af0087;
+  }
+  .xterm-fg-127 {
+    color: #af00af;
+  }
+  .xterm-fg-128 {
+    color: #af00d7;
+  }
+  .xterm-fg-129 {
+    color: #af00ff;
+  }
+  .xterm-fg-130 {
+    color: #af5f00;
+  }
+  .xterm-fg-131 {
+    color: #af5f5f;
+  }
+  .xterm-fg-132 {
+    color: #af5f87;
+  }
+  .xterm-fg-133 {
+    color: #af5faf;
+  }
+  .xterm-fg-134 {
+    color: #af5fd7;
+  }
+  .xterm-fg-135 {
+    color: #af5fff;
+  }
+  .xterm-fg-136 {
+    color: #af8700;
+  }
+  .xterm-fg-137 {
+    color: #af875f;
+  }
+  .xterm-fg-138 {
+    color: #af8787;
+  }
+  .xterm-fg-139 {
+    color: #af87af;
+  }
+  .xterm-fg-140 {
+    color: #af87d7;
+  }
+  .xterm-fg-141 {
+    color: #af87ff;
+  }
+  .xterm-fg-142 {
+    color: #afaf00;
+  }
+  .xterm-fg-143 {
+    color: #afaf5f;
+  }
+  .xterm-fg-144 {
+    color: #afaf87;
+  }
+  .xterm-fg-145 {
+    color: #afafaf;
+  }
+  .xterm-fg-146 {
+    color: #afafd7;
+  }
+  .xterm-fg-147 {
+    color: #afafff;
+  }
+  .xterm-fg-148 {
+    color: #afd700;
+  }
+  .xterm-fg-149 {
+    color: #afd75f;
+  }
+  .xterm-fg-150 {
+    color: #afd787;
+  }
+  .xterm-fg-151 {
+    color: #afd7af;
+  }
+  .xterm-fg-152 {
+    color: #afd7d7;
+  }
+  .xterm-fg-153 {
+    color: #afd7ff;
+  }
+  .xterm-fg-154 {
+    color: #afff00;
+  }
+  .xterm-fg-155 {
+    color: #afff5f;
+  }
+  .xterm-fg-156 {
+    color: #afff87;
+  }
+  .xterm-fg-157 {
+    color: #afffaf;
+  }
+  .xterm-fg-158 {
+    color: #afffd7;
+  }
+  .xterm-fg-159 {
+    color: #afffff;
+  }
+  .xterm-fg-160 {
+    color: #d70000;
+  }
+  .xterm-fg-161 {
+    color: #d7005f;
+  }
+  .xterm-fg-162 {
+    color: #d70087;
+  }
+  .xterm-fg-163 {
+    color: #d700af;
+  }
+  .xterm-fg-164 {
+    color: #d700d7;
+  }
+  .xterm-fg-165 {
+    color: #d700ff;
+  }
+  .xterm-fg-166 {
+    color: #d75f00;
+  }
+  .xterm-fg-167 {
+    color: #d75f5f;
+  }
+  .xterm-fg-168 {
+    color: #d75f87;
+  }
+  .xterm-fg-169 {
+    color: #d75faf;
+  }
+  .xterm-fg-170 {
+    color: #d75fd7;
+  }
+  .xterm-fg-171 {
+    color: #d75fff;
+  }
+  .xterm-fg-172 {
+    color: #d78700;
+  }
+  .xterm-fg-173 {
+    color: #d7875f;
+  }
+  .xterm-fg-174 {
+    color: #d78787;
+  }
+  .xterm-fg-175 {
+    color: #d787af;
+  }
+  .xterm-fg-176 {
+    color: #d787d7;
+  }
+  .xterm-fg-177 {
+    color: #d787ff;
+  }
+  .xterm-fg-178 {
+    color: #d7af00;
+  }
+  .xterm-fg-179 {
+    color: #d7af5f;
+  }
+  .xterm-fg-180 {
+    color: #d7af87;
+  }
+  .xterm-fg-181 {
+    color: #d7afaf;
+  }
+  .xterm-fg-182 {
+    color: #d7afd7;
+  }
+  .xterm-fg-183 {
+    color: #d7afff;
+  }
+  .xterm-fg-184 {
+    color: #d7d700;
+  }
+  .xterm-fg-185 {
+    color: #d7d75f;
+  }
+  .xterm-fg-186 {
+    color: #d7d787;
+  }
+  .xterm-fg-187 {
+    color: #d7d7af;
+  }
+  .xterm-fg-188 {
+    color: #d7d7d7;
+  }
+  .xterm-fg-189 {
+    color: #d7d7ff;
+  }
+  .xterm-fg-190 {
+    color: #d7ff00;
+  }
+  .xterm-fg-191 {
+    color: #d7ff5f;
+  }
+  .xterm-fg-192 {
+    color: #d7ff87;
+  }
+  .xterm-fg-193 {
+    color: #d7ffaf;
+  }
+  .xterm-fg-194 {
+    color: #d7ffd7;
+  }
+  .xterm-fg-195 {
+    color: #d7ffff;
+  }
+  .xterm-fg-196 {
+    color: #ff0000;
+  }
+  .xterm-fg-197 {
+    color: #ff005f;
+  }
+  .xterm-fg-198 {
+    color: #ff0087;
+  }
+  .xterm-fg-199 {
+    color: #ff00af;
+  }
+  .xterm-fg-200 {
+    color: #ff00d7;
+  }
+  .xterm-fg-201 {
+    color: #ff00ff;
+  }
+  .xterm-fg-202 {
+    color: #ff5f00;
+  }
+  .xterm-fg-203 {
+    color: #ff5f5f;
+  }
+  .xterm-fg-204 {
+    color: #ff5f87;
+  }
+  .xterm-fg-205 {
+    color: #ff5faf;
+  }
+  .xterm-fg-206 {
+    color: #ff5fd7;
+  }
+  .xterm-fg-207 {
+    color: #ff5fff;
+  }
+  .xterm-fg-208 {
+    color: #ff8700;
+  }
+  .xterm-fg-209 {
+    color: #ff875f;
+  }
+  .xterm-fg-210 {
+    color: #ff8787;
+  }
+  .xterm-fg-211 {
+    color: #ff87af;
+  }
+  .xterm-fg-212 {
+    color: #ff87d7;
+  }
+  .xterm-fg-213 {
+    color: #ff87ff;
+  }
+  .xterm-fg-214 {
+    color: #ffaf00;
+  }
+  .xterm-fg-215 {
+    color: #ffaf5f;
+  }
+  .xterm-fg-216 {
+    color: #ffaf87;
+  }
+  .xterm-fg-217 {
+    color: #ffafaf;
+  }
+  .xterm-fg-218 {
+    color: #ffafd7;
+  }
+  .xterm-fg-219 {
+    color: #ffafff;
+  }
+  .xterm-fg-220 {
+    color: #ffd700;
+  }
+  .xterm-fg-221 {
+    color: #ffd75f;
+  }
+  .xterm-fg-222 {
+    color: #ffd787;
+  }
+  .xterm-fg-223 {
+    color: #ffd7af;
+  }
+  .xterm-fg-224 {
+    color: #ffd7d7;
+  }
+  .xterm-fg-225 {
+    color: #ffd7ff;
+  }
+  .xterm-fg-226 {
+    color: #ffff00;
+  }
+  .xterm-fg-227 {
+    color: #ffff5f;
+  }
+  .xterm-fg-228 {
+    color: #ffff87;
+  }
+  .xterm-fg-229 {
+    color: #ffffaf;
+  }
+  .xterm-fg-230 {
+    color: #ffffd7;
+  }
+  .xterm-fg-231 {
+    color: #ffffff;
+  }
+  .xterm-fg-232 {
+    color: #080808;
+  }
+  .xterm-fg-233 {
+    color: #121212;
+  }
+  .xterm-fg-234 {
+    color: #1c1c1c;
+  }
+  .xterm-fg-235 {
+    color: #262626;
+  }
+  .xterm-fg-236 {
+    color: #303030;
+  }
+  .xterm-fg-237 {
+    color: #3a3a3a;
+  }
+  .xterm-fg-238 {
+    color: #444444;
+  }
+  .xterm-fg-239 {
+    color: #4e4e4e;
+  }
+  .xterm-fg-240 {
+    color: #585858;
+  }
+  .xterm-fg-241 {
+    color: #626262;
+  }
+  .xterm-fg-242 {
+    color: #6c6c6c;
+  }
+  .xterm-fg-243 {
+    color: #767676;
+  }
+  .xterm-fg-244 {
+    color: #808080;
+  }
+  .xterm-fg-245 {
+    color: #8a8a8a;
+  }
+  .xterm-fg-246 {
+    color: #949494;
+  }
+  .xterm-fg-247 {
+    color: #9e9e9e;
+  }
+  .xterm-fg-248 {
+    color: #a8a8a8;
+  }
+  .xterm-fg-249 {
+    color: #b2b2b2;
+  }
+  .xterm-fg-250 {
+    color: #bcbcbc;
+  }
+  .xterm-fg-251 {
+    color: #c6c6c6;
+  }
+  .xterm-fg-252 {
+    color: #d0d0d0;
+  }
+  .xterm-fg-253 {
+    color: #dadada;
+  }
+  .xterm-fg-254 {
+    color: #e4e4e4;
+  }
+  .xterm-fg-255 {
+    color: #eeeeee;
+  }
 }
diff --git a/app/controllers/ci/builds_controller.rb b/app/controllers/ci/builds_controller.rb
index 28fad3671f7..9338b37e678 100644
--- a/app/controllers/ci/builds_controller.rb
+++ b/app/controllers/ci/builds_controller.rb
@@ -7,6 +7,7 @@ module Ci
     before_filter :authorize_manage_project!, except: [:status, :show, :retry, :cancel]
     before_filter :authorize_manage_builds!, only: [:retry, :cancel]
     before_filter :build, except: [:show]
+    layout 'ci/project'
 
     def show
       if params[:id] =~ /\A\d+\Z/
diff --git a/app/controllers/ci/commits_controller.rb b/app/controllers/ci/commits_controller.rb
index 0f7f5485661..f0c0ff1bc11 100644
--- a/app/controllers/ci/commits_controller.rb
+++ b/app/controllers/ci/commits_controller.rb
@@ -6,6 +6,7 @@ module Ci
     before_filter :authorize_access_project!, except: [:status, :show, :cancel]
     before_filter :authorize_manage_builds!, only: [:cancel]
     before_filter :commit, only: :show
+    layout 'ci/project'
 
     def show
       @builds = @commit.builds
diff --git a/app/views/ci/builds/show.html.haml b/app/views/ci/builds/show.html.haml
index db8926e30d3..1a07feeb20e 100644
--- a/app/views/ci/builds/show.html.haml
+++ b/app/views/ci/builds/show.html.haml
@@ -1,5 +1,5 @@
 %h4.page-title
-  = link_to ci_project_path(@project)
+  = link_to @project.name, ci_project_path(@project)
   @
   = @commit.short_sha
 
diff --git a/app/views/ci/commits/show.html.haml b/app/views/ci/commits/show.html.haml
index 9b597b45aa5..72fda8fe949 100644
--- a/app/views/ci/commits/show.html.haml
+++ b/app/views/ci/commits/show.html.haml
@@ -63,7 +63,7 @@
       %i.fa.fa-time
       #{time_interval_in_words @commit.duration}
 
-%table.builds
+%table.table.builds
   %thead
     %tr
       %th Status
@@ -81,7 +81,7 @@
   %h3
     Retried builds
 
-  %table.builds
+  %table.table.builds
     %thead
       %tr
         %th Status
diff --git a/app/views/ci/projects/show.html.haml b/app/views/ci/projects/show.html.haml
index b79ab957ba8..6443378af99 100644
--- a/app/views/ci/projects/show.html.haml
+++ b/app/views/ci/projects/show.html.haml
@@ -16,7 +16,8 @@
     %li{class: 'active'}
       = link_to @ref, ci_project_path(@project, ref: @ref)
 
-
+  %li.pull-right
+    = link_to 'View on GitLab', @project.gitlab_url, no_turbolink.merge( class: 'btn btn-sm' )
 
 - if @ref
   %p
@@ -37,7 +38,7 @@
 
 
 
-%table.builds
+%table.table.builds
   %thead
     %tr
       %th Status
diff --git a/app/views/layouts/ci/_head.html.haml b/app/views/layouts/ci/_head.html.haml
deleted file mode 100644
index 871752c9812..00000000000
--- a/app/views/layouts/ci/_head.html.haml
+++ /dev/null
@@ -1,11 +0,0 @@
-%head
-  %meta{charset: "utf-8"}
-  %meta{content: "GitLab Continuous Integration", name: "description"}
-  %title GitLab CI
-  = stylesheet_link_tag    "ci/application", :media => "all"
-  = javascript_include_tag "ci/application"
-  = csrf_meta_tags
-  = favicon_link_tag 'ci/favicon.ico'
-  :erb
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
diff --git a/app/views/layouts/ci/_nav.html.haml b/app/views/layouts/ci/_nav.html.haml
deleted file mode 100644
index 3d2c7ce06da..00000000000
--- a/app/views/layouts/ci/_nav.html.haml
+++ /dev/null
@@ -1,32 +0,0 @@
-.navbar.navbar-static-top.navbar-ci
-  .container
-    .navbar-header
-      %button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
-        %span.sr-only Toggle navigation
-        %i.fa.fa-reorder
-
-      = link_to 'GitLab CI', ci_root_path, class: "navbar-brand"
-
-    .collapse.navbar-collapse
-      %ul.nav.navbar-nav
-        - if current_user && current_user.is_admin?
-          %li
-            = link_to ci_admin_projects_path do
-              Admin
-        %li
-          = link_to 'Help', ci_help_path
-
-      %ul.nav.navbar-nav.pull-right
-        - if current_user
-          %li
-            = link_to "/profile", no_turbolink do
-              .profile-holder
-                = image_tag user_avatar_url(current_user, 64), class: 'avatar s32', alt: ''
-                %span= current_user.name
-          %li
-            = link_to destroy_user_session_path, class: "logout", method: :delete do
-              %i.fa.fa-signout
-              Logout
-        - else
-          %li
-            = link_to "Login with GitLab", auth_ci_user_sessions_path, no_turbolink.merge(class: 'btn btn-success btn-login')
diff --git a/app/views/layouts/ci/_nav_admin.html.haml b/app/views/layouts/ci/_nav_admin.html.haml
index 26eaf4db0e5..7d65405740c 100644
--- a/app/views/layouts/ci/_nav_admin.html.haml
+++ b/app/views/layouts/ci/_nav_admin.html.haml
@@ -1,4 +1,11 @@
-%ul.nav.nav-pills.nav-stacked.admin-menu
+%ul.nav.nav-sidebar
+  = nav_link do
+    = link_to ci_root_path, title: 'Back to dashboard', data: {placement: 'right'}, class: 'back-link' do
+      = icon('caret-square-o-left fw')
+      %span
+        Back to Dashboard
+
+  %li.separate-item
   = nav_link path: 'projects#index' do
     = link_to ci_admin_projects_path do
       %i.fa.fa-list-alt
@@ -19,8 +26,6 @@
       Builds
       %small.pull-right
         = Ci::Build.count(:all)
-  %li
-    %hr
   = nav_link(controller: :application_settings, html_options: { class: 'separate-item'}) do
     = link_to ci_admin_application_settings_path do
       %i.fa.fa-cogs
diff --git a/app/views/layouts/ci/_nav_dashboard.html.haml b/app/views/layouts/ci/_nav_dashboard.html.haml
new file mode 100644
index 00000000000..202d73d1713
--- /dev/null
+++ b/app/views/layouts/ci/_nav_dashboard.html.haml
@@ -0,0 +1,24 @@
+%ul.nav.nav-sidebar
+  = nav_link do
+    = link_to root_path, title: 'Back to dashboard', data: {placement: 'right'}, class: 'back-link' do
+      = icon('caret-square-o-left fw')
+      %span
+        Back to GitLab
+  %li.separate-item
+  = nav_link path: 'projects#show' do
+    = link_to ci_root_path do
+      %i.fa.fa-home
+      %span
+        Projects
+  - if current_user && current_user.is_admin?
+    %li
+      = link_to ci_admin_projects_path do
+        %i.fa.fa-cogs
+        %span
+          Admin
+  %li
+    = link_to ci_help_path do
+      %i.fa.fa-info
+      %span
+        Help
+
diff --git a/app/views/layouts/ci/_nav_project.html.haml b/app/views/layouts/ci/_nav_project.html.haml
index d5b66b92fe8..9cef47eb4f7 100644
--- a/app/views/layouts/ci/_nav_project.html.haml
+++ b/app/views/layouts/ci/_nav_project.html.haml
@@ -1,40 +1,48 @@
-%ul.nav.nav-pills.nav-stacked.project-menu
+%ul.nav.nav-sidebar
   = nav_link path: 'projects#show' do
     = link_to ci_project_path(@project) do
       %i.fa.fa-list-alt
-      Commits
-      %small.pull-right= @project.commits.count
+      %span
+        Commits
+        %small.pull-right= @project.commits.count
   = nav_link path: 'charts#show' do
     = link_to ci_project_charts_path(@project) do
       %i.fa.fa-bar-chart
-      Charts
+      %span
+        Charts
   = nav_link path: ['runners#index', 'runners#show'] do
     = link_to ci_project_runners_path(@project) do
       %i.fa.fa-cog
-      Runners
+      %span
+        Runners
   = nav_link path: 'variables#show' do
     = link_to ci_project_variables_path(@project) do
       %i.fa.fa-code
-      Variables
+      %span
+        Variables
   = nav_link path: 'web_hooks#index' do
     = link_to ci_project_web_hooks_path(@project) do
       %i.fa.fa-link
-      Web Hooks
+      %span
+        Web Hooks
   = nav_link path: 'triggers#index' do
     = link_to ci_project_triggers_path(@project) do
       %i.fa.fa-retweet
-      Triggers
+      %span
+        Triggers
   = nav_link path: 'services#index' do
     = link_to ci_project_services_path(@project) do
       %i.fa.fa-share
-      Services
+      %span
+        Services
   = nav_link path: 'events#index' do
     = link_to ci_project_events_path(@project) do
       %i.fa.fa-book
-      Events
-  %li
-    %hr
+      %span
+        Events
+  %li.separate-item
   = nav_link path: 'projects#edit' do
     = link_to edit_ci_project_path(@project) do
       %i.fa.fa-cogs
-      Settings
+      %span
+        Settings
diff --git a/app/views/layouts/ci/_page.html.haml b/app/views/layouts/ci/_page.html.haml
new file mode 100644
index 00000000000..c598f63c4c8
--- /dev/null
+++ b/app/views/layouts/ci/_page.html.haml
@@ -0,0 +1,26 @@
+.page-with-sidebar{ class: nav_sidebar_class }
+  = render "layouts/broadcast"
+  .sidebar-wrapper.nicescroll
+    .header-logo
+      = link_to ci_root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
+        = brand_header_logo
+        .gitlab-text-container
+          %h3 GitLab CI
+    - if defined?(sidebar) && sidebar
+      = render "layouts/ci/#{sidebar}"
+    - elsif current_user
+      = render 'layouts/nav/dashboard'
+    .collapse-nav
+      = render partial: 'layouts/collapse_button'
+    - if current_user
+      = link_to current_user, class: 'sidebar-user' do
+        = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s36'
+        .username
+          = current_user.username
+  .content-wrapper
+    = render "layouts/flash"
+    = render 'layouts/ci/info'
+    %div{ class: container_class }
+      .content
+        .clearfix
+          = yield
diff --git a/app/views/layouts/ci/admin.html.haml b/app/views/layouts/ci/admin.html.haml
index cd160a54455..c8cb185d28c 100644
--- a/app/views/layouts/ci/admin.html.haml
+++ b/app/views/layouts/ci/admin.html.haml
@@ -1,18 +1,11 @@
 !!! 5
 %html{ lang: "en"}
-  = render 'layouts/ci/head'
-  %body{ :'data-page' => body_data_page }
-    = render 'layouts/ci/nav'
-    = render 'layouts/ci/info'
-    - if content_for?(:title)
-      .container.container-title
-        = yield(:title)
-      %hr
+  = render 'layouts/head'
+  %body{class: "ci-body #{user_application_theme}", 'data-page' => body_data_page}
+    - header_title = "Admin area"
+    - if current_user
+      = render "layouts/header/default", title: header_title
+    - else
+      = render "layouts/header/public", title: header_title
 
-    .container.container-body
-      .content
-        .row
-          .col-md-2.append-bottom-20
-            = render 'layouts/ci/nav_admin'
-          .col-md-10
-            = yield
+    = render 'layouts/ci/page', sidebar: 'nav_admin'
diff --git a/app/views/layouts/ci/application.html.haml b/app/views/layouts/ci/application.html.haml
index 8990ffbffe6..7fb1a0097b2 100644
--- a/app/views/layouts/ci/application.html.haml
+++ b/app/views/layouts/ci/application.html.haml
@@ -1,14 +1,11 @@
 !!! 5
 %html{ lang: "en"}
-  = render 'layouts/ci/head'
-  %body{ :'data-page' => body_data_page }
-    = render 'layouts/ci/nav'
-    = render 'layouts/ci/info'
-    - if content_for?(:title)
-      .container.container-title
-        = yield(:title)
-      %hr
+  = render 'layouts/head'
+  %body{class: "ci-body #{user_application_theme}", 'data-page' => body_data_page}
+    - header_title = "Projects"
+    - if current_user
+      = render "layouts/header/default", title: header_title
+    - else
+      = render "layouts/header/public", title: header_title
 
-    .container.container-body
-      .content
-        = yield
+    = render 'layouts/ci/page', sidebar: 'nav_dashboard'
diff --git a/app/views/layouts/ci/empty.html.haml b/app/views/layouts/ci/empty.html.haml
deleted file mode 100644
index bda574c0ed1..00000000000
--- a/app/views/layouts/ci/empty.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-!!! 5
-%html{ lang: "en"}
-  = render 'layouts/ci/head'
-  %body{ :'data-page' => body_data_page }
-    = render 'layouts/ci/info'
-    - if content_for?(:title)
-      .container.container-title
-        = yield(:title)
-      %hr
-
-    .container.container-body
-      .content
-        = yield
-
diff --git a/app/views/layouts/ci/project.html.haml b/app/views/layouts/ci/project.html.haml
index 88c21211a57..23a4928fcc7 100644
--- a/app/views/layouts/ci/project.html.haml
+++ b/app/views/layouts/ci/project.html.haml
@@ -1,27 +1,11 @@
 !!! 5
 %html{ lang: "en"}
-  = render 'layouts/ci/head'
-  %body{ :'data-page' => body_data_page }
-    = render 'layouts/ci/nav'
-    = render 'layouts/ci/info'
-    .container
-      %h3.project-title
-        = @project.name
-        - if @project.public
-          %small
-            %i.fa.fa-globe
-            Public
+  = render 'layouts/head'
+  %body{class: "ci-body #{user_application_theme}", 'data-page' => body_data_page}
+    - header_title = @project.name
+    - if current_user
+      = render "layouts/header/default", title: header_title
+    - else
+      = render "layouts/header/public", title: header_title
 
-        .pull-right
-          = link_to 'View on GitLab', @project.gitlab_url, no_turbolink.merge( class: 'btn btn-sm' )
-    %hr
-    .container.container-body
-      .content
-        - if current_user && can?(current_user, :admin_project, gl_project)
-          .row
-            .col-md-2.append-bottom-20
-              = render 'layouts/ci/nav_project'
-            .col-md-10
-              = yield
-        - else
-          = yield
+    = render 'layouts/ci/page', sidebar: 'nav_project'