Нет описания

pum-admin-batch.css 9.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. /*!******************************************************************************
  2. * Copyright (c) 2019, Code Atlantic LLC
  3. ******************************************************************************/
  4. .pum-batch-form .spinner {
  5. float: none;
  6. margin: 4px 10px 8px;
  7. position: relative;
  8. }
  9. .pum-batch-form .pum-upgrade-messages {
  10. margin-bottom: 10px;
  11. max-height: 200px;
  12. overflow: auto;
  13. padding-right: 10px;
  14. }
  15. .pum-batch-progress {
  16. /* Fallback technique styles */
  17. }
  18. .pum-batch-progress progress {
  19. background-clip: padding-box;
  20. background-color: #ddd;
  21. border-radius: 0;
  22. display: block;
  23. height: 20px;
  24. margin: 0 auto;
  25. overflow: hidden;
  26. position: relative;
  27. width: 100%;
  28. }
  29. .pum-batch-progress progress::-moz-progress-bar, .pum-batch-progress progress::-ms-progress-bar, .pum-batch-progress progress::progress-bar {
  30. background-color: #ddd;
  31. }
  32. .pum-batch-progress progress::-webkit-progress-bar {
  33. background-color: #ddd;
  34. }
  35. .pum-batch-progress progress[value] {
  36. /* Get rid of the default appearance */
  37. -webkit-appearance: none;
  38. /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
  39. background-color: #4169e1;
  40. /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
  41. border: none;
  42. /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  43. color: #4169e1;
  44. margin: 0 0 10px;
  45. }
  46. .pum-batch-progress progress[value]::-moz-progress-value, .pum-batch-progress progress[value]::-ms-progress-value, .pum-batch-progress progress[value]::progress-value {
  47. background-color: #4169e1;
  48. border-radius: 3px;
  49. -moz-transition: width 0.15s cubic-bezier(0, 0, 1, -0.12);
  50. -ms-transition: width 0.15s cubic-bezier(0, 0, 1, -0.12);
  51. transition: width 0.15s cubic-bezier(0, 0, 1, -0.12);
  52. }
  53. .pum-batch-progress progress[value]::-webkit-progress-value {
  54. background-color: #4169e1;
  55. border-radius: 3px;
  56. -webkit-transition: width 0.15s cubic-bezier(0, 0, 1, -0.12);
  57. transition: width 0.15s cubic-bezier(0, 0, 1, -0.12);
  58. /* Let's animate this */
  59. animation: animate-stripes 5s linear infinite;
  60. /*
  61. &::after {
  62. content: '';
  63. position: absolute;
  64. width: 5px;
  65. height: 5px;
  66. top: 7px;
  67. right: 7px;
  68. background-color: white;
  69. border-radius: 100%;
  70. }
  71. */
  72. }
  73. .pum-batch-progress progress:not([value]) {
  74. background-color: #4169e1;
  75. position: relative;
  76. }
  77. .pum-batch-progress progress:not([value]):before {
  78. animation: indeterminate 0.15s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  79. background-color: inherit;
  80. bottom: 0;
  81. content: '';
  82. left: 0;
  83. position: absolute;
  84. top: 0;
  85. will-change: left, right;
  86. }
  87. .pum-batch-progress progress:not([value]):after {
  88. animation: indeterminate-short 0.15s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  89. animation-delay: 1.15s;
  90. background-color: inherit;
  91. bottom: 0;
  92. content: '';
  93. left: 0;
  94. position: absolute;
  95. top: 0;
  96. will-change: left, right;
  97. }
  98. @keyframes indeterminate {
  99. 0% {
  100. left: -35%;
  101. right: 100%;
  102. }
  103. 60% {
  104. left: 100%;
  105. right: -90%;
  106. }
  107. 100% {
  108. left: 100%;
  109. right: -90%;
  110. }
  111. }
  112. @keyframes indeterminate-short {
  113. 0% {
  114. left: -200%;
  115. right: 100%;
  116. }
  117. 60% {
  118. left: 107%;
  119. right: -8%;
  120. }
  121. 100% {
  122. left: 107%;
  123. right: -8%;
  124. }
  125. }
  126. @keyframes animate-stripes {
  127. 100% {
  128. background-position: -100px 0;
  129. }
  130. }
  131. .pum-batch-progress .progress-bar {
  132. background-color: whiteSmoke;
  133. border-radius: 3px;
  134. box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
  135. /* Dimensions should be similar to the parent progress element. */
  136. height: 20px;
  137. width: 100%;
  138. }
  139. .pum-batch-progress .progress-bar span {
  140. background-color: #4169e1;
  141. border-radius: 3px;
  142. display: block;
  143. text-indent: -9999px;
  144. }
  145. .admin-color-fresh .pum-batch-progress progress[value] {
  146. background-color: #0073aa;
  147. /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  148. color: #0073aa;
  149. }
  150. .admin-color-fresh .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-fresh .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-fresh .pum-batch-progress progress[value]::progress-value {
  151. background-color: #0073aa;
  152. }
  153. .admin-color-fresh .pum-batch-progress progress[value]::-webkit-progress-value {
  154. background-color: #0073aa;
  155. }
  156. .admin-color-fresh .pum-batch-progress progress:not([value]) {
  157. background-color: #0073aa;
  158. }
  159. .admin-color-light .pum-batch-progress progress[value] {
  160. background-color: #888;
  161. /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  162. color: #888;
  163. }
  164. .admin-color-light .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-light .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-light .pum-batch-progress progress[value]::progress-value {
  165. background-color: #888;
  166. }
  167. .admin-color-light .pum-batch-progress progress[value]::-webkit-progress-value {
  168. background-color: #888;
  169. }
  170. .admin-color-light .pum-batch-progress progress:not([value]) {
  171. background-color: #888;
  172. }
  173. .admin-color-blue .pum-batch-progress progress[value] {
  174. background-color: #096484;
  175. /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  176. color: #096484;
  177. }
  178. .admin-color-blue .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-blue .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-blue .pum-batch-progress progress[value]::progress-value {
  179. background-color: #096484;
  180. }
  181. .admin-color-blue .pum-batch-progress progress[value]::-webkit-progress-value {
  182. background-color: #096484;
  183. }
  184. .admin-color-blue .pum-batch-progress progress:not([value]) {
  185. background-color: #096484;
  186. }
  187. .admin-color-coffee .pum-batch-progress progress[value] {
  188. background-color: #c7a589;
  189. /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  190. color: #c7a589;
  191. }
  192. .admin-color-coffee .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-coffee .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-coffee .pum-batch-progress progress[value]::progress-value {
  193. background-color: #c7a589;
  194. }
  195. .admin-color-coffee .pum-batch-progress progress[value]::-webkit-progress-value {
  196. background-color: #c7a589;
  197. }
  198. .admin-color-coffee .pum-batch-progress progress:not([value]) {
  199. background-color: #c7a589;
  200. }
  201. .admin-color-ectoplasm .pum-batch-progress progress[value] {
  202. background-color: #a3b745;
  203. /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  204. color: #a3b745;
  205. }
  206. .admin-color-ectoplasm .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-ectoplasm .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-ectoplasm .pum-batch-progress progress[value]::progress-value {
  207. background-color: #a3b745;
  208. }
  209. .admin-color-ectoplasm .pum-batch-progress progress[value]::-webkit-progress-value {
  210. background-color: #a3b745;
  211. }
  212. .admin-color-ectoplasm .pum-batch-progress progress:not([value]) {
  213. background-color: #a3b745;
  214. }
  215. .admin-color-midnight .pum-batch-progress progress[value] {
  216. background-color: #e14d43;
  217. /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  218. color: #e14d43;
  219. }
  220. .admin-color-midnight .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-midnight .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-midnight .pum-batch-progress progress[value]::progress-value {
  221. background-color: #e14d43;
  222. }
  223. .admin-color-midnight .pum-batch-progress progress[value]::-webkit-progress-value {
  224. background-color: #e14d43;
  225. }
  226. .admin-color-midnight .pum-batch-progress progress:not([value]) {
  227. background-color: #e14d43;
  228. }
  229. .admin-color-sunrise .pum-batch-progress progress[value] {
  230. background-color: #dd823b;
  231. /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
  232. color: #dd823b;
  233. }
  234. .admin-color-sunrise .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-sunrise .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-sunrise .pum-batch-progress progress[value]::progress-value {
  235. background-color: #dd823b;
  236. }
  237. .admin-color-sunrise .pum-batch-progress progress[value]::-webkit-progress-value {
  238. background-color: #dd823b;
  239. }
  240. .admin-color-sunrise .pum-batch-progress progress:not([value]) {
  241. background-color: #dd823b;
  242. }
  243. .pum-batch-progress {
  244. display: none;
  245. }
  246. .pum-batch-progress progress,
  247. .pum-batch-progress .pum-upgrade-message-textarea {
  248. display: none;
  249. }
  250. .pum-batch-progress.pum-batch-progress--active {
  251. display: block;
  252. }
  253. .pum-batch-progress.pum-batch-progress--active progress.active {
  254. display: block;
  255. }
  256. .pum-batch-progress.pum-batch-progress--active .pum-upgrade-message-textarea--active {
  257. display: block;
  258. }
  259. /*# sourceMappingURL=pum-admin-batch.css.map */