progress.inc.php 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <?php
  2. if (!defined('ISLOADEDBYSTEELSHEET')) die('Must be call by steelsheet'); ?>
  3. /* <style type="text/css" > */
  4. /*
  5. progress style is based on boostrap and admin lte framework
  6. */
  7. /*
  8. * Component: Progress Bar
  9. * -----------------------
  10. */
  11. .progress * {
  12. -webkit-box-sizing: border-box;
  13. -moz-box-sizing: border-box;
  14. box-sizing: border-box;
  15. }
  16. .progress {
  17. height: 20px;
  18. overflow: hidden;
  19. background-color: #f5f5f5;
  20. background-color: rgba(128, 128, 128, 0.1);
  21. border-radius: 4px;
  22. -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  23. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  24. }
  25. .progress.spaced{
  26. margin-bottom: 20px;
  27. }
  28. .progress-bar {
  29. float: left;
  30. width: 0;
  31. height: 100%;
  32. font-size: 12px;
  33. line-height: 20px;
  34. color: #fff;
  35. text-align: center;
  36. background-color: #337ab7;
  37. -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  38. box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  39. -webkit-transition: width .6s ease;
  40. -o-transition: width .6s ease;
  41. transition: width .6s ease;
  42. }
  43. .progress-group > .progress{
  44. clear: both;
  45. }
  46. .progress,
  47. .progress > .progress-bar {
  48. -webkit-box-shadow: none;
  49. box-shadow: none;
  50. }
  51. .progress,
  52. .progress > .progress-bar,
  53. .progress .progress-bar,
  54. .progress > .progress-bar .progress-bar {
  55. border-radius: 1px;
  56. }
  57. /* size variation */
  58. .progress.sm,
  59. .progress-sm {
  60. height: 10px;
  61. }
  62. .progress.sm,
  63. .progress-sm,
  64. .progress.sm .progress-bar,
  65. .progress-sm .progress-bar {
  66. border-radius: 1px;
  67. }
  68. .progress.xs,
  69. .progress-xs {
  70. height: 7px;
  71. }
  72. .progress.xs,
  73. .progress-xs,
  74. .progress.xs .progress-bar,
  75. .progress-xs .progress-bar {
  76. border-radius: 1px;
  77. }
  78. .progress.xxs,
  79. .progress-xxs {
  80. height: 3px;
  81. }
  82. .progress.xxs,
  83. .progress-xxs,
  84. .progress.xxs .progress-bar,
  85. .progress-xxs .progress-bar {
  86. border-radius: 1px;
  87. }
  88. /* Vertical bars */
  89. .progress.vertical {
  90. position: relative;
  91. width: 30px;
  92. height: 200px;
  93. display: inline-block;
  94. margin-right: 10px;
  95. }
  96. .progress.vertical > .progress-bar {
  97. width: 100%;
  98. position: absolute;
  99. bottom: 0;
  100. }
  101. .progress.vertical.sm,
  102. .progress.vertical.progress-sm {
  103. width: 20px;
  104. }
  105. .progress.vertical.xs,
  106. .progress.vertical.progress-xs {
  107. width: 10px;
  108. }
  109. .progress.vertical.xxs,
  110. .progress.vertical.progress-xxs {
  111. width: 3px;
  112. }
  113. .progress-group .progress-text {
  114. /* font-weight: 600; */
  115. }
  116. .progress-group .progress-number {
  117. float: right;
  118. }
  119. /* Remove margins from progress bars when put in a table */
  120. .table tr > td .progress {
  121. margin: 0;
  122. }
  123. .progress-bar-light-blue,
  124. .progress-bar-primary {
  125. background-color: #3c8dbc;
  126. }
  127. .progress-striped .progress-bar-light-blue,
  128. .progress-striped .progress-bar-primary {
  129. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  130. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  131. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  132. }
  133. .progress-bar-green, .progress-bar-success {
  134. background-color: <?php echo $badgeSuccess ?>;
  135. }
  136. .progress-striped .progress-bar-green, .progress-striped .progress-bar-success {
  137. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  138. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  139. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  140. }
  141. body[class*="colorblind-"] .progress-bar-green, body[class*="colorblind-"] .progress-bar-success {
  142. background-color: <?php echo $colorblind_deuteranopes_badgeSuccess ?>;
  143. }
  144. body[class*="colorblind-"] .progress-bar-red, body[class*="colorblind-"] .progress-bar-danger {
  145. background-color: <?php echo $colorblind_deuteranopes_badgeDanger ?>;
  146. }
  147. .progress-bar-aqua,
  148. .progress-bar-info {
  149. background-color: #00c0ef;
  150. }
  151. .progress-striped .progress-bar-aqua,
  152. .progress-striped .progress-bar-info {
  153. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  154. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  155. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  156. }
  157. .progress-bar-yellow,
  158. .progress-bar-warning {
  159. background-color: <?php echo $badgeWarning ?>;
  160. }
  161. .progress-striped .progress-bar-yellow,
  162. .progress-striped .progress-bar-warning {
  163. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  164. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  165. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  166. }
  167. .progress-bar-red,
  168. .progress-bar-danger {
  169. background-color: <?php echo $badgeDanger ?>;
  170. }
  171. .progress-striped .progress-bar-red,
  172. .progress-striped .progress-bar-danger {
  173. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  174. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  175. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  176. }
  177. .progress-bar-consumed {
  178. background-color: rgb(0, 0, 0, 0.15);
  179. }