123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- 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;
- }
|