* { 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; margin-bottom: 10px; } .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; } .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; }