index.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  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: 2;
  18. }
  19. .gauge-container.one > .gauge > .value {
  20. stroke: rgb(47, 227, 255);
  21. stroke-width: 2;
  22. }
  23. .gauge-container.one > .gauge > .value-text {
  24. fill: rgb(47, 227, 255);
  25. font-family: sans, 'sans-serif';
  26. font-weight: bold;
  27. font-size: 0.6em;
  28. }
  29. /* ------------------- Alternate Style ------------------------- */
  30. .gauge-container.two {
  31. height: auto;
  32. border: 1px solid rgba(255,255,255,0.1);
  33. }
  34. .gauge-container.two > .gauge > .dial {
  35. stroke: #334455;
  36. stroke-width: 10;
  37. }
  38. .gauge-container.two > .gauge > .value {
  39. /*stroke: orange;*/
  40. stroke-dasharray: none;
  41. stroke-width: 13;
  42. }
  43. .gauge-container.two > .gauge > .value {
  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: 2;
  52. /*stroke-dasharray: 125, 20;*/
  53. }
  54. .gauge-container.three > .gauge > .value {
  55. stroke: #C9DE3C;
  56. stroke-width: 5;
  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: 5;
  67. }
  68. .gauge-container.four > .gauge > .value {
  69. stroke: #BE80FF;
  70. stroke-dasharray: none;
  71. stroke-width: 5;
  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: 5;
  80. }
  81. .gauge-container.five > .gauge > .value {
  82. stroke: #F8774B;
  83. stroke-dasharray: none;
  84. stroke-width: 5;
  85. }
  86. .gauge-container.five > .gauge > .value-text {
  87. fill: #F8774B;
  88. font-size: 0.7em;
  89. }
  90. .gauge-container.six > .gauge > .dial {
  91. stroke: #334455;
  92. fill: "#334455";
  93. stroke-dasharray: 110 10;
  94. stroke-width: 5;
  95. }
  96. .gauge-container.six > .gauge > .value {
  97. stroke: #FF6DAF;
  98. stroke-dasharray: 10 1;
  99. stroke-width: 5.2;
  100. }
  101. .gauge-container.six > .gauge > .value-text {
  102. fill: #FF6DAF;
  103. font-size: 0.7em;
  104. }