body { background-color: rgba(0,0,0,0.8); color: #999; font-family: Hevletica, 'sans-serif'; } /* ------------------- Default Style ------------------------- */ .gauge-container { width: 200px; height: 200px; display: block; float: left; padding: 10px; overflow: hidden; } .gauge-container.one > .gauge > .dial { stroke: #334455; stroke-width: 2; } .gauge-container.one > .gauge > .value { stroke: rgb(47, 227, 255); stroke-width: 2; } .gauge-container.one > .gauge > .value-text { fill: rgb(47, 227, 255); font-family: sans, 'sans-serif'; font-weight: bold; font-size: 0.6em; } /* ------------------- Alternate Style ------------------------- */ .gauge-container.two { height: auto; border: 1px solid rgba(255,255,255,0.1); } .gauge-container.two > .gauge > .dial { stroke: #334455; stroke-width: 10; } .gauge-container.two > .gauge > .value { /*stroke: orange;*/ stroke-dasharray: none; stroke-width: 13; } .gauge-container.two > .gauge > .value { /*fill: orange;*/ } /* ------------------- Alternate Style 2 ------------------------- */ .gauge-container.three { } .gauge-container.three > .gauge > .dial { stroke: #334455; stroke-width: 2; /*stroke-dasharray: 125, 20;*/ } .gauge-container.three > .gauge > .value { stroke: #C9DE3C; stroke-width: 5; /*stroke-dasharray: 125, 20;*/ } .gauge-container.three > .gauge > .value-text { fill: #C9DE3C; } /* ------------------- Alternate Style 2 ------------------------- */ .gauge-container.four > .gauge > .dial { stroke: #334455; fill: "#334455"; stroke-width: 5; } .gauge-container.four > .gauge > .value { stroke: #BE80FF; stroke-dasharray: none; stroke-width: 5; } .gauge-container.four > .gauge > .value-text { fill: #BE80FF; } .gauge-container.five > .gauge > .dial { stroke: #334455; fill: "#334455"; stroke-width: 5; } .gauge-container.five > .gauge > .value { stroke: #F8774B; stroke-dasharray: none; stroke-width: 5; } .gauge-container.five > .gauge > .value-text { fill: #F8774B; font-size: 0.7em; } .gauge-container.six > .gauge > .dial { stroke: #334455; fill: "#334455"; stroke-dasharray: 110 10; stroke-width: 5; } .gauge-container.six > .gauge > .value { stroke: #FF6DAF; stroke-dasharray: 10 1; stroke-width: 5.2; } .gauge-container.six > .gauge > .value-text { fill: #FF6DAF; font-size: 0.7em; }