helios: some small css improvements

css/helios.css

@@ -514,7 +514,7 @@ html[xmlns] .clearfix {
 #helios .key_helper .command {
   padding: 0 2px;
 }
-#helios #binding-helper-main {
+#helios .key_helper #binding-helper-main {
   display: inline;
 }
 #helios .key_helper .label {
@@ -566,12 +566,12 @@ html[xmlns] .clearfix {
   color: #B91010;
   font-weight: bold;
 }
-#helios .typeahead.dropdown-menu {
+#helios .key_helper .typeahead.dropdown-menu {
   position: fixed !important;
   top: auto !important;
   bottom: 30px !important;
 }
-#helios #cog-helper {
+#helios .key_helper #cog-helper {
   position: fixed;
   bottom: 2px;
   right: 2px;
@@ -583,7 +583,7 @@ html[xmlns] .clearfix {
   -o-transition: all .5s;
   -ms-transition: all .5s;
 }
-#helios #cog-helper:hover {
+#helios .key_helper #cog-helper:hover {
   opacity: 1;
 }
 #helios #helper {
@@ -632,24 +632,31 @@ html[xmlns] .clearfix {
   -moz-transition: top .5s;
   -o-transition: top .5s;
 }
-#helios .confirmation.large,
-#helios .dialog.large {
+#helios .confirmation .title,
+#helios .dialog .title {
+  font-size: 16px;
+  margin-bottom: 15px;
+}
+#helios .confirmation .large,
+#helios .dialog .large {
   width: 400px;
   margin-left: -220px;
 }
+#helios .confirmation .large textarea,
+#helios .dialog .large textarea {
+  width: 385px;
+  height: 200px;
+}
 #helios .confirmation textarea,
 #helios .dialog textarea {
   display: block;
   width: 235px;
 }
-#helios .confirmation.large textarea,
-#helios .dialog.large textarea {
-  width: 385px;
-  height: 200px;
-}
+#helios .confirmation .progress,
 #helios .dialog .progress {
   height: 5px;
 }
+#helios .confirmation .progress .bar,
 #helios .dialog .progress .bar {
   background-color: #e9eaf5;
   background-image: -webkit-linear-gradient(top, #b1bdd5, #8999b8);

css/helios.less

@@ -595,93 +595,94 @@ html[xmlns] .clearfix {
 	border-top: 1px solid #aaa;
 	font-size: 11px;
 	height: 22px;
-    }
 
-    .key_helper .command {
-	padding: 0 2px;
-    }
+	.command {
+	    padding: 0 2px;
+	}
 
-    #binding-helper-main {
-	display: inline;
-    }
+	#binding-helper-main {
+	    display: inline;
+	}
 
-    .key_helper .label {
-	padding: 1px 4px;
-	font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
-	background: transparent;
-	color: #08C;
-	text-shadow: none;
-	border: 0 none;
-    }
+	.label {
+	    padding: 1px 4px;
+	    font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+	    background: transparent;
+	    color: #08C;
+	    text-shadow: none;
+	    border: 0 none;
+	}
 
-    .key_helper .action {
-	padding: 0 5px;
-	color: #666;
-    }
+	.action {
+	    padding: 0 5px;
+	    color: #666;
+	}
 
-    .key_helper .selected {
-	background-image: linear-gradient(top, #ccc, #aaa);
-	background-image: -moz-linear-gradient(top, #ccc, #aaa);
-	background-image: -o-linear-gradient(top, #ccc, #aaa);
-	background-image: -webkit-linear-gradient(top, #ccc, #aaa);
-	height: 30px;
-	padding: 0 8px;
-	color: #333;
-	font-weight: bold;
-	text-shadow: 0 1px 0 #fff;
-	display: inline-block;
-	border-right: 1px solid #aaa;
-    }
+	.selected {
+	    background-image: linear-gradient(top, #ccc, #aaa);
+	    background-image: -moz-linear-gradient(top, #ccc, #aaa);
+	    background-image: -o-linear-gradient(top, #ccc, #aaa);
+	    background-image: -webkit-linear-gradient(top, #ccc, #aaa);
+	    height: 30px;
+	    padding: 0 8px;
+	    color: #333;
+	    font-weight: bold;
+	    text-shadow: 0 1px 0 #fff;
+	    display: inline-block;
+	    border-right: 1px solid #aaa;
+	}
 
-    .key_helper .close {
-	font-size: 14px;
-	line-height: 26px;
-	opacity: 0.6;
-    }
+	.close {
+	    font-size: 14px;
+	    line-height: 26px;
+	    opacity: 0.6;
+	}
 
-    .key_helper .close:hover {
-	opacity: 0.8;
-    }
+	.close:hover {
+	    opacity: 0.8;
+	}
 
-    .key_helper input {
-	outline: none;
-	font-size: 11px;
-	padding: 2px 8px;
-	background: #fff;
-	border: 1px solid #a1a1a1;
-	border-radius: 12px;
-	box-shadow: inset 0 0px 2px 0px #aaa;
-	margin: 2px 4px;
-	line-height: 1em;
-    }
+	input {
+	    outline: none;
+	    font-size: 11px;
+	    padding: 2px 8px;
+	    background: #fff;
+	    border: 1px solid #a1a1a1;
+	    border-radius: 12px;
+	    box-shadow: inset 0 0px 2px 0px #aaa;
+	    margin: 2px 4px;
+	    line-height: 1em;
+	}
 
-    .key_helper .error .help-inline,
-    .key_helper .error input {
-	color: #B91010;
-	font-weight: bold;
-    }
+	.error .help-inline,
+	.error input {
+	    color: #B91010;
+	    font-weight: bold;
+	}
 
-    .typeahead.dropdown-menu {
-	position: fixed !important;
-	top: auto !important;
-	bottom: 30px !important;
-    }
+	.typeahead.dropdown-menu {
+	    position: fixed !important;
+	    top: auto !important;
+	    bottom: 30px !important;
+	}
 
-    #cog-helper {
-	position: fixed;
-	bottom: 2px;
-	right: 2px;
-	z-index: 1000;
-	opacity: 0.6;
-	transition: all .5s;
-	-webkit-transition: all .5s;
-	-moz-transition: all .5s;
-	-o-transition: all .5s;
-	-ms-transition: all .5s;
-    }
+	#cog-helper {
+	    position: fixed;
+	    bottom: 2px;
+	    right: 2px;
+	    z-index: 1000;
+	    opacity: 0.6;
+	    transition: all .5s;
+	    -webkit-transition: all .5s;
+	    -moz-transition: all .5s;
+	    -o-transition: all .5s;
+	    -ms-transition: all .5s;
+	}
+
+	#cog-helper:hover {
+	    opacity: 1;
+	}
 
-    #cog-helper:hover {
-	opacity: 1;
     }
 
     #helper {
@@ -730,54 +731,53 @@ html[xmlns] .clearfix {
 	-webkit-transition: top .5s;
 	-moz-transition: top .5s;
 	-o-transition: top .5s;
-    }
 
-    .confirmation.large,
-    .dialog.large {
-	width: 400px;
-	margin-left: -220px;
-    }
+	.title {
+	    font-size: 16px;
+	    margin-bottom: 15px;
+	}
 
-    .confirmation textarea,
-    .dialog textarea {
-	display: block;
-	width: 235px;
-    }
+	.large {
+	    width: 400px;
+	    margin-left: -220px;
 
-    .confirmation.large textarea,
-    .dialog.large textarea {
-	width: 385px;
-	height: 200px;
-    }
+	    textarea {
+		width: 385px;
+		height: 200px;
+	    }
+	}
 
-    .dialog .progress {
-	height: 5px;
-    }
+	textarea {
+	    display: block;
+	    width: 235px;
+	}
 
-    .dialog .progress .bar {
-	background-color: #e9eaf5;
-	background-image: -webkit-linear-gradient(top, #B1BDD5, #8999b8);
-	background-image: -moz-linear-gradient(top, #B1BDD5, #8999b8);
-	background-image: -o-linear-gradient(top, #B1BDD5, #8999b8);
-	background-image: linear-gradient(top, #B1BDD5, #8999b8);
-	
-    }
 
-    .confirmation span,
-    .dialog span {
-	font-size: 13px;
-	font-weight: bold;
-    }
+	.progress {
+	    height: 5px;
 
-    .confirmation .buttons,
-    .dialog .buttons {
-	text-align: right;
-	margin-top: 20px;
-    }
+	    .bar {
+		background-color: #e9eaf5;
+		background-image: -webkit-linear-gradient(top, #B1BDD5, #8999b8);
+		background-image: -moz-linear-gradient(top, #B1BDD5, #8999b8);
+		background-image: -o-linear-gradient(top, #B1BDD5, #8999b8);
+		background-image: linear-gradient(top, #B1BDD5, #8999b8);
+	    }
+	}
 
-    .confirmation.active,
-    .dialog.active {
-	top: 0;
+	span {
+	    font-size: 13px;
+	    font-weight: bold;
+	}
+
+	.buttons {
+	    text-align: right;
+	    margin-top: 20px;
+	}
+
+	&.active {
+	    top: 0;
+	}
     }
 
     .button {