index.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. body {
  2. background-color: rgba(0,0,0,0.8);
  3. color: #999;
  4. font-family: Hevletica, 'sans-serif';
  5. }
  6. /* ------------------- Default Style ------------------------- */
  7. .gauge-container {
  8. width: 200px;
  9. height: 200px;
  10. display: block;
  11. float: left;
  12. padding: 10px;
  13. overflow: hidden;
  14. }
  15. .gauge-container.one > .gauge > .dial {
  16. stroke: #334455;
  17. stroke-width: 20;
  18. fill: rgba(0,0,0,0);
  19. }
  20. .gauge-container.one > .gauge > .value {
  21. stroke: rgb(47, 227, 255);
  22. stroke-width: 20;
  23. fill: rgba(0,0,0,0);
  24. }
  25. .gauge-container.one > .gauge > .value-text {
  26. fill: rgb(47, 227, 255);
  27. font-family: sans, 'sans-serif';
  28. font-weight: bold;
  29. font-size: 10em;
  30. }
  31. /* ------------------- Alternate Style ------------------------- */
  32. .gauge-container.two {
  33. }
  34. .gauge-container.two > .gauge > .dial {
  35. stroke: #334455;
  36. stroke-width: 100;
  37. }
  38. .gauge-container.two > .gauge > .value {
  39. stroke: orange;
  40. stroke-dasharray: none;
  41. stroke-width: 130;
  42. }
  43. .gauge-container.two > .gauge > .value-text {
  44. fill: orange;
  45. }
  46. /* ------------------- Alternate Style 2 ------------------------- */
  47. .gauge-container.three {
  48. }
  49. .gauge-container.three > .gauge > .dial {
  50. stroke: #334455;
  51. stroke-width: 20;
  52. /*stroke-dasharray: 125, 20;*/
  53. }
  54. .gauge-container.three > .gauge > .value {
  55. stroke: #C9DE3C;
  56. stroke-width: 50;
  57. /*stroke-dasharray: 125, 20;*/
  58. }
  59. .gauge-container.three > .gauge > .value-text {
  60. fill: #C9DE3C;
  61. }
  62. /* ------------------- Alternate Style 2 ------------------------- */
  63. .gauge-container.four > .gauge > .dial {
  64. stroke: #334455;
  65. fill: "#334455";
  66. stroke-width: 50;
  67. }
  68. .gauge-container.four > .gauge > .value {
  69. stroke: #BE80FF;
  70. stroke-dasharray: none;
  71. stroke-width: 50;
  72. }
  73. .gauge-container.four > .gauge > .value-text {
  74. fill: #BE80FF;
  75. }
  76. .gauge-container.five > .gauge > .dial {
  77. stroke: #334455;
  78. fill: "#334455";
  79. stroke-width: 50;
  80. }
  81. .gauge-container.five > .gauge > .value {
  82. stroke: #F8774B;
  83. stroke-dasharray: none;
  84. stroke-width: 50;
  85. }
  86. .gauge-container.five > .gauge > .value-text {
  87. fill: #F8774B;
  88. font-size: 7em;
  89. }
  90. .gauge-container.six > .gauge > .dial {
  91. stroke: #334455;
  92. fill: "#334455";
  93. stroke-dasharray: 110 10;
  94. stroke-width: 50;
  95. }
  96. .gauge-container.six > .gauge > .value {
  97. stroke: #FF6DAF;
  98. stroke-dasharray: 110 10;
  99. stroke-width: 52;
  100. }
  101. .gauge-container.six > .gauge > .value-text {
  102. fill: #FF6DAF;
  103. font-size: 7em;
  104. }