better looking tabs

css/helios.css

@@ -156,20 +156,17 @@ body[id="helios"] .dialog .nav a span.inspector {
 }
 body[id="helios"] .navbar-fixed-top .navbar-inner {
   min-height: 20px;
-  background-color: #dbdbdb;
   border-bottom: 1px solid #666;
-  background-image: linear-gradient(top, #dfdfdf, #d0d0d0);
-  background-image: -webkit-linear-gradient(top, #dfdfdf, #d0d0d0);
-  background-image: -moz-linear-gradient(top, #dfdfdf, #d0d0d0);
-  background-image: -owebkit-linear-gradient(top, #dfdfdf, #d0d0d0);
   box-shadow: 0 0 0;
+  background: #bababa;
 }
 body[id="helios"] .navbar .nav > li {
   line-height: 16px;
   text-align: center;
 }
-body[id="helios"] .navbar .nav > li.new_tab {
-  width: 85px;
+body[id="helios"] .navbar .nav > li .new_tab {
+  width: 60px;
+  border-right: 0 none;
 }
 body[id="helios"] .dropdown-menu {
   min-width: 0;
@@ -179,10 +176,9 @@ body[id="helios"] .navbar .nav > li > a {
   line-height: 22px;
   padding: 0px 8px;
   font-size: 11px;
-  color: #444;
-  text-shadow: 0 1px 0 #ddd;
-  border-left: 1px solid #aaa;
-  border-right: 1px solid transparent;
+  border-right: 1px solid #777;
+  text-shadow: #ddd 0px 1px 0px;
+  color: #222;
 }
 body[id="helios"] .navbar .nav > li > a span {
   display: block;
@@ -197,12 +193,13 @@ body[id="helios"] .navbar .nav > .active + li a {
 body[id="helios"] .navbar .nav > .active > a,
 body[id="helios"] .navbar .nav > .active > a:hover,
 body[id="helios"] .navbar .nav > .active > a:focus {
-  border-left: 0 none;
-  background-color: #bababa;
-  border-left: 1px solid #777;
-  border-right: 1px solid #777;
-  text-shadow: #ddd 0px 1px 0px;
-  color: #222;
+  color: #444;
+  background-image: linear-gradient(top, #dfdfdf, #d0d0d0);
+  background-image: -webkit-linear-gradient(top, #dfdfdf, #d0d0d0);
+  background-image: -moz-linear-gradient(top, #dfdfdf, #d0d0d0);
+  background-image: -o-linear-gradient(top, #dfdfdf, #d0d0d0);
+  text-shadow: 0 1px 0 #ddd;
+  box-shadow: 0 0 0;
 }
 body[id="helios"] .navbar-fixed-top i {
   opacity: 0.4;

css/helios.less

@@ -186,21 +186,20 @@ body[id="helios"] {
 
 	.navbar-fixed-top .navbar-inner {
 		min-height: 20px;
-		background-color: #dbdbdb;
 		border-bottom: 1px solid #666;
-		background-image: linear-gradient(top, #dfdfdf, #d0d0d0);
-		background-image: -webkit-linear-gradient(top, #dfdfdf, #d0d0d0);
-		background-image: -moz-linear-gradient(top, #dfdfdf, #d0d0d0);
-		background-image: -owebkit-linear-gradient(top, #dfdfdf, #d0d0d0);
 		box-shadow: 0 0 0;
+		background: #bababa;
 	}
 
-	.navbar .nav > li {
-		line-height: 16px;
-		text-align: center;
-		
-		&.new_tab {
-			width: 85px;
+	.navbar .nav {
+		> li {
+			line-height: 16px;
+			text-align: center;
+			
+			.new_tab {
+				width: 60px;
+				border-right: 0 none;
+			}
 		}
 	}
 
@@ -213,10 +212,9 @@ body[id="helios"] {
 		line-height: 22px;
 		padding: 0px 8px;
 		font-size: 11px;
-		color: #444;
-		text-shadow: 0 1px 0 #ddd;
-		border-left: 1px solid #aaa;
-		border-right: 1px solid transparent;
+		border-right: 1px solid #777;
+		text-shadow: #ddd 0px 1px 0px;
+		color: #222;
 
 		span {
 			display: block;
@@ -237,12 +235,13 @@ body[id="helios"] {
 	.navbar .nav > .active > a,
 	.navbar .nav > .active > a:hover,
 	.navbar .nav > .active > a:focus {
-		border-left: 0 none;
-		background-color: #bababa;
-		border-left: 1px solid #777;
-		border-right: 1px solid #777;
-		text-shadow: #ddd 0px 1px 0px;
-		color: #222;
+		color: #444;
+		background-image: linear-gradient(top, #dfdfdf, #d0d0d0);
+		background-image: -webkit-linear-gradient(top, #dfdfdf, #d0d0d0);
+		background-image: -moz-linear-gradient(top, #dfdfdf, #d0d0d0);
+		background-image: -o-linear-gradient(top, #dfdfdf, #d0d0d0);
+		text-shadow: 0 1px 0 #ddd;
+		box-shadow: 0 0 0;
 	}
 
 	.navbar-fixed-top i {

src/Helios-Core.js

@@ -4194,11 +4194,11 @@ fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
 var $1;
-$1=_st(_st(_st(_st(window)._asJQuery())._width()).__minus((100))).__slash(_st(self._tabs())._size());
+$1=_st(_st(_st(_st(window)._asJQuery())._width()).__minus((90))).__slash(_st(self._tabs())._size());
 return $1;
 }, function($ctx1) {$ctx1.fill(self,"tabWidth",{},globals.HLManager)})},
 args: [],
-source: "tabWidth\x0a\x09^ (window asJQuery width - 100) / self tabs size",
+source: "tabWidth\x0a\x09^ (window asJQuery width - 90) / self tabs size",
 messageSends: ["/", "-", "width", "asJQuery", "size", "tabs"],
 referencedClasses: []
 }),

src/Helios-Core.st

@@ -1200,7 +1200,7 @@ keyBinder
 !
 
 tabWidth
-	^ (window asJQuery width - 100) / self tabs size
+	^ (window asJQuery width - 90) / self tabs size
 !
 
 tabs