terminal styles

website/source/index.html.erb

@@ -84,9 +84,9 @@
 						<header>
 							<h4>Terminal</h4>
 							<ul class='shell-dots'>
-								<li></li>
-								<li></li>
-								<li></li>
+								<li class="d1"></li>
+								<li class="d2"></li>
+								<li class="d3"></li>
 							</ul>
 						</header>
 						<div class="terminal-window">

website/source/stylesheets/_home.less

@@ -255,21 +255,18 @@
 			}
 
 			.terminal{
-				background-color: darken(@gray-darker, 15%);
 				border-radius: 4px;
 
 				header{
 					position: relative;
-					background-color: @consul-gray;
 					text-align: center;
 					padding: 3px;
-					border-top-left-radius: 4px;
-					border-top-right-radius: 4px;
+					border-bottom: 2px solid #1e1e1e;
 
 					h4{
 						font-size: 14px;
 						letter-spacing: 1px;
-						color: @gray-darker;
+						color: white;
 						font-family: @font-family-lato;
 						font-weight: @font-weight-lato-xb;
 					}
@@ -281,11 +278,20 @@
 						padding-left: 0;
 
 						li{
+							&.d1{
+								background-color: #4a08a7;
+							}
+							&.d2{
+								background-color: #6517cf;
+							}
+							&.d3{
+								background-color: #7b29ee;
+							}
+
 							display: inline-block;
 							width: 12px;
 							height: 12px;
 							border-radius: 6px;
-							background-color: @gray-darker;
 							margin-left: 6px;
 						}
 					}
@@ -298,6 +304,7 @@
 					font-weight: normal;
 					font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
 					color: @white;
+					background-color: transparent;
 
 					.txt-r {
 						color: lighten(@red, 8%);;

website/source/stylesheets/main.css

@@ -769,21 +769,18 @@ body.page-sub #header {
   font-size: 16px;
 }
 #demos .terminals .terminal-item .terminal {
-  background-color: #2f2f2f;
   border-radius: 4px;
 }
 #demos .terminals .terminal-item .terminal header {
   position: relative;
-  background-color: #909090;
   text-align: center;
   padding: 3px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom: 2px solid #1e1e1e;
 }
 #demos .terminals .terminal-item .terminal header h4 {
   font-size: 14px;
   letter-spacing: 1px;
-  color: #555555;
+  color: white;
   font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 700;
 }
@@ -798,9 +795,17 @@ body.page-sub #header {
   width: 12px;
   height: 12px;
   border-radius: 6px;
-  background-color: #555555;
   margin-left: 6px;
 }
+#demos .terminals .terminal-item .terminal header ul.shell-dots li.d1 {
+  background-color: #4a08a7;
+}
+#demos .terminals .terminal-item .terminal header ul.shell-dots li.d2 {
+  background-color: #6517cf;
+}
+#demos .terminals .terminal-item .terminal header ul.shell-dots li.d3 {
+  background-color: #7b29ee;
+}
 #demos .terminals .terminal-item .terminal .terminal-window {
   min-height: 140px;
   padding: 20px;
@@ -808,6 +813,7 @@ body.page-sub #header {
   font-weight: normal;
   font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
   color: #ffffff;
+  background-color: transparent;
 }
 #demos .terminals .terminal-item .terminal .terminal-window .txt-r {
   color: #e47078;