Browse Source

Various css updates

Torkel Ödegaard 11 years ago
parent
commit
f82cb3aefe

+ 7 - 6
src/app/features/annotations/partials/editor.html

@@ -27,16 +27,17 @@
 							<i class="fa fa-bolt"></i> &nbsp;
 							<i class="fa fa-bolt"></i> &nbsp;
 							{{annotation.name}}
 							{{annotation.name}}
 						</td>
 						</td>
-						<td style="width: 1%">
-							<a ng-click="edit(annotation)" class="btn btn-success btn-small">
+						<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
+						<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
+
+						<td style="width: 1%" class="nobg">
+							<a ng-click="edit(annotation)" class="btn btn-inverse btn-mini">
 								<i class="fa fa-edit"></i>
 								<i class="fa fa-edit"></i>
 								Edit
 								Edit
 							</a>
 							</a>
 						</td>
 						</td>
-						<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
-						<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
-						<td style="width: 1%">
-							<a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-small">
+						<td style="width: 1%" class="nobg">
+							<a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-mini">
 								<i class="fa fa-remove"></i>
 								<i class="fa fa-remove"></i>
 							</a>
 							</a>
 						</td>
 						</td>

+ 3 - 3
src/app/features/profile/partials/profile.html

@@ -55,9 +55,9 @@
 
 
 		<table class="grafana-options-table">
 		<table class="grafana-options-table">
 			<tr ng-repeat="ac in accounts">
 			<tr ng-repeat="ac in accounts">
-				<td style="width: 98%">Name: {{ac.name}}</td>
-				<td>Role: {{ac.role}}</td>
-				<td>
+				<td style="width: 98%"><strong>Name: </strong> {{ac.name}}</td>
+				<td><strong>Role: </strong> {{ac.role}}</td>
+				<td class="nobg max-width-btns">
 					<span class="btn btn-primary" ng-show="ac.isUsing">
 					<span class="btn btn-primary" ng-show="ac.isUsing">
 						Current
 						Current
 					</span>
 					</span>

+ 22 - 2
src/css/less/tables_lists.less

@@ -3,13 +3,22 @@
 
 
   tr:nth-child(odd) td {
   tr:nth-child(odd) td {
     background-color: @grafanaListAccent;
     background-color: @grafanaListAccent;
+    &.nobg {
+      background-color: transparent;
+      border:none;
+      border-left: 1px solid @grafanaListBorderBottom;
+    }
   }
   }
 
 
-  td, th {
-    text-align: left;
+  td {
     padding: 5px 10px;
     padding: 5px 10px;
     white-space: nowrap;
     white-space: nowrap;
     border-bottom: 1px solid @grafanaListBorderBottom;
     border-bottom: 1px solid @grafanaListBorderBottom;
+    &.nobg {
+      background-color: transparent;
+      border:none;
+      border-left: 1px solid @grafanaListBorderBottom;
+    }
   }
   }
 
 
   tr:first-child {
   tr:first-child {
@@ -25,6 +34,17 @@
   td:last-child {
   td:last-child {
     border-right: 1px solid @grafanaListBorderBottom;
     border-right: 1px solid @grafanaListBorderBottom;
   }
   }
+
+  .max-width-btns {
+    .btn {
+      width: 100%;
+    }
+  }
+
+  strong {
+    font-weight: normal;
+    color: @white;
+  }
 }
 }
 
 
 .max-width {
 .max-width {

+ 4 - 4
src/css/less/variables.dark.less

@@ -16,7 +16,7 @@
 // Accent colors
 // Accent colors
 // -------------------------
 // -------------------------
 @blue:                  #33B5E5;
 @blue:                  #33B5E5;
-@blueDark:              #0086b3;
+@blueDark:              #005f81;
 @green:                 #669900;
 @green:                 #669900;
 @red:                   #CC3900;
 @red:                   #CC3900;
 @yellow:                #ECBB13;
 @yellow:                #ECBB13;
@@ -89,7 +89,7 @@
 @grafanaListAccent:      lighten(@grayDarker, 2%);
 @grafanaListAccent:      lighten(@grayDarker, 2%);
 @grafanaListBorderTop:      @grayDark;
 @grafanaListBorderTop:      @grayDark;
 @grafanaListBorderBottom:   @black;
 @grafanaListBorderBottom:   @black;
-@grafanaListHighlight:      #343434;
+@grafanaListHighlight:      #333;
 @grafanaListMainLinkColor: @textColor;
 @grafanaListMainLinkColor: @textColor;
 
 
 // Scrollbars
 // Scrollbars
@@ -110,8 +110,8 @@
 @btnBackgroundHighlight:            darken(@grayLight, 15%);
 @btnBackgroundHighlight:            darken(@grayLight, 15%);
 @btnBorder:                         #bbb;
 @btnBorder:                         #bbb;
 
 
-@btnPrimaryBackground:              lighten(@blueDark, 5%);
-@btnPrimaryBackgroundHighlight:     darken(@blueDark, 5%);
+@btnPrimaryBackground:              @blueDark;
+@btnPrimaryBackgroundHighlight:     lighten(@blueDark, 10%);
 
 
 @btnInfoBackground:                 lighten(@purple, 5%);
 @btnInfoBackground:                 lighten(@purple, 5%);
 @btnInfoBackgroundHighlight:        darken(@purple, 5%);
 @btnInfoBackgroundHighlight:        darken(@purple, 5%);