1
0
Fork 0
shezmu/dashboard/css/app.css

131 lines
2.0 KiB
CSS

* { box-sizing: border-box; }
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
}
#app {
width: 950px;
margin: 0 auto;
}
/*
* Table
*/
.table-row {
width: 950px;
height: 40px;
}
.table-cell {
float: left;
width: 120px;
line-height: 40px;
text-align: right;
font-family: monospace;
}
.table-cell.attn {
font-weight: 600;
color: red;
}
.table-cell.col-name {
width: 350px;
text-align: left;
font-weight: 600;
font-family: inherit;
}
.table-header .table-cell {
font-weight: 600;
border-bottom: #666 1px solid;
font-family: inherit;
}
/*
* Line chart
*/
.linechart {
float: left;
width: 950px;
height: 120px;
margin-right: 15px;
}
.linechart svg {
width: 100%;
height: 100%;
/*background-color: #abc;*/
}
.linechart .line {
stroke-width: 1px;
fill: transparent;
}
.linechart .line.processed {
stroke: #46f;
}
.linechart .line.errors {
stroke: #f64;
}
.linechart .dot.processed {
fill: #46f;
}
.linechart .dot.errors {
fill: #f64;
}
.axis {
stroke: #888;
}
.axis.light {
stroke: #ddd;
}
.arrow {
stroke: #888;
fill: #888;
}
/*
* Box plot
*/
.boxplot {
float: left;
width: 950px;
height: 170px;
margin-bottom: 40px;
}
.boxplot svg {
width: 100%;
height: 100%;
}
.boxplot .tick {
stroke-width: 1px;
stroke: #aaa;
}
.boxplot .whisker {
stroke-width: 1px;
stroke: #ccc;
stroke-dasharray: 3, 1;
}
.boxplot .iqr {
stroke-width: 1px;
fill: #f0f0f0;
stroke: #888;
}
.boxplot .median {
stroke-width: 2px;
stroke: #444;
}
.daemon {
width: 100%;
}
.axis-label {
stroke: #444;
font-weight: 100;
font-family: monospace;
font-size: 10px;
}