Brak opisu

infinity.css 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. /* =Infinity Styles
  2. -------------------------------------------------------------- */
  3. .infinite-loader {
  4. color: #000;
  5. display: block;
  6. height: 28px;
  7. text-align: center;
  8. }
  9. #infinite-handle span {
  10. background: #333;
  11. border-radius: 1px;
  12. color: #f0f0f1;
  13. cursor: pointer;
  14. font-size: 13px;
  15. padding: 6px 16px;
  16. }
  17. /**
  18. * CSS Spinner Styles
  19. */
  20. @keyframes spinner-inner {
  21. 0% { opacity: 1 }
  22. 100% { opacity: 0 }
  23. }
  24. .infinite-loader .spinner-inner div {
  25. left: 47px;
  26. top: 24px;
  27. position: absolute;
  28. animation: spinner-inner linear 1s infinite;
  29. background: #000000;
  30. outline: 1px solid white;
  31. width: 6px;
  32. height: 12px;
  33. border-radius: 3px / 6px;
  34. transform-origin: 3px 26px;
  35. }
  36. .infinite-loader .spinner-inner div:nth-child(1) {
  37. transform: rotate(0deg);
  38. animation-delay: -0.9166666666666666s;
  39. background: #000000;
  40. }
  41. .infinite-loader .spinner-inner div:nth-child(2) {
  42. transform: rotate(30deg);
  43. animation-delay: -0.8333333333333334s;
  44. background: #000000;
  45. }
  46. .infinite-loader .spinner-inner div:nth-child(3) {
  47. transform: rotate(60deg);
  48. animation-delay: -0.75s;
  49. background: #000000;
  50. }
  51. .infinite-loader .spinner-inner div:nth-child(4) {
  52. transform: rotate(90deg);
  53. animation-delay: -0.6666666666666666s;
  54. background: #000000;
  55. }
  56. .infinite-loader .spinner-inner div:nth-child(5) {
  57. transform: rotate(120deg);
  58. animation-delay: -0.5833333333333334s;
  59. background: #000000;
  60. }
  61. .infinite-loader .spinner-inner div:nth-child(6) {
  62. transform: rotate(150deg);
  63. animation-delay: -0.5s;
  64. background: #000000;
  65. }
  66. .infinite-loader .spinner-inner div:nth-child(7) {
  67. transform: rotate(180deg);
  68. animation-delay: -0.4166666666666667s;
  69. background: #000000;
  70. }
  71. .infinite-loader .spinner-inner div:nth-child(8) {
  72. transform: rotate(210deg);
  73. animation-delay: -0.3333333333333333s;
  74. background: #000000;
  75. }
  76. .infinite-loader .spinner-inner div:nth-child(9) {
  77. transform: rotate(240deg);
  78. animation-delay: -0.25s;
  79. background: #000000;
  80. }
  81. .infinite-loader .spinner-inner div:nth-child(10) {
  82. transform: rotate(270deg);
  83. animation-delay: -0.16666666666666666s;
  84. background: #000000;
  85. }
  86. .infinite-loader .spinner-inner div:nth-child(11) {
  87. transform: rotate(300deg);
  88. animation-delay: -0.08333333333333333s;
  89. background: #000000;
  90. }
  91. .infinite-loader .spinner-inner div:nth-child(12) {
  92. transform: rotate(330deg);
  93. animation-delay: 0s;
  94. background: #000000;
  95. }
  96. .infinite-loader .spinner {
  97. width: 28px;
  98. height: 28px;
  99. display: inline-block;
  100. overflow: hidden;
  101. background: none;
  102. }
  103. .infinite-loader .spinner-inner {
  104. width: 100%;
  105. height: 100%;
  106. position: relative;
  107. transform: translateZ(0) scale(0.28);
  108. backface-visibility: hidden;
  109. transform-origin: 0 0; /* see note above */
  110. }
  111. .infinite-loader .spinner-inner div {
  112. box-sizing: content-box;
  113. }
  114. /**
  115. * Using a highly-specific rule to make sure that all button styles
  116. * will be reset
  117. */
  118. #infinite-handle span button,
  119. #infinite-handle span button:hover,
  120. #infinite-handle span button:focus {
  121. display: inline;
  122. position: static;
  123. padding: 0;
  124. margin: 0;
  125. border: none;
  126. line-height: inherit;
  127. background: transparent;
  128. color: inherit;
  129. cursor: inherit;
  130. font-size: inherit;
  131. font-weight: inherit;
  132. font-family: inherit;
  133. }
  134. /**
  135. * This is used to avoid unnecessary inner button spacing in Firefox
  136. */
  137. #infinite-handle span button::-moz-focus-inner {
  138. margin: 0;
  139. padding: 0;
  140. border: none;
  141. }
  142. /**
  143. * For smaller viewports, remove the down-arrow icon and turn
  144. * the button into a block element, spanning the content's full width.
  145. */
  146. @media (max-width: 800px) {
  147. #infinite-handle span:before {
  148. display: none;
  149. }
  150. #infinite-handle span {
  151. display: block;
  152. }
  153. }
  154. /**
  155. * Footer
  156. */
  157. #infinite-footer {
  158. position: fixed;
  159. bottom: -50px;
  160. left: 0;
  161. width: 100%;
  162. }
  163. #infinite-footer a {
  164. text-decoration: none;
  165. }
  166. #infinite-footer .blog-info a:hover,
  167. #infinite-footer .blog-credits a:hover {
  168. color: #444;
  169. text-decoration: underline;
  170. }
  171. #infinite-footer .container {
  172. background: rgba( 255, 255, 255, 0.8 );
  173. border-color: #ccc;
  174. border-color: rgba( 0, 0, 0, 0.1 );
  175. border-style: solid;
  176. border-width: 1px 0 0;
  177. -moz-box-sizing: border-box;
  178. box-sizing: border-box;
  179. margin: 0 auto;
  180. overflow: hidden;
  181. padding: 1px 20px;
  182. width: 780px;
  183. }
  184. #infinite-footer .blog-info,
  185. #infinite-footer .blog-credits {
  186. -moz-box-sizing: border-box;
  187. -webkit-box-sizing: border-box;
  188. box-sizing: border-box;
  189. line-height: 25px;
  190. }
  191. #infinite-footer .blog-info {
  192. float: left;
  193. overflow: hidden;
  194. text-align: left;
  195. text-overflow: ellipsis;
  196. white-space: nowrap;
  197. width: 40%;
  198. }
  199. #infinite-footer .blog-credits {
  200. font-weight: normal;
  201. float: right;
  202. width: 60%;
  203. }
  204. #infinite-footer .blog-info a {
  205. color: #111;
  206. font-size: 14px;
  207. font-weight: bold;
  208. }
  209. #infinite-footer .blog-credits {
  210. color: #888;
  211. font-size: 12px;
  212. text-align: right;
  213. }
  214. #infinite-footer .blog-credits a {
  215. color: #646970;
  216. }
  217. /**
  218. * Hooks to infinity-end body class to restore footer
  219. */
  220. .infinity-end.neverending #infinite-footer {
  221. display: none;
  222. }
  223. /**
  224. * Responsive structure for the footer
  225. */
  226. @media (max-width: 640px) {
  227. #infinite-footer .container {
  228. -moz-box-sizing: border-box;
  229. -webkit-box-sizing: border-box;
  230. box-sizing: border-box;
  231. width: 100%;
  232. }
  233. #infinite-footer .blog-info {
  234. width: 30%;
  235. }
  236. #infinite-footer .blog-credits {
  237. width: 70%;
  238. }
  239. #infinite-footer .blog-info a,
  240. #infinite-footer .blog-credits {
  241. font-size: 10px;
  242. }
  243. }
  244. /**
  245. * No fixed footer on small viewports
  246. */
  247. @media ( max-width: 640px ) {
  248. #infinite-footer {
  249. position: static;
  250. }
  251. }
  252. /**
  253. * Hide infinite aria feedback visually
  254. */
  255. #infinite-aria {
  256. position: absolute;
  257. overflow: hidden;
  258. clip: rect(0 0 0 0);
  259. height: 1px; width: 1px;
  260. margin: -1px; padding: 0; border: 0;
  261. }
  262. /**
  263. * Hide focus on infinite wrappers
  264. */
  265. .infinite-wrap:focus {
  266. outline: 0 !important;
  267. }