css refactoring

8 files changed, 441 insertions, 393 deletions

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index e4de2a2772f..f811293185e 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -7,48 +7,6 @@
  *= require jquery-ui/jquery.tagify
  *= require chosen
  *= require_self
- *= require_tree .
+ *= require common
 */
 
-/** COLORS **/
-.cgray { color:gray; }
-.cred { color:#D12F19; }
-.cgreen { color:#44aa22; }
-
-/** COMMON STYLES **/
-.left {
-  float:left;
-}
-.right {
-  float:right;
-}
-.width-50p{
-  width:50%;
-}
-.width-49p{
-  width:49%;
-}
-.width-30p{
-  width:30%;
-}
-.width-65p{
-  width:65%;
-}
-.width-100p{
-  width:100%;
-}
-.append-bottom-10 {
-  margin-bottom:10px;
-}
-.append-bottom-20 {
-  margin-bottom:20px;
-}
-.prepend-top-10 {
-  margin-top:10px;
-}
-.no-borders { 
-  border:none;
-}
-.no-padding { 
-  padding:0 !important;
-}
diff --git a/app/assets/stylesheets/commits.css.scss b/app/assets/stylesheets/commits.css.scss
index e42b9dfc64f..eab3315ac5b 100644
--- a/app/assets/stylesheets/commits.css.scss
+++ b/app/assets/stylesheets/commits.css.scss
@@ -1,3 +1,44 @@
+/* Commit Page */
+body.project-page.commits-page .commit-info{float: right;}
+body.project-page.commits-page .commit-info data{
+  padding: 4px 10px;
+  font-size: 11px;
+}
+body.project-page.commits-page .commit-info data.commit-button{
+  background-image: -webkit-gradient(linear, 0 0, 0 26, color-stop(0.192, #fff), to(#f4f4f4));
+  background-image: -webkit-linear-gradient(#fff 19.2%, #f4f4f4);
+  background-image: -moz-linear-gradient(#fff 19.2%, #f4f4f4);
+  background-image: -o-linear-gradient(#fff 19.2%, #f4f4f4);
+  box-shadow: 0 -1px 0 white inset;
+  display: block;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  margin-bottom: 2px;
+  position: relative;
+  padding-right: 20px;
+}
+
+body.project-page.commits-page .commit-button i{
+  background: url('images.png') no-repeat -138px -27px;
+  width: 6px;
+  height: 9px;
+  float: right;
+  position: absolute;
+  top: 6px;
+  right: 5px;
+}
+body.project-page.commits-page .commits-date {display: block; width: 100%; margin-bottom: 20px}
+body.project-page.commits-page .commits-date .data {padding: 0}
+body.project-page.commits-page a.commit{padding: 10px; border-bottom: 1px solid #eee; overflow: hidden; display: block;}
+body.project-page.commits-page .commits-date a.commit {padding: 10px; border-bottom: none; overflow: hidden; display: block;}
+body.project-page.commits-page .commits-date a.commit:last-child{border-bottom: 0}
+body.project-page.commits-page .commits-date a.commit img{float: left; margin-right: 10px;}
+body.project-page.commits-page .commits-date a.commit span.commit-title{display: block;}
+body.project-page.commits-page .commits-date a.commit span.commit-title{margin-bottom: 10px}
+body.project-page.commits-page .commits-date a.commit span.commit-author{color: #999; font-weight: normal; font-style: italic;}
+body.project-page.commits-page .commits-date a.commit span.commit-author strong{font-weight: bold; font-style: normal;}
+
+/* eo Commit Page */
 /** Commit diff view **/
 .diff_file {
   border:1px solid #CCC;
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
new file mode 100644
index 00000000000..e8e9bc39cc5
--- /dev/null
+++ b/app/assets/stylesheets/common.scss
@@ -0,0 +1,110 @@
+$text_color:#222;
+$lite_text_color: #666; 
+$link_color:#FFF; 
+$active_link_color:#2FA0BB;
+$active_bg_color:#79C3E0;
+$active_bd_color: #2FA0BB;
+$border_color:#FFF;
+$app_width:980px;
+$app_padding:20px;
+$bg_color: #FFF;
+$styled_border_color: #2FA0BB;
+
+/** MIXINS **/
+@mixin round-borders-bottom($radius) {
+  border-top: 1px solid #eaeaea;
+  -moz-border-radius-bottomright: $radius;
+  -moz-border-radius-bottomleft: $radius;
+  border-bottom-right-radius: $radius;
+  border-bottom-left-radius: $radius;
+  -webkit-border-bottom-left-radius: $radius;
+  -webkit-border-bottom-right-radius: $radius;
+}
+
+@mixin round-borders-top($radius) {
+  border-top: 1px solid #eaeaea;
+  -moz-border-radius-topright: $radius;
+  -moz-border-radius-topleft: $radius;
+  border-top-right-radius: $radius;
+  border-top-left-radius: $radius;
+  -webkit-border-top-left-radius: $radius;
+  -webkit-border-top-right-radius: $radius;
+}
+
+@mixin round-borders-all($radius) {
+  border: 1px solid #eaeaea;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+  border-radius: $radius;
+}
+
+/** COLORS **/
+.cgray { color:gray; }
+.cred { color:#D12F19; }
+.cgreen { color:#44aa22; }
+
+/** COMMON STYLES **/
+.left {
+  float:left;
+}
+.right {
+  float:right;
+}
+.width-50p{
+  width:50%;
+}
+.width-49p{
+  width:49%;
+}
+.width-30p{
+  width:30%;
+}
+.width-65p{
+  width:65%;
+}
+.width-100p{
+  width:100%;
+}
+.append-bottom-10 {
+  margin-bottom:10px;
+}
+.append-bottom-20 {
+  margin-bottom:20px;
+}
+.prepend-top-10 {
+  margin-top:10px;
+}
+.no-borders { 
+  border:none;
+}
+.no-padding { 
+  padding:0 !important;
+}
+
+/* General */
+
+body.collapsed { 
+  background-color: $bg_color;
+
+  #container{ 
+    margin: auto;
+    margin-top:51px;
+    width: $app_width;
+    border-top: 0;
+    background-color: $bg_color;
+  }
+}
+
+
+@import "style.scss";
+@import "projects.css.scss";
+@import "commits.css.scss";
+@import "notes.css.scss";
+@import "merge_requests.css.scss";
+@import "highlight.css.scss";
+@import "highlight.black.css.scss";
+@import "issues.css.scss";
+@import "commits.css.scss";
+
+@import "top_panel.scss";
+@import "dashboard.scss";
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
new file mode 100644
index 00000000000..efbb3b9c979
--- /dev/null
+++ b/app/assets/stylesheets/dashboard.scss
@@ -0,0 +1,26 @@
+body.dashboard-page h2.icon span{ background-position:  9px -69px; }
+body.dashboard-page header{margin-bottom: 0}
+body.dashboard-page .news-feed{margin-left: 285px; min-height: 600px; margin-top: 20px; margin-right:2px; padding:20px;}
+body.dashboard-page .dashboard-content{ position: relative; float: left; width: 100%; height: 100%; }
+body.dashboard-page .news-feed h2{float: left;}
+body.dashboard-page aside{ min-height: 820px; position: relative; top: 0; bottom: 0; right: 0; width: 260px;  float: left;  border-right: 1px solid #ccc; padding:20px; padding-right:0; }
+body.dashboard-page aside h4{margin: 0; border-bottom: 1px solid #ccc; padding: 20px 20px 20px 0px; font-size: 11px; font-weight: bold; text-transform: uppercase;}
+body.dashboard-page aside h4 a.button-small{float: right; text-transform: none; border-radius: 4px; margin-right: 2%; margin-top: -4px; display: block;}
+body.dashboard-page aside .project-list {list-style: none; margin: 0; padding: 0;}
+body.dashboard-page aside .project-list li a {background: white;  color: #{$blue_link}; display: block; border-bottom: 1px solid #eee; padding: 14px 6% 14px 0px;}
+//body.dashboard-page aside .project-list li a:hover {background: #f1f1f1}
+//body.dashboard-page aside .project-list li a:hover span.arrow{background-color: #E3E5EA;}
+body.dashboard-page aside .project-list li a span.project-name{font-size: 14px; display: block; margin-bottom: 8px}
+body.dashboard-page aside .project-list li a span.time{color: #666; font-weight: normal; font-size: 11px}
+body.dashboard-page aside .project-list li a span.arrow{float: right; background: #E3E5EA; padding: 10px; border-radius: 5px; margin-top: 2px; text-shadow: none; color: #999}
+body.dashboard-page .news-feed .project-updates  {margin-bottom: 20px; display: block; width: 100%;}
+body.dashboard-page .news-feed .project-updates .data{ padding: 0}
+body.dashboard-page .news-feed .project-updates a.project-update {padding: 10px; overflow: hidden; display: block;}
+body.dashboard-page .news-feed .project-updates a.project-update:last-child{border-bottom: 0}
+body.dashboard-page .news-feed .project-updates a.project-update img{float: left; margin-right: 10px;}
+body.dashboard-page .news-feed .project-updates a.project-update span.update-title, .dashboard-page .news-feed .project-updates li a span.update-author{display: block;}
+body.dashboard-page .news-feed .project-updates a.project-update span.update-title{margin-bottom: 10px}
+body.dashboard-page .news-feed .project-updates a.project-update span.update-author{color: #999; font-weight: normal; font-style: italic;}
+body.dashboard-page .news-feed .project-updates a.project-update span.update-author strong{font-weight: bold; font-style: normal;}
+/* eo Dashboard Page */
+
diff --git a/app/assets/stylesheets/projects.css.scss b/app/assets/stylesheets/projects.css.scss
index b82076bc8d2..0a01e3d4050 100644
--- a/app/assets/stylesheets/projects.css.scss
+++ b/app/assets/stylesheets/projects.css.scss
@@ -1,31 +1,78 @@
-/** MIXINS **/
-@mixin round-borders-bottom($radius) {
-  border-top: 1px solid #eaeaea;
-  -moz-border-radius-bottomright: $radius;
-  -moz-border-radius-bottomleft: $radius;
-  border-bottom-right-radius: $radius;
-  border-bottom-left-radius: $radius;
-  -webkit-border-bottom-left-radius: $radius;
-  -webkit-border-bottom-right-radius: $radius;
-}
-
-@mixin round-borders-top($radius) {
-  border-top: 1px solid #eaeaea;
-  -moz-border-radius-topright: $radius;
-  -moz-border-radius-topleft: $radius;
-  border-top-right-radius: $radius;
-  border-top-left-radius: $radius;
-  -webkit-border-top-left-radius: $radius;
-  -webkit-border-top-right-radius: $radius;
-}
-
-@mixin round-borders-all($radius) {
-  border: 1px solid #eaeaea;
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius;
-  border-radius: $radius;
+body.project-page h2.icon .project-name, body.project-page h2.icon d{border: 1px solid #eee; padding: 5px 30px 5px 10px; border-radius: 5px; position: relative;}
+body.project-page h2.icon .project-name i.arrow{float: right;
+  position: absolute;
+  right: 10px;
+  top: 13px;
+  display: block;
+  background: url('images.png') no-repeat -97px -29px;
+  width: 4px;
+  height: 5px;
+}
+
+body.project-page h2.icon span{  background-position:  -78px -68px; }
+body.project-page .project-container{ position: relative; float: left; width: 100%; height: 100%; padding-bottom: 10px;}
+body.project-page .page-title{margin-bottom: 0}
+
+body.project-page .project-sidebar { 
+  width: 110px;
+  left: 0;
+  top: 0;
+  height: 100%;
+  bottom: 0;
+  position: absolute;
+  float: left;
+  display: inline-block;
+  background: #FFF;
+  padding: $app_padding;
+  padding-right:0px;
+  margin: 0; 
+  border-right: 1px solid #ddd;
 }
 
+body.projects-page input.text.git-url { font-size: 12px; border-radius: 5px; color: #666; box-shadow: 0 1px 2px rgba(0,0,0,.2) inset; padding:  8px 0 8px 30px;  margin-bottom: 20px;  background: white url('images.png') no-repeat 8px -40px; width: 136px}
+body.projects-page input.text.git-url {margin:10px 0 0 }
+.git_url_wrapper { margin-right:50px }
+
+.projects_selector:hover > .project-box{ -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .1); -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .1); box-shadow:0px 0px 10px rgba(0, 0, 0, .1); }
+
+
+/* New project Page */
+.new-project-page .container table{background: white}
+body.project-page .project-sidebar aside{width: 109px}
+body.project-page .project-sidebar aside a{
+  display: block;
+  position: relative; 
+  padding: 15px 10px; 
+  margin: 10px 0 0 0;
+
+
+}
+body.project-page .project-sidebar aside a span.number{float: right; border-radius: 5px; text-shadow: none; background: rgba(0,0,0,.12); text-align: center; padding: 5px 8px; position: absolute; top: 10px; right: 10px}
+body.project-page .project-sidebar aside a.current {
+  color: white;
+  background: $active_bg_color;
+  border: 1px solid $active_bd_color;
+  border-radius:5px;
+
+
+  -webkit-border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0;
+  -moz-border-radius-topright: 0px;
+  -moz-border-radius-bottomright: 0px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
+}
+body.project-page .project-content{ padding: $app_padding; display: block; margin-left: 130px; min-height: 600px}
+body.project-page .project-content h2{ margin-top: 6px}
+body.project-page .project-content .button.right{margin-left: 20px}
+body.project-page table .commit a{color: #{$blue_link}}
+body.project-page table th, body.project-page table td{  border-bottom: 1px solid #DEE2E3;}
+body.project-page .fixed{position: fixed; }
+
+
+
+
 /** File stat **/
 .file_stats {
   span {
@@ -530,90 +577,6 @@ h4.dash-tabs {
   }
 }
 
-body header { 
-  position:absolute;
-  width:100%;
-  padding:0;
-  margin:0;
-  top:0;
-  left:0;
-  background: #999; /* for non-css3 browsers */
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#EAEAEA'); /* for IE */
-  background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#EAEAEA)); /* for webkit browsers */
-  background: -moz-linear-gradient(top,  #FAFAFA,  #EAEAEA); /* for firefox 3.6+ */ 
-  border-bottom: 1px solid #ccc; 
-
-  height:50px;
-
-  .wrapper { 
-    margin:auto;
-    width:980px;
-    padding: 10px 0;
-    font-size: 11px;
-    position:relative;
-  }
-  .project_name {
-    float:left;
-    width:235px;
-    margin-right:30px;
-    font-size:16px;
-    font-weight:bold;
-    padding:5px 7px;
-    color:#333;
-  }
-
-  .git_url_wrapper {
-    padding:0px;
-    margin:0px;
-    float:left;
-
-    .git-url {
-      padding:0px;
-      margin:0px;
-      font-size: 12px;
-
-      margin-right:10px;
-      border-radius: 4px;
-      -moz-border-radius: 4px;
-
-
-      color: #666; 
-      border: 1px solid #AAA;
-      padding:  0 10px 0 30px;
-      background: white url('images.png') no-repeat 8px -42px; 
-      width: 160px;
-      height:26px;
-    }
-  }
-}
-
-.top_panel_holder .chzn-container { 
-  position:relative;
-
-  .chzn-drop { 
-    margin:7px 0;
-    border: 1px solid #CCC;
-    min-width: 300px;
-
-    .chzn-results { 
-      max-height:300px;
-    }
-  }
-
-  .chzn-single { 
-    background:white;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-
-    div { 
-      background:white;
-    }
-
-    span { 
-      font-weight: normal;
-    }
-  }
-}
 
 .dashboard-loader { 
   float:right;
@@ -801,68 +764,9 @@ tr.line_notes_row {
     }
   }
 }
-.top_links_holder {
-  width:124px;
-  float:left;
 
-  .top_link {
-    position: relative;
-    float:left;
 
-    &.home { 
-      width:28px;  
-      height:27px;
-      top: -12px;
-      border: 1px solid #CCC;
-      border-radius: 3px;
-      background: #fff;
 
-      margin-right:15px;
-      padding: 6px 7px;
-    }
 
-    &.admin { 
-      top: -3px;
-      padding: 3px;
-      width: 21px;
-      height: 21px;
-    }
-  }
-}
 
 
-.dash_top_link { 
-  margin: 4px 14px;
-  float: left;
-  font-size: 14px;
-
-  &.active { 
-    color:#2FA0BB;
-  }
-  &:hover { 
-    color:#2FA0BB;
-  }
-}
-
-.top-tabs { 
-  margin: 0; 
-  padding: 5px;
-  font-size: 14px;
-  padding-bottom:10px;
-  margin-bottom:20px;
-  height:26px;
-  border-bottom:1px solid #ccc;
-
-  .tab { 
-    font-weight: bold;
-    background:none;
-    padding: 10px;
-    float:left;
-    padding-left:0px;
-    padding-right:40px;
-
-    &.active {
-      color: #2FA0BB;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/style.scss b/app/assets/stylesheets/style.scss
index 916f6744ffe..08b5550f25f 100644
--- a/app/assets/stylesheets/style.scss
+++ b/app/assets/stylesheets/style.scss
@@ -333,15 +333,6 @@ body.login-page{background-color: #f1f1f1; padding-top: 10%}
 }
 /* eo InfoBlock */
 
-/* General */
-#container{background-color: white; overflow: hidden; }
-body.collapsed #container{ 
-  margin: auto;
-  margin-top:51px;
-  width: 980px;
-  border-top: 0;
-}
-
 /* Header */
 header{
   background: #474D57 url('bg-header.png') repeat-x bottom;
@@ -600,139 +591,12 @@ html, body { height: 100%; }
 
 
 
-body.dashboard-page h2.icon span{ background-position:  9px -69px; }
-body.dashboard-page header{margin-bottom: 0}
-body.dashboard-page .news-feed{margin-left: 290px; min-height: 600px; margin-top: 20px; margin-right:2px;}
-body.dashboard-page .dashboard-content{ position: relative; float: left; width: 100%; height: 100%; }
-body.dashboard-page .news-feed h2{float: left;}
-body.dashboard-page aside{ min-height: 820px; position: relative; top: 0; bottom: 0; right: 0; width: 260px;  float: left;  border-right: 1px solid #ccc }
-body.dashboard-page aside h4{margin: 0; border-bottom: 1px solid #ccc; padding: 20px 20px 20px 0px; font-size: 11px; font-weight: bold; text-transform: uppercase;}
-body.dashboard-page aside h4 a.button-small{float: right; text-transform: none; border-radius: 4px; margin-right: 2%; margin-top: -4px; display: block;}
-body.dashboard-page aside .project-list {list-style: none; margin: 0; padding: 0;}
-body.dashboard-page aside .project-list li a {background: white;  color: #{$blue_link}; display: block; border-bottom: 1px solid #eee; padding: 14px 6% 14px 0px;}
-//body.dashboard-page aside .project-list li a:hover {background: #f1f1f1}
-//body.dashboard-page aside .project-list li a:hover span.arrow{background-color: #E3E5EA;}
-body.dashboard-page aside .project-list li a span.project-name{font-size: 14px; display: block; margin-bottom: 8px}
-body.dashboard-page aside .project-list li a span.time{color: #666; font-weight: normal; font-size: 11px}
-body.dashboard-page aside .project-list li a span.arrow{float: right; background: #E3E5EA; padding: 10px; border-radius: 5px; margin-top: 2px; text-shadow: none; color: #999}
-body.dashboard-page .news-feed .project-updates  {margin-bottom: 20px; display: block; width: 100%;}
-body.dashboard-page .news-feed .project-updates .data{ padding: 0}
-body.dashboard-page .news-feed .project-updates a.project-update {padding: 10px; overflow: hidden; display: block;}
-body.dashboard-page .news-feed .project-updates a.project-update:last-child{border-bottom: 0}
-body.dashboard-page .news-feed .project-updates a.project-update img{float: left; margin-right: 10px;}
-body.dashboard-page .news-feed .project-updates a.project-update span.update-title, .dashboard-page .news-feed .project-updates li a span.update-author{display: block;}
-body.dashboard-page .news-feed .project-updates a.project-update span.update-title{margin-bottom: 10px}
-body.dashboard-page .news-feed .project-updates a.project-update span.update-author{color: #999; font-weight: normal; font-style: italic;}
-body.dashboard-page .news-feed .project-updates a.project-update span.update-author strong{font-weight: bold; font-style: normal;}
-/* eo Dashboard Page */
 
 .grey-button.right{margin-top: 20px}
 
 /* Project Page */
-
-body.project-page h2.icon .project-name, body.project-page h2.icon d{border: 1px solid #eee; padding: 5px 30px 5px 10px; border-radius: 5px; position: relative;}
-body.project-page h2.icon .project-name i.arrow{float: right;
-  position: absolute;
-  right: 10px;
-  top: 13px;
-  display: block;
-  background: url('images.png') no-repeat -97px -29px;
-  width: 4px;
-  height: 5px;
-}
-
-body.project-page h2.icon span{  background-position:  -78px -68px; }
-body.project-page .project-container{ position: relative; float: left; width: 100%; height: 100%; padding-bottom: 10px;}
-body.project-page .page-title{margin-bottom: 0}
-body.project-page .project-sidebar {width: 110px;  left: 0; top: 0; height: 100%; bottom: 0;  position: absolute; float: left; display: inline-block; background: #FFF; padding: 20px 0 20px 0; margin: 0; border-right: 1px solid #ddd; }
-
-body.projects-page input.text.git-url { font-size: 12px; border-radius: 5px; color: #666; box-shadow: 0 1px 2px rgba(0,0,0,.2) inset; padding:  8px 0 8px 30px;  margin-bottom: 20px;  background: white url('images.png') no-repeat 8px -40px; width: 136px}
-body.projects-page input.text.git-url {margin:10px 0 0 }
-.git_url_wrapper { margin-right:50px }
-
-.projects_selector:hover > .project-box{ -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .1); -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .1); box-shadow:0px 0px 10px rgba(0, 0, 0, .1); }
-
-body.project-page .project-sidebar aside{width: 109px}
-body.project-page .project-sidebar aside a{
-  display: block;
-  position: relative; 
-  //background: #FFF; 
-  padding: 15px 10px; 
-  //border: 1px solid #ccc; 
-  margin: 10px 0 0 0;
-  //border-radius:5px;
-
-
-}
-//body.project-page .project-sidebar aside a:hover{background-color: #FFFFFF;}
-body.project-page .project-sidebar aside a span.number{float: right; border-radius: 5px; text-shadow: none; background: rgba(0,0,0,.12); text-align: center; padding: 5px 8px; position: absolute; top: 10px; right: 10px}
-body.project-page .project-sidebar aside a.current {
-  color: white;
-  background: #79C3E0;
-  border: 1px solid #2FA0BB;
-  border-radius:5px;
-
-
-  -webkit-border-top-right-radius: 0;
-  -webkit-border-bottom-right-radius: 0;
-  -moz-border-radius-topright: 0px;
-  -moz-border-radius-bottomright: 0px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  margin-right: -1px;
-}
-body.project-page .project-content{ padding: 20px; display: block; margin-left: 110px; min-height: 600px}
-body.project-page .project-content h2{ margin-top: 6px}
-body.project-page .project-content .button.right{margin-left: 20px}
-body.project-page table .commit a{color: #{$blue_link}}
-body.project-page table th, body.project-page table td{  border-bottom: 1px solid #DEE2E3;}
-body.project-page .fixed{position: fixed; }
-
-/* New project Page */
-.new-project-page .container table{background: white}
 /* eo New Project Page */
 
-/* Commit Page */
-body.project-page.commits-page .commit-info{float: right;}
-body.project-page.commits-page .commit-info data{
-  padding: 4px 10px;
-  font-size: 11px;
-}
-body.project-page.commits-page .commit-info data.commit-button{
-  background-image: -webkit-gradient(linear, 0 0, 0 26, color-stop(0.192, #fff), to(#f4f4f4));
-  background-image: -webkit-linear-gradient(#fff 19.2%, #f4f4f4);
-  background-image: -moz-linear-gradient(#fff 19.2%, #f4f4f4);
-  background-image: -o-linear-gradient(#fff 19.2%, #f4f4f4);
-  box-shadow: 0 -1px 0 white inset;
-  display: block;
-  border: 1px solid #eee;
-  border-radius: 5px;
-  margin-bottom: 2px;
-  position: relative;
-  padding-right: 20px;
-}
-
-body.project-page.commits-page .commit-button i{
-  background: url('images.png') no-repeat -138px -27px;
-  width: 6px;
-  height: 9px;
-  float: right;
-  position: absolute;
-  top: 6px;
-  right: 5px;
-}
-body.project-page.commits-page .commits-date {display: block; width: 100%; margin-bottom: 20px}
-body.project-page.commits-page .commits-date .data {padding: 0}
-body.project-page.commits-page a.commit{padding: 10px; border-bottom: 1px solid #eee; overflow: hidden; display: block;}
-body.project-page.commits-page .commits-date a.commit {padding: 10px; border-bottom: none; overflow: hidden; display: block;}
-body.project-page.commits-page .commits-date a.commit:last-child{border-bottom: 0}
-body.project-page.commits-page .commits-date a.commit img{float: left; margin-right: 10px;}
-body.project-page.commits-page .commits-date a.commit span.commit-title{display: block;}
-body.project-page.commits-page .commits-date a.commit span.commit-title{margin-bottom: 10px}
-body.project-page.commits-page .commits-date a.commit span.commit-author{color: #999; font-weight: normal; font-style: italic;}
-body.project-page.commits-page .commits-date a.commit span.commit-author strong{font-weight: bold; font-style: normal;}
-
-/* eo Commit Page */
 
 /* eo Project Page */
 
diff --git a/app/assets/stylesheets/top_panel.scss b/app/assets/stylesheets/top_panel.scss
new file mode 100644
index 00000000000..e529397eabc
--- /dev/null
+++ b/app/assets/stylesheets/top_panel.scss
@@ -0,0 +1,146 @@
+.main_links {
+  width:124px;
+  float:left;
+  a {
+    position: relative;
+    float:left;
+    padding: 4px;
+
+    &.home { 
+      margin-right:15px;
+      width: 26px;
+    }
+
+    &.admin { 
+      width: 21px;
+    }
+  }
+}
+
+.dashboard_links { 
+  padding:7px;
+  float:left;
+  a {
+    margin: 0 14px;
+    float: left;
+    font-size: 14px;
+
+    &.active { 
+      color:$active_link_color;
+    }
+    &:hover { 
+      color:$active_link_color;
+    }
+  }
+}
+
+.top-tabs { 
+  margin: 0; 
+  padding: 5px;
+  font-size: 14px;
+  padding-bottom:10px;
+  margin-bottom:20px;
+  height:26px;
+  border-bottom:1px solid #ccc;
+
+  .tab { 
+    font-weight: bold;
+    background:none;
+    padding: 10px;
+    float:left;
+    padding-left:0px;
+    padding-right:40px;
+
+    &.active {
+      color: $active_link_color;
+    }
+  }
+}
+
+body header { 
+  position:absolute;
+  width:100%;
+  padding:0;
+  margin:0;
+  top:0;
+  left:0;
+  background: #999; /* for non-css3 browsers */
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EAEAEA'); /* for IE */
+  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EAEAEA)); /* for webkit browsers */
+  background: -moz-linear-gradient(top,  #FFFFFF,  #EAEAEA); /* for firefox 3.6+ */ 
+  border-bottom: 2px solid $styled_border_color; 
+
+  height:50px;
+
+  .wrapper { 
+    margin:auto;
+    width:$app_width;
+    position:relative;
+    
+    .top_panel_content { 
+      padding:10px $app_padding;
+    }
+  }
+
+  .project_name {
+    float:left;
+    width:235px;
+    margin-right:30px;
+    font-size:16px;
+    font-weight:bold;
+    padding:5px 7px;
+    color:#333;
+  }
+
+  .git_url_wrapper {
+    padding:0px;
+    margin:0px;
+    float:left;
+
+    .git-url {
+      padding:0px;
+      margin:0px;
+      font-size: 12px;
+
+      margin-right:10px;
+      border-radius: 4px;
+      -moz-border-radius: 4px;
+
+
+      color: #666; 
+      border: 1px solid #AAA;
+      padding:  0 10px 0 30px;
+      background: white url('images.png') no-repeat 8px -42px; 
+      width: 160px;
+      height:26px;
+    }
+  }
+}
+
+.top_panel_holder .chzn-container { 
+  position:relative;
+
+  .chzn-drop { 
+    margin:7px 0;
+    border: 1px solid #CCC;
+    min-width: 300px;
+
+    .chzn-results { 
+      max-height:300px;
+    }
+  }
+
+  .chzn-single { 
+    background:white;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+
+    div { 
+      background:white;
+    }
+
+    span { 
+      font-weight: normal;
+    }
+  }
+}
diff --git a/app/views/layouts/_head_panel.html.haml b/app/views/layouts/_head_panel.html.haml
index da351d07093..c2943d049ed 100644
--- a/app/views/layouts/_head_panel.html.haml
+++ b/app/views/layouts/_head_panel.html.haml
@@ -1,53 +1,52 @@
 / Page Header
 %header.top_panel_holder
   .wrapper
-    %div.top_links_holder
-      = link_to root_path, :class => "top_link home", :title => "Home" do 
-        = image_tag "Home-UI.PNG", :width => 26
-      - if current_user.is_admin?
-        = link_to admin_root_path, :class => "top_link admin", :title => "Admin"  do 
-          = image_tag "Gear-UI.PNG", :width => 20
+    .top_panel_content
+      %div.main_links
+        = link_to root_path, :class => "home", :title => "Home" do 
+          = image_tag "Home-UI.PNG", :width => 26
+        - if current_user.is_admin?
+          = link_to admin_root_path, :class => "admin", :title => "Admin"  do 
+            = image_tag "Gear-UI.PNG", :width => 20
 
 
-    - if project_layout
-      .project_name
-        = truncate @project.name, :length => 28
-      .git_url_wrapper
-        %input.git-url.text{:id => "", :name => "", :readonly => "", :type => "text", :value => @project.url_to_repo, :class => "one_click_select"}
-      - if @project.repo_exists?
-        .left{:style => "margin-left:5px;"}
-          = render :partial => "projects/refs", :locals => { :destination => controller.controller_name == "commits" ? "commits" : "tree" }
-      = yield :rss_icon
 
-    - elsif profile_layout
-      = link_to "Activities", dashboard_path, :class => "dash_top_link #{"active" if current_page?(dashboard_path) || current_page?(root_path) }"
-      = link_to "Projects", projects_path, :class => "dash_top_link #{"active" if current_page?(projects_path)}"
-      = link_to "Issues", dashboard_issues_path, :class => "dash_top_link #{"active" if current_page?(dashboard_issues_path)}", :id => "issues_slide"
-      = link_to "Merge Requests", dashboard_merge_requests_path, :class => "dash_top_link #{"active" if current_page?(dashboard_merge_requests_path)}", :id => "merge_requests_slide"
-      .search
-        = text_field_tag "search", nil, :placeholder => "Search", :class => "search-input"
+      - if project_layout
+        .project_name
+          = truncate @project.name, :length => 28
+        .git_url_wrapper
+          %input.git-url.text{:id => "", :name => "", :readonly => "", :type => "text", :value => @project.url_to_repo, :class => "one_click_select"}
+        - if @project.repo_exists?
+          .left{:style => "margin-left:5px;"}
+            = render :partial => "projects/refs", :locals => { :destination => controller.controller_name == "commits" ? "commits" : "tree" }
+        = yield :rss_icon
 
-    .account-box
-      = link_to profile_path, :class => "pic" do
-        = image_tag gravatar_icon(current_user.email)
-      .account-links
-        = link_to profile_path, :class => "username" do
-          My profile
-        = link_to 'Logout', destroy_user_session_path, :class => "logout", :method => :delete
-    / .account-box
-    -#.search
-      = text_field_tag "search", nil, :placeholder => "Search", :class => "search-input"
-    / .login-top
-  - if current_user
-    = javascript_tag do
-      $(function(){
-      $("#search").autocomplete({
-      source: #{raw search_autocomplete_source},
-      select: function(event, ui) { location.href = ui.item.url }
-      });
-      });
+      - elsif profile_layout
+        .dashboard_links
+          = link_to "Activities", dashboard_path, :class => "#{"active" if current_page?(dashboard_path) || current_page?(root_path) }"
+          = link_to "Projects", projects_path, :class => "#{"active" if current_page?(projects_path)}"
+          = link_to "Issues", dashboard_issues_path, :class => "#{"active" if current_page?(dashboard_issues_path)}", :id => "issues_slide"
+          = link_to "Merge Requests", dashboard_merge_requests_path, :class => "#{"active" if current_page?(dashboard_merge_requests_path)}", :id => "merge_requests_slide"
+        .search
+          = text_field_tag "search", nil, :placeholder => "Search", :class => "search-input"
 
-  - if current_user.require_ssh_key?
-    #no_ssh_key_defined.big-message.error
-      %p
-        No SSH Key is defined. You won't be able to use any Git command!. Click #{link_to( 'here', keys_path )} to add one!
+      .account-box
+        = link_to profile_path, :class => "pic" do
+          = image_tag gravatar_icon(current_user.email)
+        .account-links
+          = link_to profile_path, :class => "username" do
+            My profile
+          = link_to 'Logout', destroy_user_session_path, :class => "logout", :method => :delete
+    - if current_user
+      = javascript_tag do
+        $(function(){
+        $("#search").autocomplete({
+        source: #{raw search_autocomplete_source},
+        select: function(event, ui) { location.href = ui.item.url }
+        });
+        });
+
+    -#- if current_user.require_ssh_key?
+      #no_ssh_key_defined.big-message.error
+        %p
+          No SSH Key is defined. You won't be able to use any Git command!. Click #{link_to( 'here', keys_path )} to add one!