More readable styling

ui/app/css/main.css

@@ -38,16 +38,16 @@ header #logo {
 	padding: 2.5em;
 }
 
-.alert-group {
-	margin-bottom: 24px;
-}
-
 #silence-create {
 	background: #fff;
 	width: 100%;
 	min-width: 400px;
 }
 
+.alert-group {
+	margin-bottom: 5px;
+}
+
 .silence .labels, .alert-item .labels {
 	cursor: pointer;
 }
@@ -55,6 +55,11 @@ header #logo {
 	width: 75%;
 }
 
+.alert-group-header {
+	border-bottom: 1px solid #fff;
+	background: #bfbfbf;
+	padding: .8em;
+}
 
 .silence .delete-button, .alert-item .silence-button {
 	opacity: 0.2;
@@ -63,7 +68,11 @@ header #logo {
 	opacity: 1.0;
 }
 
-.silence .overview, .alert-item .overview {
+.alert-item .overview {
+	background: #f0f0f0;
+	padding: .8em;
+}
+.silence .overview {
 	background: #bfbfbf;
 	padding: .8em;
 }
@@ -133,12 +142,8 @@ header #logo {
 
 .silence-alert {
 	background: #f0f0f0;
-}
-
-.alert-group-header {
+	border-top: 1px solid #fff;
 	border-bottom: 1px solid #fff;
-	background: #f0f0f0;
-	padding: .5em .6em;
 }
 
 input.collapse[type=checkbox] {

ui/app/partials/alert.html

@@ -2,7 +2,7 @@
 	<div class="overview group">
 		<div class="labels left" ng-click="toggleDetails()">
 			<span ng-repeat="(name, value) in alert.labels | orderBy:name">
-				<span ng-hide="group[name]" class="lbl {{ name == 'alertname' ? 'lbl-highlight' : '' }}">
+				<span ng-hide="group[name]" class="lbl {{ name == 'alertname' ? 'lbl-highlight' : 'lbl-outline' }}">
 					{{ name }} = '{{ value }}'
 				</span>
 			</span>

ui/app/partials/alerts.html

@@ -5,15 +5,15 @@
 </div>
 
 <div id="alert-groups" ng-controller="AlertsCtrl">
-	<div ng-repeat="group in groups">
+	<div class="alert-group" ng-repeat="group in groups">
 		<div class="alert-group-header group">
-			<span ng-repeat="(ln, lv) in group.labels" class="lbl {{ ln == 'alertname' ? 'lbl-highlight' : 'lbl-outline' }}">
+			<span ng-repeat="(ln, lv) in group.labels" class="lbl {{ ln == 'alertname' ? 'lbl-highlight' : '' }}">
 				{{ ln }} = '{{ lv }}'
 			</span>
 		</div>	
 	
 		<div ng-repeat="g in group.groups">
-			<div ng-show="destinations.indexOf(g.routeOpts.sendTo) >= 0" class="alert-group" ng-show"g.alerts">
+			<div ng-show="destinations.indexOf(g.routeOpts.sendTo) >= 0" ng-show"g.alerts">
 				<div ng-repeat="a in g.alerts">
 					<alert class="list-item" alert="a" group="group.labels"></alert>
 				</div>