323 строки
6.0 KiB
CSS
323 строки
6.0 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
.graph-container {
|
|
width: 500px;
|
|
height: 400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.graph-title-link {
|
|
color: inherit;
|
|
}
|
|
|
|
.graph-title {
|
|
font-family: sans-serif;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
word-wrap: break-word;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.graph-subtitle {
|
|
font-family: sans-serif;
|
|
font-size: 0.85em;
|
|
text-align: center;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.graph {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.graph-legend {
|
|
position: absolute;
|
|
right: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
svg {
|
|
cursor: default;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
/* MG overrides
|
|
* Be sure to include this.css _after_ mg's css for this to have a chance
|
|
* Designed largely to increase data concentrations for a given size of MG
|
|
*/
|
|
.mg-x-axis text,
|
|
.mg-y-axis text,
|
|
.mg-x-axis .label,
|
|
.mg-y-axis .label {
|
|
font-family: sans-serif;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
text-transform: none;
|
|
}
|
|
|
|
/* adjust breathing space for the axes labels */
|
|
.mg-y-axis .label {
|
|
transform: translateX(-1em) rotate(-90deg);
|
|
}
|
|
|
|
.mg-x-axis .label {
|
|
transform: translateY(0.5em);
|
|
}
|
|
|
|
/* We're using the svg tooltip in evos, so move it below the legend */
|
|
.mg-active-datapoint {
|
|
transform: translateY(2em);
|
|
}
|
|
|
|
/* for the rotates to look nice, should align text-anchor to start */
|
|
.truths-chart .mg-x-axis text:not(.label) {
|
|
text-anchor: start;
|
|
}
|
|
|
|
/* There is no legend in truths-chart, so don't move it so far down */
|
|
.truths-chart .mg-active-datapoint {
|
|
transform: translateY(1em);
|
|
}
|
|
|
|
/* MG overrides for a color-blind-friendly palette */
|
|
/* Palette taken from http://mkweb.bcgsc.ca/biovis2012/
|
|
* rgb(0, 0, 0) rgb(73, 0, 146) rgb(146, 0, 0)
|
|
* rgb(0, 73, 73) rgb(0, 109, 219) rgb(146, 73, 0)
|
|
* rgb(0, 146, 146) rgb(182, 109, 255) rgb(219, 209, 0)
|
|
* rgb(255, 109, 182) rgb(109, 182, 255) rgb(36, 255, 36)
|
|
* rgb(255, 182, 119) rgb(182, 219, 255) rgb(255, 255, 109)
|
|
*/
|
|
|
|
/* we're going to take these out of order to improve contrast
|
|
* in the normal vision case for the first 6.
|
|
* 2, 4, 6, 11, 13, 14
|
|
* then 3, 5, 7, 8, 9, 10, 12, 15, 1
|
|
*/
|
|
.mg-line1-color {
|
|
stroke: rgb(0, 73, 73);
|
|
}
|
|
.mg-area1-color {
|
|
fill: rgb(0, 73, 73);
|
|
}
|
|
.mg-hover-line1-color {
|
|
stroke: rgb(0, 73, 73);
|
|
fill: rgb(0, 73, 73);
|
|
}
|
|
.mg-line1-legend-color {
|
|
color: rgb(0, 73, 73);
|
|
fill: rgb(0, 73, 73);
|
|
}
|
|
|
|
.mg-line2-color {
|
|
stroke: rgb(255, 109, 182);
|
|
}
|
|
.mg-area2-color {
|
|
fill: rgb(255, 109, 182);
|
|
}
|
|
.mg-hover-line2-color {
|
|
stroke: rgb(255, 109, 182);
|
|
fill: rgb(255, 109, 182);
|
|
}
|
|
.mg-line2-legend-color {
|
|
color: rgb(255, 109, 182);
|
|
fill: rgb(255, 109, 182);
|
|
}
|
|
|
|
.mg-line3-color {
|
|
stroke: rgb(73, 0, 146);
|
|
}
|
|
.mg-area3-color {
|
|
fill: rgb(73, 0, 146);
|
|
}
|
|
.mg-hover-line3-color {
|
|
stroke: rgb(73, 0, 146);
|
|
fill: rgb(73, 0, 146);
|
|
}
|
|
.mg-line3-legend-color {
|
|
color: rgb(73, 0, 146);
|
|
fill: rgb(73, 0, 146);
|
|
}
|
|
|
|
.mg-line4-color {
|
|
stroke: rgb(146, 0, 0);
|
|
}
|
|
.mg-area4-color {
|
|
fill: rgb(146, 0, 0);
|
|
}
|
|
.mg-hover-line4-color {
|
|
stroke: rgb(146, 0, 0);
|
|
fill: rgb(146, 0, 0);
|
|
}
|
|
.mg-line4-legend-color {
|
|
color: rgb(146, 0, 0);
|
|
fill: rgb(146, 0, 0);
|
|
}
|
|
|
|
.mg-line5-color {
|
|
stroke: rgb(219, 209, 0);
|
|
}
|
|
.mg-area5-color {
|
|
fill: rgb(219, 209, 0);
|
|
}
|
|
.mg-hover-line5-color {
|
|
stroke: rgb(219, 209, 0);
|
|
fill: rgb(219, 209, 0);
|
|
}
|
|
.mg-line5-legend-color {
|
|
color: rgb(219, 209, 0);
|
|
fill: rgb(219, 209, 0);
|
|
}
|
|
|
|
.mg-line6-color {
|
|
stroke: rgb(36, 255, 36);
|
|
}
|
|
.mg-area6-color {
|
|
fill: rgb(36, 255, 36);
|
|
}
|
|
.mg-hover-line6-color {
|
|
stroke: rgb(36, 255, 36);
|
|
fill: rgb(36, 255, 36);
|
|
}
|
|
.mg-line6-legend-color {
|
|
color: rgb(36, 255, 36);
|
|
fill: rgb(36, 255, 36);
|
|
}
|
|
|
|
.mg-line7-color {
|
|
stroke: rgb(0, 146, 146);
|
|
}
|
|
.mg-area7-color {
|
|
fill: rgb(0, 146, 146);
|
|
}
|
|
.mg-hover-line7-color {
|
|
stroke: rgb(0, 146, 146);
|
|
fill: rgb(0, 146, 146);
|
|
}
|
|
.mg-line7-legend-color {
|
|
color: rgb(0, 146, 146);
|
|
fill: rgb(0, 146, 146);
|
|
}
|
|
|
|
.mg-line8-color {
|
|
stroke: rgb(255, 182, 219);
|
|
}
|
|
.mg-area8-color {
|
|
fill: rgb(255, 182, 219);
|
|
}
|
|
.mg-hover-line8-color {
|
|
stroke: rgb(255, 182, 219);
|
|
fill: rgb(255, 182, 219);
|
|
}
|
|
.mg-line8-legend-color {
|
|
color: rgb(255, 182, 219);
|
|
fill: rgb(255, 182, 219);
|
|
}
|
|
|
|
.mg-line9-color {
|
|
stroke: rgb(0, 109, 219);
|
|
}
|
|
.mg-area9-color {
|
|
fill: rgb(0, 109, 219);
|
|
}
|
|
.mg-hover-line9-color {
|
|
stroke: rgb(0, 109, 219);
|
|
fill: rgb(0, 109, 219);
|
|
}
|
|
.mg-line9-legend-color {
|
|
color: rgb(0, 109, 219);
|
|
fill: rgb(0, 109, 219);
|
|
}
|
|
|
|
.mg-line10-color {
|
|
stroke: rgb(182, 109, 255);
|
|
}
|
|
.mg-area10-color {
|
|
fill: rgb(182, 109, 255);
|
|
}
|
|
.mg-hover-line10-color {
|
|
stroke: rgb(182, 109, 255);
|
|
fill: rgb(182, 109, 255);
|
|
}
|
|
.mg-line10-legend-color {
|
|
color: rgb(182, 109, 255);
|
|
fill: rgb(182, 109, 255);
|
|
}
|
|
|
|
.mg-line11-color {
|
|
stroke: rgb(109, 182, 255);
|
|
}
|
|
.mg-area11-color {
|
|
fill: rgb(109, 182, 255);
|
|
}
|
|
.mg-hover-line11-color {
|
|
stroke: rgb(109, 182, 255);
|
|
fill: rgb(109, 182, 255);
|
|
}
|
|
.mg-line11-legend-color {
|
|
color: rgb(109, 182, 255);
|
|
fill: rgb(109, 182, 255);
|
|
}
|
|
|
|
.mg-line12-color {
|
|
stroke: rgb(182, 219, 255);
|
|
}
|
|
.mg-area12-color {
|
|
fill: rgb(182, 219, 255);
|
|
}
|
|
.mg-hover-line12-color {
|
|
stroke: rgb(182, 219, 255);
|
|
fill: rgb(182, 219, 255);
|
|
}
|
|
.mg-line12-legend-color {
|
|
color: rgb(182, 219, 255);
|
|
fill: rgb(182, 219, 255);
|
|
}
|
|
|
|
.mg-line13-color {
|
|
stroke: rgb(146, 73, 0);
|
|
}
|
|
.mg-area13-color {
|
|
fill: rgb(146, 73, 0);
|
|
}
|
|
.mg-hover-line13-color {
|
|
stroke: rgb(146, 73, 0);
|
|
fill: rgb(146, 73, 0);
|
|
}
|
|
.mg-line13-legend-color {
|
|
color: rgb(146, 73, 0);
|
|
fill: rgb(146, 73, 0);
|
|
}
|
|
|
|
.mg-line14-color {
|
|
stroke: rgb(255, 255, 109);
|
|
}
|
|
.mg-area14-color {
|
|
fill: rgb(255, 255, 109);
|
|
}
|
|
.mg-hover-line14-color {
|
|
stroke: rgb(255, 255, 109);
|
|
fill: rgb(255, 255, 109);
|
|
}
|
|
.mg-line14-legend-color {
|
|
color: rgb(255, 255, 109);
|
|
fill: rgb(255, 255, 109);
|
|
}
|
|
|
|
.mg-line15-color {
|
|
stroke: rgb(0, 0, 0);
|
|
}
|
|
.mg-area15-color {
|
|
fill: rgb(0, 0, 0);
|
|
}
|
|
.mg-hover-line15-color {
|
|
stroke: rgb(0, 0, 0);
|
|
fill: rgb(0, 0, 0);
|
|
}
|
|
.mg-line15-legend-color {
|
|
color: rgb(0, 0, 0);
|
|
fill: rgb(0, 0, 0);
|
|
}
|