Commit c11322a0 by Torkel Ödegaard

ux(less): more less cleanup, restructuring

parent 35a1a04f
...@@ -96,67 +96,6 @@ ...@@ -96,67 +96,6 @@
border: 1px solid @grafanaTargetFuncHightlight; border: 1px solid @grafanaTargetFuncHightlight;
} }
// Cross-browser Jank
// --------------------------------------------------
button.btn,
input[type="submit"].btn {
// Firefox 3.6 only I believe
&::-moz-focus-inner {
padding: 0;
border: 0;
}
// IE7 has some default padding on button controls
*padding-top: 3px;
*padding-bottom: 3px;
&.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
&.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
&.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
}
// Link buttons
// --------------------------------------------------
// Make a button look and behave like a link
.btn-link,
.btn-link:active,
.btn-link[disabled] {
background-color: transparent;
background-image: none;
.box-shadow(none);
}
.btn-link {
border-color: transparent;
cursor: pointer;
color: @linkColor;
.border-radius(0);
}
.btn-link:hover,
.btn-link:focus {
color: @linkColorHover;
text-decoration: underline;
background-color: transparent;
}
.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
color: @grayDark;
text-decoration: none;
}
.btn-text { .btn-text {
color: @btnText; color: @btnText;
margin: 0; margin: 0;
......
.template-variable {
color: @variable;
}
.grafana-row { .grafana-row {
margin-bottom: 5px; margin-bottom: 5px;
...@@ -266,3 +269,17 @@ div.flot-text { ...@@ -266,3 +269,17 @@ div.flot-text {
height: 15px; height: 15px;
display: block; display: block;
} }
.dashboard-header {
font-family: "grafana-icons";
font-size: 22px;
text-align: center;
span {
display: inline-block;
border: none;
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-bottom: 2px solid transparent;
padding: 1.2rem .2rem .4rem .2rem;
}
}
.grafana-version-info {
position: absolute;
bottom: 2px;
left: 3px;
font-size: 80%;
color: darken(@gray, 25%);
a { color: darken(@gray, 25%); }
}
.grafana-info-box:before {
content: "\f05a";
font-family:'FontAwesome';
position: absolute;
top: -8px;
left: -8px;
font-size: 20px;
color: @blue;
}
.grafana-info-box {
position: relative;
padding: 5px 15px;
background-color: @grafanaTargetBackground;
border: 1px solid @grafanaTargetBorder;
h5 {
margin-top: 5px;
}
}
.query-keyword {
font-weight: bold;
color: @blue;
}
.query-segment-key {
border-right: none;
padding-right: 1px;
}
.query-segment-operator {
padding-right: 1px;
border-right: none;
color: @orange;
}
.shortcut-table {
td { padding: 3px; }
th:last-child { text-align: left; }
td:first-child { text-align: right; }
}
...@@ -96,3 +96,7 @@ ...@@ -96,3 +96,7 @@
border-bottom: 0px solid #c8c8c8; border-bottom: 0px solid #c8c8c8;
} }
.grafana-tip {
padding-left: 5px;
}
...@@ -4,3 +4,8 @@ ...@@ -4,3 +4,8 @@
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
} }
.typeahead strong {
color: @yellow;
}
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
@import "./base/code.less"; @import "./base/code.less";
// UTILS // UTILS
@import "./utils/utils.less";
@import "./utils/validation.less"; @import "./utils/validation.less";
@import "./utils/angular.less"; @import "./utils/angular.less";
...@@ -49,6 +50,10 @@ ...@@ -49,6 +50,10 @@
@import "./components/color_picker.less"; @import "./components/color_picker.less";
@import "./components/tooltip.less"; @import "./components/tooltip.less";
@import "./components/buttons.less"; @import "./components/buttons.less";
@import "./components/footer.less";
@import "./components/infobox.less";
@import "./components/shortcuts.less";
@import "./components/query_editor.less";
// PAGES // PAGES
@import "./pages/login.less"; @import "./pages/login.less";
...@@ -56,105 +61,5 @@ ...@@ -56,105 +61,5 @@
@import "./pages/admin.less"; @import "./pages/admin.less";
@import "./pages/alerting.less"; @import "./pages/alerting.less";
@import "./pages/apps.less"; @import "./pages/apps.less";
@import "./pages/signup.less";
.grafana-version-info {
position: absolute;
bottom: 2px;
left: 3px;
font-size: 80%;
color: darken(@gray, 25%);
a { color: darken(@gray, 25%); }
}
.template-variable {
color: @variable;
}
.grafana-info-box:before {
content: "\f05a";
font-family:'FontAwesome';
position: absolute;
top: -8px;
left: -8px;
font-size: 20px;
color: @blue;
}
.grafana-info-box {
position: relative;
padding: 5px 15px;
background-color: @grafanaTargetBackground;
border: 1px solid @grafanaTargetBorder;
h5 {
margin-top: 5px;
}
}
.grafana-tip {
padding-left: 5px;
}
.shortcut-table {
td { padding: 3px; }
th:last-child { text-align: left; }
td:first-child { text-align: right; }
}
.query-keyword {
font-weight: bold;
color: @blue;
}
.query-segment-key {
border-right: none;
padding-right: 1px;
}
.query-segment-operator {
padding-right: 1px;
border-right: none;
color: @orange;
}
.highlight-word {
color: @orange;
}
.body-copy-emphasis {
color: @headingsColor;
}
.signup-page-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background-image: url(/img/background_tease.jpg);
.signup-logo-container {
width: 150px;
margin: 0 auto;
padding: 80px 0;
}
}
.typeahead strong {
color: @yellow;
}
.dashboard-header {
font-family: "grafana-icons";
font-size: 22px;
text-align: center;
span {
display: inline-block;
border: none;
border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
border-image-slice: 1;
border-bottom: 2px solid transparent;
padding: 1.2rem .2rem .4rem .2rem;
}
}
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
} }
.main-view { .main-view {
background-image: url(/img/grafana_pattern.png); // background-image: url(/img/grafana_pattern.png);
background-position: 100% -550px; // background-position: 100% -550px;
background-repeat: no-repeat; // background-repeat: no-repeat;
height: 100%; height: 100%;
} }
......
...@@ -98,6 +98,7 @@ ...@@ -98,6 +98,7 @@
background: #dd4b39; background: #dd4b39;
color: white; color: white;
} }
.btn-github { .btn-github {
background: #555; background: #555;
color: white; color: white;
......
.signup-page-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background-image: url(/img/background_tease.jpg);
.signup-logo-container {
width: 150px;
margin: 0 auto;
padding: 80px 0;
}
}
.highlight-word {
color: @orange;
}
...@@ -148,7 +148,6 @@ ...@@ -148,7 +148,6 @@
@btnInverseText: @textColor; @btnInverseText: @textColor;
@btnInverseBorder: #333; @btnInverseBorder: #333;
@btnText: @gray; @btnText: @gray;
@iconContainerBackground: @black; @iconContainerBackground: @black;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment