mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(css): more progress on css refactor / cleanup
This commit is contained in:
Torkel Ödegaard
@@ -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);
|
||||
};
|
||||
|
||||
4
public/less/bootstrap/bootstrap.less
vendored
4
public/less/bootstrap/bootstrap.less
vendored
@@ -30,10 +30,6 @@
|
||||
// Components: Nav
|
||||
@import "navs.less";
|
||||
|
||||
// Components: Popovers
|
||||
@import "tooltip.less";
|
||||
|
||||
// Components: Misc
|
||||
@import "labels-badges.less";
|
||||
|
||||
// Utility classes
|
||||
|
||||
37
public/less/components/color_picker.less
Normal file
37
public/less/components/color_picker.less
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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%;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -286,7 +286,7 @@
|
||||
|
||||
// Tooltips and popovers
|
||||
// -------------------------
|
||||
@tooltipColor: #fff;
|
||||
@tooltipColor: @white;
|
||||
@tooltipBackground: rgb(58, 57, 57);
|
||||
@tooltipArrowWidth: 5px;
|
||||
@tooltipArrowColor: @tooltipBackground;
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user