Refactor scss

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

28 files changed, 800 insertions, 393 deletions

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
deleted file mode 100644
index 3192ec8..0000000
--- a/app/assets/stylesheets/application.css
+++ /dev/null
@@ -1,13 +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
- *= require_tree .
- */
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
new file mode 100644
index 0000000..f25f18b
--- /dev/null
+++ b/app/assets/stylesheets/application.scss
@@ -0,0 +1,45 @@
+/*
+ * 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 "main/variables.scss";
+@import "main/mixins.scss";
+@import "main/fonts.scss";
+@import "main/layout.scss";
+
+/**
+ * Customized Twitter bootstrap
+ */
+@import 'gl_bootstrap';
+
+/**
+ * Font icons
+ *
+ */
+@import "font-awesome";
+
+/**
+ * Generic css (forms, buttons etc):
+ */
+@import "generic/xterm.scss";
+@import "generic/common.scss";
+@import "generic/typography.scss";
+@import "generic/buttons.scss";
+@import "generic/forms.scss";
+
+/**
+ * Page specific styles (issues, projects etc):
+ */
+@import "sections/navbar.scss";
+@import "sections/projects.scss";
+@import "sections/builds.scss";
+@import "sections/login.scss";
diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
new file mode 100644
index 0000000..a15bf45
--- /dev/null
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -0,0 +1,169 @@
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: normal;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 6px 12px;
+  font-size: 13px;
+  line-height: 18px;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  color: #444444;
+  background-color: #fff;
+  border-color: #ccc;
+  text-shadow: none;
+
+  &.hover,
+  &:hover {
+    color: #444444;
+    text-decoration: none;
+    background-color: #ebebeb;
+    border-color: #adadad;
+  }
+
+  &.focus,
+  &:focus {
+    color: #444444;
+    text-decoration: none;
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+  }
+
+  &.active,
+  &:active {
+    outline: 0;
+    background-image: none;
+    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  }
+
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.65;
+    filter: alpha(opacity=65);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+  &.btn-primary {
+    color: #ffffff;
+    background-color: #429bca;
+    border-color: #358ebd;
+
+    &.hover,
+    &:hover,
+    &.disabled,
+    &[disabled] {
+      color: #ffffff;
+      background-color: #3286b1;
+      border-color: #286e8e;
+    }
+  }
+
+  &.btn-success {
+    color: #ffffff;
+    background-color: #5cb85c;
+    border-color: #4cae4c;
+
+
+    &.hover,
+    &:hover,
+    &.disabled,
+    &[disabled] {
+      color: #ffffff;
+      background-color: #47a447;
+      border-color: #398439;
+    }
+  }
+
+  &.btn-danger {
+    color: #ffffff;
+    background-color: #d9534f;
+    border-color: #d43f3a;
+
+
+    &.hover,
+    &:hover,
+    &.disabled,
+    &[disabled] {
+      color: #ffffff;
+      background-color: #d2322d;
+      border-color: #ac2925;
+    }
+  }
+
+  &.btn-new {
+    @extend .btn-success;
+  }
+
+  &.btn-create {
+    @extend .wide;
+    @extend .btn-success;
+  }
+
+  &.btn-save {
+    @extend .wide;
+    @extend .btn-primary;
+  }
+
+  &.btn-close,
+  &.btn-remove {
+    @extend .btn-danger;
+  }
+
+  &.btn-cancel {
+    float: right;
+  }
+
+  &.wide {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  &.btn-small, &.btn-xs {
+    padding: 2px 10px;
+    font-size: 12px;
+  }
+
+  &.btn-tiny {
+    font-size: 11px;
+    padding: 2px 6px;
+    line-height: 16px;
+    margin: 2px;
+  }
+}
+
+.btn-block {
+  width: 100%;
+  margin: 0;
+  margin-bottom: 15px;
+  &.btn {
+    padding: 6px 0;
+  }
+}
+
+.btn,
+.btn-group {
+  &.grouped {
+    margin-right: 7px;
+    float: left;
+    &:last-child {
+      margin-right: 0px;
+    }
+  }
+}
+
+.btn-group-small > .btn { @extend .btn.btn-small; }
+.btn-group-tiny > .btn { @extend .btn.btn-tiny; }
diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
new file mode 100644
index 0000000..b69d3d9
--- /dev/null
+++ b/app/assets/stylesheets/generic/common.scss
@@ -0,0 +1,70 @@
+/** COLORS **/
+.cgray { color: gray }
+.clgray { color: #BBB }
+.cred { color: #D12F19 }
+.cgreen { color: #4a2 }
+.cblue { color: #29A }
+.cblack { color: #111 }
+.cdark { color: #444 }
+.camber { color: #ffc000 }
+.cwhite { color: #fff!important }
+.bgred { background: #F2DEDE!important }
+
+/** COMMON CLASSES **/
+.prepend-top-10 { margin-top:10px }
+.prepend-top-20 { margin-top:20px }
+.prepend-left-10 { margin-left:10px }
+.prepend-left-20 { margin-left:20px }
+.append-right-10 { margin-right:10px }
+.append-right-20 { margin-right:20px }
+.append-bottom-10 { margin-bottom:10px }
+.append-bottom-15 { margin-bottom:15px }
+.append-bottom-20 { margin-bottom:20px }
+.inline { display: inline-block }
+.padded { padding:20px }
+.ipadded { padding:20px!important }
+.lborder { border-left:1px solid #eee }
+.underlined_link { text-decoration: underline; }
+.hint { font-style: italic; color: #999; }
+.light { color: #888 }
+.tiny { font-weight: normal }
+.vtop { vertical-align: top !important; }
+
+
+.dropdown-menu > li > a {
+  text-shadow: none;
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background: #29b;
+}
+
+.breadcrumb > li + li:before {
+  content: "/";
+  padding: 0;
+  color: #666;
+}
+
+.str-truncated {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+  max-width: 82%;
+}
+
+.table {
+  th {
+    background: #eee;
+    border-bottom: 1px solid #CCC;
+    @include linear-gradient(#EEE, #DFDFDF);
+  }
+}
+
+.page-title {
+  color: #444;
+  line-height: 1.5;
+  margin-top: 0px;
+  margin-bottom: 15px;
+}
diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/generic/forms.scss
new file mode 100644
index 0000000..6b7b182
--- /dev/null
+++ b/app/assets/stylesheets/generic/forms.scss
@@ -0,0 +1,28 @@
+input[type='text'].danger {
+  background: #F2DEDE!important;
+  border-color: #D66;
+  text-shadow: 0 1px 1px #fff
+}
+
+fieldset legend {
+  font-size: 16px;
+}
+
+.form-actions {
+  padding: 17px 20px 18px;
+  margin-top: 18px;
+  margin-bottom: 18px;
+  background-color: whitesmoke;
+  border-top: 1px solid #e5e5e5;
+  padding-left: 17%;
+}
+
+label {
+  &.control-label {
+    @extend .col-sm-2;
+  }
+
+  &.inline-label {
+    margin: 0;
+  }
+}
diff --git a/app/assets/stylesheets/generic/typography.scss b/app/assets/stylesheets/generic/typography.scss
new file mode 100644
index 0000000..b9ed23b
--- /dev/null
+++ b/app/assets/stylesheets/generic/typography.scss
@@ -0,0 +1,63 @@
+h6 {
+  color: #888;
+  text-transform: uppercase;
+}
+
+pre {
+  font-family: $monospace_font;
+
+  &.dark {
+    background: #333;
+    color: #f5f5f5;
+  }
+}
+
+/**
+ * Links
+ *
+ */
+a {
+  outline: none;
+  color: $link_color;
+  &:hover {
+    text-decoration: none;
+    color: $primary_color;
+  }
+
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &.dark {
+    color: $style_color;
+  }
+
+  &.lined {
+    text-decoration: underline;
+    &:hover { text-decoration: underline; }
+  }
+
+  &.gray {
+    color: gray;
+  }
+
+  &.supp_diff_link {
+    text-align: center;
+    padding: 20px 0;
+    background: #f1f1f1;
+    width: 100%;
+    float: left;
+  }
+
+  &.neib  {
+    margin-right: 15px;
+  }
+}
+
+a:focus {
+  outline: none;
+}
+
+.monospace {
+  font-family: $monospace_font;
+}
diff --git a/app/assets/stylesheets/xterm.scss b/app/assets/stylesheets/generic/xterm.scss
index 460a6bb..460a6bb 100644
--- a/app/assets/stylesheets/xterm.scss
+++ b/app/assets/stylesheets/generic/xterm.scss
diff --git a/app/assets/stylesheets/gl_bootstrap.scss b/app/assets/stylesheets/gl_bootstrap.scss
new file mode 100644
index 0000000..7f45d64
--- /dev/null
+++ b/app/assets/stylesheets/gl_bootstrap.scss
@@ -0,0 +1,220 @@
+/*
+ * Twitter bootstrap with GitLab customizations/additions
+ *
+ * Some unused bootstrap compontents like panels are not included.
+ * Other components like tabs are modified to GitLab style.
+ *
+ */
+
+$font-size-base: 13px !default;
+$nav-pills-active-link-hover-bg: $bg_style_color;
+$pagination-active-bg: $bg_style_color;
+
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/list-group";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+.clearfix {
+  @include clearfix();
+}
+.center-block {
+  @include center-block();
+}
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+.hide {
+  display: none;
+}
+.show {
+  display: block !important;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  @include text-hide();
+}
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+.affix {
+  position: fixed;
+}
+
+@import "bootstrap/responsive-utilities";
+
+// Labels
+.label {
+  padding: 2px 4px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  display: inline-block;
+
+  &.label-gray {
+    background-color: #eee;
+    color: #999;
+    text-shadow: none;
+  }
+
+  &.label-inverse {
+    background-color: #333333;
+  }
+}
+
+// Nav tabs
+.nav.nav-tabs {
+  li {
+    > a {
+      padding: 8px 20px;
+      margin-right: 7px;
+      line-height: 20px;
+      border-color: #EEE;
+      color: #888;
+      border-bottom: 1px solid #ddd;
+      .badge {
+        background-color: #eee;
+        color: #888;
+        text-shadow: 0 1px 1px #fff;
+      }
+      i[class^="icon-"] {
+        line-height: 14px;
+      }
+    }
+    &.active {
+      > a {
+        border-color: #CCC;
+        border-bottom: 1px solid #fff;
+        color: #333;
+        font-weight: bold;
+      }
+    }
+  }
+
+  &.nav-small-tabs > li > a {
+    padding: 6px 9px;
+  }
+}
+
+.nav-tabs > li > a,
+.nav-pills > li > a {
+  color: #666;
+}
+
+.nav-small > li > a {
+  padding: 3px 5px;
+  font-size: 12px;
+}
+
+
+/*
+ * Callouts from Bootstrap3 docs
+ *
+ * Not quite alerts, but custom and helpful notes for folks reading the docs.
+ * Requires a base and modifier class.
+ */
+
+/* Common styles for all types */
+.bs-callout {
+  margin: 20px 0;
+  padding: 20px;
+  border-left: 3px solid #eee;
+  color: #666;
+  background: #f9f9f9;
+}
+.bs-callout h4 {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.bs-callout p:last-child {
+  margin-bottom: 0;
+}
+
+/* Variations */
+.bs-callout-danger {
+  background-color: #fdf7f7;
+  border-color: #eed3d7;
+  color: #b94a48;
+}
+.bs-callout-warning {
+  background-color: #faf8f0;
+  border-color: #faebcc;
+  color: #8a6d3b;
+}
+.bs-callout-info {
+  background-color: #f4f8fa;
+  border-color: #bce8f1;
+  color: #34789a;
+}
+.bs-callout-success {
+  background-color: #dff0d8;
+  border-color: #5cA64d;
+  color: #3c763d;
+}
+
+// Breadcrumb
+ul.breadcrumb {
+  background: white;
+  border: none;
+  li {
+    display: inline;
+    text-shadow: 0 1px 0 white
+  }
+
+  a {
+    font-size: 16px;
+  }
+}
+
+/**
+ * fix to keep tooltips position in top navigation bar
+ *
+ */
+.navbar .nav > li {
+  position: relative;
+  white-space: nowrap;
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
deleted file mode 100644
index a4372db..0000000
--- a/app/assets/stylesheets/main.scss
+++ /dev/null
@@ -1,358 +0,0 @@
-@import "bootstrap";
-@import "font-awesome";
-@import "xterm";
-@import "login";
-
-$style_color: #289;
-
-.navbar-static-top {
-  margin-bottom: 20px;
-}
-
-body {
-  color:#444;
-  font-size: 13px;
-  -webkit-font-smoothing: antialiased;
-}
-
-a {
-  color: $style_color;
-
-  &:hover {
-    color: #3AB;
-  }
-}
-
-.sidebar {
-  border-left: 1px solid #eee;
-  padding-left: 20px;
-}
-
-.navbar-brand {
-  color: #fff;
-
-  &:hover {
-    color: #fff;
-  }
-}
-
-.navbar-ci {
-  background: $style_color;
-
-  .brand,
-  .nav > li > a {
-    color: #fff;
-    text-shadow: 0 1px 0 #167;
-
-    &:hover {
-      background: none;
-    }
-  }
-}
-
-.container-fluid {
-  padding: 0 50px;
-}
-
-.right {
-  float:right;
-}
-
-.light {
-  color: #888;
-}
-
-pre.trace {
-  background: #000;
-  color:#fff;
-  font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
-  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;
-}
-
-.autoscroll-container {
-  margin-bottom: 5px;
-}
-
-.builds {
-  @extend .table;
-
-  .build {
-    &.alert{
-      margin-bottom: 6px;
-    }
-    td {
-      border-bottom: 1px solid #fff;
-    }
-  }
-}
-
-.form-actions {
-  padding: 17px 20px 18px;
-  margin-top: 18px;
-  margin-bottom: 18px;
-  background-color: whitesmoke;
-  border-top: 1px solid #e5e5e5;
-  padding-left: 17%;
-}
-
-h3.error { color: #B94A48; }
-
-.padded {
-  padding: 20px;
-}
-
-.token_widget {
-  @extend .alert;
-  input {
-    padding: 5px;
-    margin: 5px;
-  }
-}
-
-.bold {
-  font-weight: bold;
-}
-.black {
-  color: black;
-}
-.red {
-  color: red;
-}
-.green {
-  color: #0E0;
-}
-.yellow {
-  color: yellow;
-}
-.blue {
-  color: blue;
-}
-.magenta {
-  color: magenta;
-}
-.cyan {
-  color: cyan;
-}
-.white {
-  color: white;
-}
-.grey {
-  color: grey;
-}
-
-.bordered {
-  border: 1px solid #DDD;
-  @include box-shadow(0 0 0 3px #eee);
-}
-
-fieldset {
-  legend {
-    font-size: 18px;
-  }
-}
-
-.lead {
-  font-size: 18px;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 500;
-  line-height: 1.1;
-  color: #555;
-}
-
-.profile-holder {
-  position: relative;
-
-  img {
-    position: absolute;
-    top: -2px;
-    width: 24px;
-    @include border-radius(4px);
-  }
-
-  span {
-    margin-left: 35px;
-  }
-}
-
-td form {
- margin: 0;
-}
-
-.cgreen {
-  color: #090;
-}
-
-.cred {
-  color: #900;
-}
-
-.thumbnail.screenshot {
-  padding: 20px;
-  background: #AAA;
-}
-
-.table {
-  th {
-    background: #eee;
-    background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
-    background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
-    background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
-    background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
-    border-bottom: 1px solid #CCC;
-  }
-}
-
-.project-title {
-  margin: 0;
-}
-
-.well-list {
-  @extend .unstyled;
-  li {
-    padding: 6px 0;
-    border-bottom: 1px solid #EEE;
-
-    form {
-      margin: 0;
-    }
-  }
-}
-
-.sync-now {
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.label {
-  font-weight: normal;
-  padding: 2px 5px;
-}
-
-.runner-builds {
-  .build-message {
-    display: none;
-  }
-}
-
-.restrict-projects-list {
-  form {
-    margin: 0;
-  }
-}
-
-.profile-block {
-  font-size: 14px;
-}
-
-h3 {
-  font-size: 22px;
-}
-
-.container-fluid {
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.build-widget {
-  padding: 10px;
-  background: #f4f4f4;
-  margin-bottom: 20px;
-  border-radius: 4px;
-
-  .title {
-    margin-top: 0;
-    color: #666;
-    text-shadow: 0 1px 1px #FFF;
-    line-height: 1.5;
-  }
-  .attr-name {
-    color: #777;
-  }
-}
-
-.build-head h4 {
-  line-height: 1.5;
-
-  .label {
-    padding: 4px 9px;
-    position: relative;
-    top: -2px;
-    left: 4px;
-  }
-}
-
-#project_scripts {
-  font-family: monospace;
-}
-
-label {
-  &.control-label {
-    @extend .col-sm-2;
-  }
-}
-
-.prepend-top-20 { margin-top:20px }
-.append-bottom-20 { margin-bottom:20px }
-
-/**
- * nav-pills
- *
- */
-.nav-pills {
-  .active a {
-    background: $style_color;
-  }
-
-  > li > a {
-    @include border-radius(0);
-  }
-
-  &.nav-stacked {
-    > li > a {
-      border-left: 4px solid #EEE;
-      padding: 12px;
-      color: #777;
-    }
-    > .active > a {
-      border-color: $style_color;
-      background: none;
-      color: #333;
-      font-weight: bolder;
-
-      &:hover {
-        background: none;
-        color: #333;
-      }
-    }
-
-    &.nav-stacked-menu {
-      li > a {
-        padding: 16px;
-      }
-    }
-  }
-
-  &.nav-pills-small {
-    > li > a {
-      padding: 8px 12px;
-      font-size: 12px;
-    }
-  }
-}
-
-.nav-pills > .active > a > i[class^="icon-"] { background: inherit; }
-
-.badge-codes-block {
-  display: none;
-}
diff --git a/app/assets/stylesheets/main/fonts.scss b/app/assets/stylesheets/main/fonts.scss
new file mode 100644
index 0000000..8cc9986
--- /dev/null
+++ b/app/assets/stylesheets/main/fonts.scss
@@ -0,0 +1,2 @@
+/** Typo **/
+$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;
diff --git a/app/assets/stylesheets/main/layout.scss b/app/assets/stylesheets/main/layout.scss
new file mode 100644
index 0000000..9e009a5
--- /dev/null
+++ b/app/assets/stylesheets/main/layout.scss
@@ -0,0 +1,20 @@
+html {
+  overflow-y: scroll;
+
+  &.touch .tooltip { display: none !important; }
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin-bottom: 20px;
+}
+
+.container {
+  padding-top: 0;
+  z-index: 5;
+}
+
+.container .content {
+  margin: 0 0;
+}
diff --git a/app/assets/stylesheets/main/mixins.scss b/app/assets/stylesheets/main/mixins.scss
new file mode 100644
index 0000000..4004082
--- /dev/null
+++ b/app/assets/stylesheets/main/mixins.scss
@@ -0,0 +1,31 @@
+@mixin box-shadow($shadow) {
+  -webkit-box-shadow: $shadow;
+  -moz-box-shadow: $shadow;
+  -ms-box-shadow: $shadow;
+  -o-box-shadow: $shadow;
+  box-shadow: $shadow;
+}
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -ms-border-radius: $radius;
+  -o-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin linear-gradient($from, $to) {
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
+  background-image: -webkit-linear-gradient($from, $to);
+  background-image: -moz-linear-gradient($from, $to);
+  background-image: -ms-linear-gradient($from, $to);
+  background-image: -o-linear-gradient($from, $to);
+}
+
+@mixin transition($transition) {
+  -webkit-transition: $transition;
+  -moz-transition: $transition;
+  -ms-transition: $transition;
+  -o-transition: $transition;
+  transition: $transition;
+}
diff --git a/app/assets/stylesheets/main/variables.scss b/app/assets/stylesheets/main/variables.scss
new file mode 100644
index 0000000..2c4ee95
--- /dev/null
+++ b/app/assets/stylesheets/main/variables.scss
@@ -0,0 +1,8 @@
+/**
+ * General Colors
+ */
+$primary_color: #2FA0BB;
+$link_color: #3A89A3;
+$style_color: #289;
+$bg_style_color: #228899;
+$hover: #D9EDF7;
diff --git a/app/assets/stylesheets/sections/builds.scss b/app/assets/stylesheets/sections/builds.scss
new file mode 100644
index 0000000..f9b17dd
--- /dev/null
+++ b/app/assets/stylesheets/sections/builds.scss
@@ -0,0 +1,46 @@
+pre.trace {
+  background: #000;
+  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;
+}
+
+.autoscroll-container {
+  margin-bottom: 5px;
+}
+
+.build-widget {
+  padding: 10px;
+  background: #f4f4f4;
+  margin-bottom: 20px;
+  border-radius: 4px;
+
+  .title {
+    margin-top: 0;
+    color: #666;
+    text-shadow: 0 1px 1px #FFF;
+    line-height: 1.5;
+  }
+  .attr-name {
+    color: #777;
+  }
+}
+
+.build-head h4 {
+  line-height: 1.5;
+
+  .label {
+    padding: 4px 9px;
+    position: relative;
+    top: -2px;
+    left: 4px;
+  }
+}
diff --git a/app/assets/stylesheets/login.scss b/app/assets/stylesheets/sections/login.scss
index 1f9cd2b..1f9cd2b 100644
--- a/app/assets/stylesheets/login.scss
+++ b/app/assets/stylesheets/sections/login.scss
diff --git a/app/assets/stylesheets/sections/navbar.scss b/app/assets/stylesheets/sections/navbar.scss
new file mode 100644
index 0000000..a46326f
--- /dev/null
+++ b/app/assets/stylesheets/sections/navbar.scss
@@ -0,0 +1,39 @@
+.navbar-static-top {
+  margin-bottom: 20px;
+}
+
+.navbar-ci {
+  background: $style_color;
+
+  .navbar-brand {
+    color: #fff;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+  .brand,
+  .nav > li > a {
+    color: #fff;
+    text-shadow: 0 1px 0 #167;
+
+    &:hover {
+      background: none;
+    }
+  }
+
+  .profile-holder {
+    position: relative;
+
+    img {
+      position: absolute;
+      top: -2px;
+      width: 24px;
+      @include border-radius(4px);
+    }
+
+    span {
+      margin-left: 35px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/sections/projects.scss b/app/assets/stylesheets/sections/projects.scss
new file mode 100644
index 0000000..4ea7dbd
--- /dev/null
+++ b/app/assets/stylesheets/sections/projects.scss
@@ -0,0 +1,25 @@
+.project-title {
+  margin: 0;
+  color: #444;
+  font-size: 20px;
+  line-height: 1.5;
+}
+
+.builds {
+  @extend .table;
+
+  .build {
+    &.alert{
+      margin-bottom: 6px;
+    }
+    td {
+      border-bottom: 1px solid #fff;
+    }
+  }
+}
+
+.projects-table {
+  td {
+    vertical-align: middle !important;
+  }
+}
diff --git a/app/views/admin/projects/_project.html.haml b/app/views/admin/projects/_project.html.haml
index aa54d69..a8ee2c3 100644
--- a/app/views/admin/projects/_project.html.haml
+++ b/app/views/admin/projects/_project.html.haml
@@ -22,6 +22,6 @@
   %td
     = project.builds.count
   %td
-    = link_to [:admin, project], method: :delete do
+    = link_to [:admin, project], method: :delete, class: 'btn btn-danger btn-xs' do
       %i.icon-remove
       Remove
diff --git a/app/views/admin/projects/index.html.haml b/app/views/admin/projects/index.html.haml
index 6e3a207..336f304 100644
--- a/app/views/admin/projects/index.html.haml
+++ b/app/views/admin/projects/index.html.haml
@@ -1,7 +1,10 @@
 = content_for :title do
   %h3.project-title
-    %span.light Admin /
-    Projects (#{@projects.total_count})
+    Manage Projects
+
+    .pull-right
+      %small
+        = pluralize(@projects.total_count, 'project')
 
 %table.table
   %tr
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index 48b939e..ddbc9e3 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -1,7 +1,10 @@
-= content_for :title do
-  %h3.project-title
-    %span.light Admin /
-    #{@project.name}
+%h4.page-title
+  Project: #{@project.name}
+
+%p
+  = link_to admin_projects_path do
+    ← Back to projects list
+%hr
 .row
   .col-md-6
     %fieldset
@@ -31,6 +34,7 @@
         Last build:
         - if @project.last_build
           = time_ago_in_words @project.last_build_date
+    %br
     %fieldset
       %legend Email notification
       %p
@@ -50,6 +54,7 @@
         %pre
           = @project.scripts
 
+    %br
     %fieldset
       %legend Builds stats
       %p
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index a32a85d..ea62b3d 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -1,13 +1,16 @@
 = content_for :title do
   %h3.project-title
-    %span.light Admin /
-    Runners (#{@runners.total_count})
+    Manage Runners
+
+    .pull-right
+      %small
+        = pluralize(@runners.total_count, 'runner')
 
 %p.lead
   %span To register new runner you should use next token
   %code #{GitlabCi::RunnersToken}
 
-.well
+.bs-callout
   %p
     A 'runner' is a process which runs a build.
     You can setup as many runners as you need.
@@ -26,6 +29,7 @@
         \- run only builds from assigned projects
 
 
+
 %table.table
   %tr
     %th ID
diff --git a/app/views/admin/runners/show.html.haml b/app/views/admin/runners/show.html.haml
index 4fdefda..392d3ce 100644
--- a/app/views/admin/runners/show.html.haml
+++ b/app/views/admin/runners/show.html.haml
@@ -1,4 +1,4 @@
-%h3
+%h4.page-title
   Runner: #{@runner.token}
 
 %p.light= @runner.description
@@ -8,10 +8,10 @@
 %hr
 
 - if @runner.shared?
-  .alert.alert-success
+  .bs-callout.bs-callout-success
     %h4 This runner will process build from ALL projects
 - else
-  .alert.alert-info
+  .bs-callout.bs-callout-info
     %h4 This runner will process build only from ASSIGNED projects
 .row
   .col-md-6
diff --git a/app/views/builds/show.html.haml b/app/views/builds/show.html.haml
index d664641..65a9bc1 100644
--- a/app/views/builds/show.html.haml
+++ b/app/views/builds/show.html.haml
@@ -1,6 +1,6 @@
-%h4
-  Project: #{@project.name}
-  .right
+%h4.page-title
+  = @project.name
+  .pull-right
     = link_to edit_project_path(@project), class: "btn btn-default btn-small" do
       %i.icon-edit.icon-white
       Edit Project
diff --git a/app/views/layouts/project.html.haml b/app/views/layouts/project.html.haml
index 8a1d3b6..833328d 100644
--- a/app/views/layouts/project.html.haml
+++ b/app/views/layouts/project.html.haml
@@ -14,7 +14,7 @@
 
         - if @project.gitlab_url.present?
           .pull-right
-            = link_to 'View on GitLab', @project.gitlab_url, class: 'btn btn-default'
+            = link_to 'View on GitLab', @project.gitlab_url, class: 'btn btn-small'
     %hr
     .container
       .row
diff --git a/app/views/projects/_gitlab.html.haml b/app/views/projects/_gitlab.html.haml
index e42262c..7757b35 100644
--- a/app/views/projects/_gitlab.html.haml
+++ b/app/views/projects/_gitlab.html.haml
@@ -10,7 +10,7 @@
     #{@total_count} projects, #{@projects.size} of them added to CI
 %br
 
-%table.table
+%table.table.projects-table
   %tr
     %th ID
     %th Project Name
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index e1851e4..f098c29 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -42,6 +42,6 @@
 
 = paginate @builds
 - if @builds.empty?
-  .alert
-    No builds yet
+  .bs-callout
+    %h4 No builds yet
 
diff --git a/spec/features/admin/projects_spec.rb b/spec/features/admin/projects_spec.rb
index ce8d9a5..fa72337 100644
--- a/spec/features/admin/projects_spec.rb
+++ b/spec/features/admin/projects_spec.rb
@@ -11,7 +11,7 @@ describe "Admin Projects" do
       visit admin_projects_path
     end
 
-    it { page.should have_content "Admin / Projects" }
+    it { page.should have_content "Manage Projects" }
   end
 end
 
diff --git a/spec/features/admin/runners_spec.rb b/spec/features/admin/runners_spec.rb
index 3fea7a6..7e02d94 100644
--- a/spec/features/admin/runners_spec.rb
+++ b/spec/features/admin/runners_spec.rb
@@ -11,7 +11,7 @@ describe "Admin Runners" do
       visit admin_runners_path
     end
 
-    it { page.should have_content "Admin / Runners" }
+    it { page.should have_content "Manage Runners" }
     it { page.should have_content "To register new runner you" }
   end