ux(css): more progress on css refactor / cleanup

public/app/plugins/panel/graph/graph_tooltip.js

@@ -34,7 +34,8 @@ function ($) {
     };
 
     this.showTooltip = function(absoluteTime, relativeTime, innerHtml, pos) {
-      var body = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ absoluteTime + '<br>(' + relativeTime + ')</div> ' ;
+      var body = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ absoluteTime +
+        ' <span class="tone-down">(' + relativeTime + ')</span></div> ';
       body += innerHtml + '</div>';
       $tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY);
     };

public/less/bootstrap/bootstrap.less

@@ -30,10 +30,6 @@
 // Components: Nav
 @import "navs.less";
 
-// Components: Popovers
-@import "tooltip.less";
-
-// Components: Misc
 @import "labels-badges.less";
 
 // Utility classes

public/less/components/color_picker.less

@@ -0,0 +1,37 @@
+
+.sp-replacer {
+  background: inherit;
+  border: none;
+  color: inherit;
+  padding: 0;
+}
+
+.sp-replacer:hover, .sp-replacer.sp-active {
+  border-color: inherit;
+  color: inherit;
+}
+
+.sp-container {
+  border-radius: 0;
+  background-color: @heroUnitBackground;
+  border: none;
+  padding: 0;
+}
+
+.sp-palette-container, .sp-picker-container {
+  border: none;
+}
+
+.sp-dd {
+  display: none;
+}
+
+.sp-preview {
+  position: relative;
+  width: 15px;
+  height: 15px;
+  border: none;
+  margin-right: 5px;
+  float: left;
+  z-index: 0;
+}

public/less/components/dashboard.less

@@ -24,7 +24,7 @@
 }
 
 .row-button {
-  width: 30px;
+  width: 24px;
   float: left;
   cursor: pointer;
   line-height: 31px;
@@ -66,6 +66,36 @@
   }
 }
 
+
+.row-control-inner {
+  padding:0px;
+  margin:0px;
+  position:relative;
+}
+
+.hide-controls {
+  padding: 0;
+  .row-tab {
+    display: none;
+  }
+  .add-row-panel-hint {
+    display: none;
+  }
+}
+
+.playlist-active {
+  .add-row-panel-hint,
+  .dashnav-refresh-action,
+  .dashnav-zoom-out,
+  .dashnav-action-icons {
+    display: none;
+  }
+
+  .grafana-menu-stop-playlist {
+    display: list-item;
+  }
+}
+
 div.flot-text {
   color: @textColor !important;
 }
@@ -110,7 +140,7 @@ div.flot-text {
 
 .panel-title {
   border: 0px;
-  font-weight: bold;
+  font-weight: @fontWeightSemi;
   position: relative;
   cursor: pointer;
   width: 100%;

public/less/components/panel_graph.less

@@ -3,6 +3,24 @@
   cursor: crosshair;
 }
 
+.histogram-chart {
+  position: relative;
+}
+
+.datapoints-warning {
+  pointer: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+  margin-top: -50px;
+  margin-left: -100px;
+  width: 200px;
+  text-align: center;
+  cursor: auto;
+  padding: 10px;
+}
+
 .graph-legend {
   margin: 0 20px;
   text-align: center;
@@ -206,11 +224,15 @@
 
   .graph-tooltip-time {
     text-align: center;
-    font-weight: bold;
+    font-weight: @fontWeightSemi;
     position: relative;
     top: -3px;
   }
 
+  .tone-down {
+    opacity: 0.7;
+  }
+
   .label-tag {
     margin-right: 4px;
     margin-top: 8px;

public/less/components/tooltip.less

@@ -12,7 +12,7 @@
   font-size: 11px;
   line-height: 1.4;
   .opacity(0);
-  &.in     { .opacity(80); }
+  &.in     { .opacity(100); }
   &.top    { margin-top:  -3px; padding: 5px 0; }
   &.right  { margin-left:  3px; padding: 0 5px; }
   &.bottom { margin-top:   3px; padding: 5px 0; }
@@ -21,7 +21,7 @@
 
 // Wrapper for the tooltip content
 .tooltip-inner {
-  max-width: 200px;
+  max-width: 400px;
   padding: 8px;
   color: @tooltipColor;
   text-align: center;
@@ -68,3 +68,31 @@
     border-bottom-color: @tooltipArrowColor;
   }
 }
+
+.grafana-tooltip {
+  position : absolute;
+  top: -1000;
+  left: 0;
+  color: @tooltipColor;
+  padding: 10px;
+  font-size: 11pt;
+  font-weight : 200;
+  background-color: @tooltipBackground;
+  border-radius: 5px;
+  z-index: 9999;
+  max-width: 800px;
+  max-height: 600px;
+  overflow: hidden;
+  line-height: 14px;
+  a {
+    color: @tooltipLinkColor;
+  }
+}
+
+.grafana-tooltip hr {
+ padding: 2px;
+ color: #c8c8c8;
+ margin: 0px;
+ border-bottom: 0px solid #c8c8c8;
+}
+

public/less/grafana.less

@@ -43,6 +43,8 @@
 @import "./components/tags.less";
 @import "./components/modals.less";
 @import "./components/dropdown.less";
+@import "./components/color_picker.less";
+@import "./components/tooltip.less";
 
 // PAGES
 @import "./pages/login.less";
@@ -51,144 +53,6 @@
 @import "./pages/alerting.less";
 @import "./pages/apps.less";
 
-
-.row-control-inner {
-  padding:0px;
-  margin:0px;
-  position:relative;
-}
-
-.hide-controls {
-  padding: 0;
-  .row-tab {
-    display: none;
-  }
-  .add-row-panel-hint {
-    display: none;
-  }
-}
-
-.playlist-active {
-  .add-row-panel-hint,
-  .dashnav-refresh-action,
-  .dashnav-zoom-out,
-  .dashnav-action-icons {
-    display: none;
-  }
-
-  .grafana-menu-stop-playlist {
-    display: list-item;
-  }
-}
-
-.row-button {
-  width: 24px;
-}
-
-.histogram-chart {
-  position:relative;
-}
-
-.scrollable {
-  max-height: 300px;
-  overflow: auto;
-}
-
-
-
-// SPECTRUM CSS overrides
-
-.sp-replacer {
-  background: inherit;
-  border: none;
-  color: inherit;
-  padding: 0;
-}
-
-.sp-replacer:hover, .sp-replacer.sp-active {
-  border-color: inherit;
-  color: inherit;
-}
-
-.sp-container {
-  border-radius: 0;
-  background-color: @heroUnitBackground;
-  border: none;
-  padding: 0;
-}
-
-.sp-palette-container, .sp-picker-container {
-  border: none;
-}
-
-.sp-dd {
-  display: none;
-}
-
-.sp-preview {
-  position: relative;
-  width: 15px;
-  height: 15px;
-  border: none;
-  margin-right: 5px;
-  float: left;
-  z-index: 0;
-}
-
-.datapoints-warning {
-  pointer: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 10;
-  margin-top: -50px;
-  margin-left: -100px;
-  width: 200px;
-  text-align: center;
-  cursor: auto;
-  padding: 10px;
-}
-
-.metrics-editor-help:hover {
-  .hide {
-    display: block;
-  }
-}
-
-.grafana-tooltip {
-  position : absolute;
-  top: -1000;
-  left: 0;
-  color: @tooltipColor;
-  padding: 10px;
-  font-size: 11pt;
-  font-weight : 200;
-  background-color: @tooltipBackground;
-  border-radius: 5px;
-  z-index: 9999;
-  max-width: 800px;
-  max-height: 600px;
-  overflow: hidden;
-  line-height: 14px;
-  a {
-    color: @tooltipLinkColor;
-  }
-}
-
-.grafana-tooltip hr {
- padding: 2px;
- color: #c8c8c8;
- margin: 0px;
- border-bottom:0px solid #c8c8c8;
-}
-
-.tooltip.in {
-  .opacity(100);
-}
-.tooltip-inner {
-  max-width: 400px;
-}
-
 .grafana-version-info {
   position: absolute;
   bottom: 2px;

public/less/variables.dark.less

@@ -286,7 +286,7 @@
 
 // Tooltips and popovers
 // -------------------------
-@tooltipColor:            #fff;
+@tooltipColor:            @white;
 @tooltipBackground:       rgb(58, 57, 57);
 @tooltipArrowWidth:       5px;
 @tooltipArrowColor:       @tooltipBackground;

public/less/variables.light.less

@@ -79,7 +79,7 @@
 
 // Typography
 // -------------------------
-@sansFontFamily:        "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@sansFontFamily:        "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;