25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ecomonde.css 9.6 KiB

10 년 전
10 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. .progress-bar-verte {
  2. background-color: #28b62c;
  3. }
  4. .progress-striped .progress-bar-verte {
  5. 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);
  6. 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);
  7. }
  8. .progress-bar-bleue {
  9. background-color: #158cba;
  10. }
  11. .progress-striped .progress-bar-bleue {
  12. 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);
  13. 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);
  14. }
  15. .progress-bar-jaune {
  16. background-color: #ffd000;
  17. }
  18. .progress-striped .progress-bar-jaune {
  19. 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);
  20. 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);
  21. }
  22. .progress-bar-rouge {
  23. background-color: #ff4136;
  24. }
  25. .progress-striped .progress-bar-rouge {
  26. 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);
  27. 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);
  28. }
  29. .progress-bar-blanche {
  30. background-color: #ADDFFF;
  31. }
  32. .progress-striped .progress-bar-blanche {
  33. 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);
  34. 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);
  35. }
  36. .progress-bar-noire {
  37. background-color: #8128B5;
  38. }
  39. .progress-striped .progress-bar-noire {
  40. 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);
  41. 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);
  42. }
  43. .progress-bar-eco {
  44. height: 18px;
  45. font-size: 14px;
  46. font-weight: bold;
  47. text-align: center;
  48. color: black;
  49. text-shadow:
  50. #FFF 1px 1px,
  51. #FFF -1px 1px,
  52. #FFF -1px -1px,
  53. #FFF 1px -1px;
  54. }
  55. .progress-bar-eco span {
  56. display: inline-block;
  57. height: 100%;
  58. background-color: #777;
  59. -moz-border-radius: 3px;
  60. -webkit-border-radius: 3px;
  61. border-radius: 3px;
  62. -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  63. -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  64. box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  65. -webkit-transition: width .4s ease-in-out;
  66. -moz-transition: width .4s ease-in-out;
  67. -ms-transition: width .4s ease-in-out;
  68. -o-transition: width .4s ease-in-out;
  69. transition: width .4s ease-in-out;
  70. }
  71. .verte span {
  72. background-color: #28b62c;
  73. background-image: -webkit-gradient(linear, left top, left bottom, from(#28b62c), to(#2BD630));
  74. background-image: -webkit-linear-gradient(top, #28b62c, #2BD630);
  75. background-image: -moz-linear-gradient(top, #28b62c, #2BD630);
  76. background-image: -ms-linear-gradient(top, #28b62c, #2BD630);
  77. background-image: -o-linear-gradient(top, #28b62c, #2BD630);
  78. background-image: linear-gradient(top, #28b62c, #2BD630);
  79. }
  80. .bleue span {
  81. background-color: #416BE8;
  82. background-image: -webkit-gradient(linear, left top, left bottom, from(#416BE8), to(#419AE8));
  83. background-image: -webkit-linear-gradient(top, #416BE8, #419AE8);
  84. background-image: -moz-linear-gradient(top, #416BE8, #419AE8);
  85. background-image: -ms-linear-gradient(top, #416BE8, #419AE8);
  86. background-image: -o-linear-gradient(top, #416BE8, #419AE8);
  87. background-image: linear-gradient(top, #416BE8, #419AE8);
  88. }
  89. .jaune span {
  90. background-color: #FFD700;
  91. background-image: -webkit-gradient(linear, left top, left bottom, from(#FFD700), to(#FAF27F));
  92. background-image: -webkit-linear-gradient(top, #FFD700, #FAF27F);
  93. background-image: -moz-linear-gradient(top, #FFD700, #FAF27F);
  94. background-image: -ms-linear-gradient(top, #FFD700, #FAF27F);
  95. background-image: -o-linear-gradient(top, #FFD700, #FAF27F);
  96. background-image: linear-gradient(top, #FFD700, #FAF27F);
  97. }
  98. .rouge span {
  99. background-color: #E31B1B;
  100. background-image: -webkit-gradient(linear, left top, left bottom, from(#E31B1B), to(#FF6B6B));
  101. background-image: -webkit-linear-gradient(top, #E31B1B, #FF6B6B);
  102. background-image: -moz-linear-gradient(top, #E31B1B, #FF6B6B);
  103. background-image: -ms-linear-gradient(top, #E31B1B, #FF6B6B);
  104. background-image: -o-linear-gradient(top, #E31B1B, #FF6B6B);
  105. background-image: linear-gradient(top, #E31B1B, #FF6B6B);
  106. }
  107. .blanche span {
  108. background-color: #ADDFFF;
  109. background-image: -webkit-gradient(linear, left top, left bottom, from(#ADDFFF), to(#CCFFFC));
  110. background-image: -webkit-linear-gradient(top, #ADDFFF, #CCFFFC);
  111. background-image: -moz-linear-gradient(top, #ADDFFF, #CCFFFC);
  112. background-image: -ms-linear-gradient(top, #ADDFFF, #CCFFFC);
  113. background-image: -o-linear-gradient(top, #ADDFFF, #CCFFFC);
  114. background-image: linear-gradient(top, #ADDFFF, #CCFFFC);
  115. }
  116. .noire span {
  117. background-color: #8128B5;
  118. background-image: -webkit-gradient(linear, left top, left bottom, from(#8128B5), to(#792DA6));
  119. background-image: -webkit-linear-gradient(top, #8128B5, #792DA6);
  120. background-image: -moz-linear-gradient(top, #8128B5, #792DA6);
  121. background-image: -ms-linear-gradient(top, #8128B5, #792DA6);
  122. background-image: -o-linear-gradient(top, #8128B5, #792DA6);
  123. background-image: linear-gradient(top, #8128B5, #792DA6);
  124. }
  125. .shine span {
  126. position: relative;
  127. }
  128. .shine span::after {
  129. content: '';
  130. opacity: 0;
  131. position: absolute;
  132. top: 0;
  133. right: 0;
  134. bottom: 0;
  135. left: 0;
  136. background: #fff;
  137. -moz-border-radius: 3px;
  138. -webkit-border-radius: 3px;
  139. border-radius: 3px;
  140. -webkit-animation: animate-shine 2s ease-out infinite;
  141. -moz-animation: animate-shine 2s ease-out infinite;
  142. }
  143. @-webkit-keyframes animate-shine {
  144. 0% {opacity: 0; width: 0;}
  145. 50% {opacity: .5;}
  146. 100% {opacity: 0; width: 95%;}
  147. }
  148. @-moz-keyframes animate-shine {
  149. 0% {opacity: 0; width: 0;}
  150. 50% {opacity: .5;}
  151. 100% {opacity: 0; width: 95%;}
  152. }
  153. .glow span {
  154. -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
  155. -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
  156. box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
  157. -webkit-animation: animate-glow 1s ease-out infinite;
  158. -moz-animation: animate-glow 1s ease-out infinite;
  159. }
  160. @-webkit-keyframes animate-glow {
  161. 0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
  162. 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
  163. 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
  164. }
  165. @-moz-keyframes animate-glow {
  166. 0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
  167. 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
  168. 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
  169. }
  170. .panel-light {
  171. border-color: #ADDFFF;
  172. }
  173. .panel-light > .panel-heading {
  174. color: #333333;
  175. background-color: #ADDFFF;
  176. border-color: #ADDFFF;
  177. }
  178. .panel-light > .panel-heading + .panel-collapse .panel-body {
  179. border-top-color: #ADDFFF;
  180. }
  181. .panel-light > .panel-footer + .panel-collapse .panel-body {
  182. border-bottom-color: #ADDFFF;
  183. }
  184. .panel-dark {
  185. border-color: #8128B5;
  186. }
  187. .panel-dark > .panel-heading {
  188. color: #333333;
  189. background-color: #8128B5;
  190. border-color: #8128B5;
  191. }
  192. .panel-dark > .panel-heading + .panel-collapse .panel-body {
  193. border-top-color: #8128B5;
  194. }
  195. .panel-dark > .panel-footer + .panel-collapse .panel-body {
  196. border-bottom-color: #8128B5;
  197. }
  198. #dice {
  199. float: left;
  200. width: 24px;
  201. height: 24px;
  202. font-weight: bold;
  203. font-size: 18px;
  204. text-align:center;
  205. background: #FFFFFF;
  206. border-top: solid grey 2px;
  207. border-bottom: solid black 1px;
  208. border-left: solid black 1px;
  209. border-right: solid grey 2px;
  210. color: black;
  211. }
  212. .level {
  213. float: left;
  214. width: 26px;
  215. height: 24px;
  216. font-weight: bold;
  217. font-size: 18px;
  218. text-align:center;
  219. background: #000;
  220. color: white;
  221. }
  222. .p_light {
  223. text-align: center;
  224. padding: 5px;
  225. font-size: 30px;
  226. color: #ADDFFF;
  227. font-weight: bold;
  228. }
  229. .p_dark {
  230. text-align: center;
  231. padding: 5px;
  232. font-size: 30px;
  233. color: #8128B5;
  234. font-weight: bold;
  235. }