544 lines
8 KiB
SCSS
544 lines
8 KiB
SCSS
/* Colors! */
|
|
$bright-green: #2CFE40;
|
|
$dark-green: #059F00;
|
|
$fuschia: #FD47B7;
|
|
$purple: #7C2CFF;
|
|
$orange: #FF6513;
|
|
$amber: #FFC712;
|
|
$light-blue: #2CCCFE;
|
|
$blue: #2C55FF;
|
|
$dark-grey: #1F1F1F;
|
|
$grey: #888;
|
|
$light-grey: #ccc;
|
|
$off-white: #dedede;
|
|
$cream: #f6f6f6;
|
|
$green: #06FA23;
|
|
$yellow: #FEF206;
|
|
|
|
@mixin vendor-prefix($name, $argument) {
|
|
#{$name}: $argument;
|
|
-webkit-#{$name}: $argument;
|
|
-ms-#{$name}: $argument;
|
|
-moz-#{$name}: $argument;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #fff;
|
|
color: $dark-grey;
|
|
}
|
|
|
|
html,table {
|
|
font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
|
|
font-weight:400;
|
|
font-stretch:normal;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#toolbar {
|
|
height: 28px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
right: 3px;
|
|
font-size: 12px;
|
|
|
|
input {
|
|
background: $off-white;
|
|
border: 1px solid $dark-grey;
|
|
margin: 3px;
|
|
padding: 3px 6px;
|
|
}
|
|
input:hover {
|
|
background: lighten($off-white, 5%);
|
|
}
|
|
|
|
.server {
|
|
float: right;
|
|
}
|
|
|
|
.load {
|
|
position: relative;
|
|
margin: 3px;
|
|
float: right;
|
|
width: 100px;
|
|
padding: 4px 6px 3px 6px;
|
|
border: 1px solid $dark-grey;
|
|
span {
|
|
z-index: -1;
|
|
}
|
|
.bar {
|
|
border-radius: 0;
|
|
background: rgba(0,0,0,0.25);
|
|
width: 1%;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
margin: 3px;
|
|
padding: 3px 6px;
|
|
border: 1px solid $light-grey;
|
|
background: $off-white;
|
|
cursor: pointer;
|
|
}
|
|
.button:hover {
|
|
background: lighten($off-white, 5%);
|
|
}
|
|
|
|
.pager {
|
|
margin: 0;
|
|
padding: 0;
|
|
float: left;
|
|
|
|
ol {
|
|
display: inline-block;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
.delete {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
li:hover {
|
|
background: lighten($off-white, 10%);
|
|
}
|
|
|
|
li.current {
|
|
border-color: $dark-grey;
|
|
|
|
.delete {
|
|
display: inline;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#event-pane {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: auto;
|
|
max-height: 30%;
|
|
overflow-y: auto;
|
|
z-index: 100;
|
|
background: #fff;
|
|
border-top: 1px solid $off-white;
|
|
padding: 3px;
|
|
|
|
&.active {
|
|
box-shadow: 0 0 40px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
* {
|
|
float: left;
|
|
padding: 3px;
|
|
}
|
|
|
|
.state {
|
|
margin: 0 3px;
|
|
padding: 3px 6px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.host {
|
|
font-style: italic;
|
|
}
|
|
|
|
.ttl:before {
|
|
color: $grey;
|
|
content: 'ttl ';
|
|
}
|
|
|
|
.tags:before {
|
|
color: $grey;
|
|
content: "tags: ";
|
|
}
|
|
|
|
.description {
|
|
clear: both;
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
|
|
#view {
|
|
position: absolute;
|
|
left: 3px;
|
|
right: 3px;
|
|
top: 28px;
|
|
bottom: 3px;
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
height: auto;
|
|
width: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 3px;
|
|
padding: 3px;
|
|
background: $light-grey;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.bar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.state {
|
|
@include vendor-prefix(transition, all 0.3s linear);
|
|
}
|
|
|
|
.state.ok, .state.okay, .bar.ok, .bar.okay {
|
|
background: $green;
|
|
color: #000;
|
|
}
|
|
.state.warning, .state.warn, .bar.warning, .bar.warn {
|
|
background: $amber;
|
|
color: #000;
|
|
}
|
|
.state.critical, .state.failure, .state.err, .bar.critical, .bar.failure, .bar.err {
|
|
background: $orange;
|
|
color: #000;
|
|
}
|
|
|
|
.view .query {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
.scroll {
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.log-table .scroll {
|
|
position: absolute;
|
|
top: 26px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.log-table table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.log-table thead {
|
|
text-align: left;
|
|
}
|
|
|
|
.log-table tbody {
|
|
}
|
|
|
|
.log-table td {
|
|
border-bottom: 1px solid #eee;
|
|
vertical-align: top;
|
|
padding: 3px;
|
|
white-space: pre;
|
|
}
|
|
.log-table td .bar {
|
|
margin: -3px;
|
|
padding: 3px;
|
|
}
|
|
|
|
.chart {
|
|
width: 140px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.chart td {
|
|
min-width: 40px;
|
|
overflow: hidden;
|
|
}
|
|
.chart th {
|
|
width: 1px;
|
|
text-align: left;
|
|
}
|
|
|
|
.timeSeries rect {
|
|
fill: #CA0000;
|
|
stroke: white;
|
|
}
|
|
|
|
#layout {
|
|
position: relative;
|
|
}
|
|
|
|
.view {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 0;
|
|
width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.focusOverlay {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
border-radius: 5px;
|
|
background: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
#simplemodal-overlay {
|
|
background-color:#000;
|
|
}
|
|
#simplemodal-container {
|
|
background-color:#fff;
|
|
color: #000;
|
|
padding:12px;
|
|
border-radius: 4px;
|
|
min-width: 400px;
|
|
min-height: 400px;
|
|
}
|
|
#simplemodal-container a.modalCloseImg {
|
|
background:url(/x.png) no-repeat; /* adjust url as required */
|
|
width:25px;
|
|
height:29px;
|
|
display:inline;
|
|
z-index:3200;
|
|
position:absolute;
|
|
top:-10px;
|
|
right:-10px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
textarea.query {
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
|
|
.quickfit {
|
|
display: block;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
h2 {
|
|
display: block;
|
|
padding: 3px;
|
|
margin: 0;
|
|
}
|
|
|
|
.metric {
|
|
font-weight: bolder;
|
|
text-align: right;
|
|
}
|
|
|
|
.title h2 {
|
|
position: absolute;
|
|
left: 3px;
|
|
right: 3px;
|
|
top: 3px;
|
|
bottom: 3px;
|
|
}
|
|
|
|
.gauge {
|
|
h2 {
|
|
position: absolute;
|
|
height: 25%;
|
|
width: 75%;
|
|
bottom: 3px;
|
|
right: 3px;
|
|
text-align: right;
|
|
}
|
|
|
|
.value {
|
|
position: absolute;
|
|
height: 75%;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
ul {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
ul li {
|
|
background: #cacaca;
|
|
}
|
|
}
|
|
|
|
.grid {
|
|
white-space: nowrap;
|
|
|
|
h2 {
|
|
height: 28px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.container {
|
|
position: absolute;
|
|
top: 28px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.bar {
|
|
position: static;
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
.box {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: static;
|
|
|
|
.metric {
|
|
padding: 3px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
table {
|
|
font-size: 12px;
|
|
position: absolute;
|
|
width: 100%;
|
|
border-spacing: 3px;
|
|
|
|
th {
|
|
text-align: right;
|
|
}
|
|
|
|
thead {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
th {
|
|
// Work around https://bugs.webkit.org/show_bug.cgi?id=20040
|
|
position: relative;
|
|
top: 3px;
|
|
vertical-align: bottom;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
tr > *:first-child {
|
|
width: 1px;
|
|
}
|
|
}
|
|
|
|
.time-series-container {
|
|
.title {
|
|
font-weight: 700;
|
|
font-size: 1.5em;
|
|
background-color: hsla(0, 0%, 100%, 0.8);
|
|
z-index: 10;
|
|
position: absolute;
|
|
bottom: -5px;
|
|
right: 10px;
|
|
padding: 2px;
|
|
display: block;
|
|
}
|
|
.legend {
|
|
height: 100%;
|
|
font-size: 16px;
|
|
text-shadow: hsl(0, 0%, 95%) 0px 0px 1px;
|
|
color: hsl(0, 0%, 5%);
|
|
position: absolute;
|
|
bottom: 0px;
|
|
display: -webkit-flex;
|
|
display: -moz-flex;
|
|
display: -ms-flex;
|
|
display: flex;
|
|
@include vendor-prefix(flex-flow, column wrap);
|
|
@include vendor-prefix(align-content, flex-start);
|
|
@include vendor-prefix(justify-content, flex-start);
|
|
@include vendor-prefix(align-items, stretch);
|
|
}
|
|
.event-legend {
|
|
padding: 4px;
|
|
@include vendor-prefix(flex, 1 1 auto);
|
|
@include vendor-prefix(transition, all 0.3s ease-out);
|
|
}
|
|
.event-legend:hover {
|
|
background-color: hsla(0, 0%, 100%, .8) !important;
|
|
}
|
|
}
|
|
|
|
.flot.view {
|
|
.legend {
|
|
font-size: 13px;
|
|
color: #000;
|
|
opacity: 1;
|
|
}
|
|
|
|
h2 {
|
|
height: 28px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.container {
|
|
position: absolute;
|
|
top: 28px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.log.view {
|
|
.scroll {
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
position: absolute;
|
|
top: 28px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
thead {
|
|
text-align: left;
|
|
}
|
|
|
|
td, th {
|
|
padding: 2px;
|
|
vertical-align: top;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
}
|