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: 20; fill: rgba(0,0,0,0); } .gauge-container.one > .gauge > .value { stroke: rgb(47, 227, 255); stroke-width: 20; fill: rgba(0,0,0,0); } .gauge-container.one > .gauge > .value-text { fill: rgb(47, 227, 255); font-family: sans, 'sans-serif'; font-weight: bold; font-size: 10em; } /* ------------------- Alternate Style ------------------------- */ .gauge-container.two { } .gauge-container.two > .gauge > .dial { stroke: #334455; stroke-width: 100; } .gauge-container.two > .gauge > .value { stroke: orange; stroke-dasharray: none; stroke-width: 130; } .gauge-container.two > .gauge > .value-text { fill: orange; } /* ------------------- Alternate Style 2 ------------------------- */ .gauge-container.three { } .gauge-container.three > .gauge > .dial { stroke: #334455; stroke-width: 20; /*stroke-dasharray: 125, 20;*/ } .gauge-container.three > .gauge > .value { stroke: #C9DE3C; stroke-width: 50; /*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: 50; } .gauge-container.four > .gauge > .value { stroke: #BE80FF; stroke-dasharray: none; stroke-width: 50; } .gauge-container.four > .gauge > .value-text { fill: #BE80FF; } .gauge-container.five > .gauge > .dial { stroke: #334455; fill: "#334455"; stroke-width: 50; } .gauge-container.five > .gauge > .value { stroke: #F8774B; stroke-dasharray: none; stroke-width: 50; } .gauge-container.five > .gauge > .value-text { fill: #F8774B; font-size: 7em; } .gauge-container.six > .gauge > .dial { stroke: #334455; fill: "#334455"; stroke-dasharray: 110 10; stroke-width: 50; } .gauge-container.six > .gauge > .value { stroke: #FF6DAF; stroke-dasharray: 110 10; stroke-width: 52; } .gauge-container.six > .gauge > .value-text { fill: #FF6DAF; font-size: 7em; }