infinity.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /* =Infinity Styles
  2. -------------------------------------------------------------- */
  3. .infinite-wrap {
  4. }
  5. .infinite-loader {
  6. color: #000;
  7. display: block;
  8. height: 28px;
  9. text-indent: -9999px;
  10. }
  11. #infinite-handle span {
  12. background: #333;
  13. border-radius: 1px;
  14. color: #eee;
  15. cursor: pointer;
  16. font-size: 13px;
  17. padding: 6px 16px;
  18. }
  19. /**
  20. * Using a highly-specific rule to make sure that all button styles
  21. * will be reset
  22. */
  23. #infinite-handle span button,
  24. #infinite-handle span button:hover,
  25. #infinite-handle span button:focus {
  26. display: inline;
  27. position: static;
  28. padding: 0;
  29. margin: 0;
  30. border: none;
  31. line-height: inherit;
  32. background: transparent;
  33. color: inherit;
  34. cursor: inherit;
  35. font-size: inherit;
  36. font-weight: inherit;
  37. font-family: inherit;
  38. }
  39. /**
  40. * This is used to avoid unnecessary inner button spacing in Firefox
  41. */
  42. #infinite-handle span button::-moz-focus-inner {
  43. margin: 0;
  44. padding: 0;
  45. border: none;
  46. }
  47. /**
  48. * For smaller viewports, remove the down-arrow icon and turn
  49. * the button into a block element, spanning the content's full width.
  50. */
  51. @media (max-width: 800px) {
  52. #infinite-handle span:before {
  53. display: none;
  54. }
  55. #infinite-handle span {
  56. display: block;
  57. }
  58. }
  59. /**
  60. * Footer
  61. */
  62. #infinite-footer {
  63. position: fixed;
  64. bottom: -50px;
  65. left: 0;
  66. width: 100%;
  67. }
  68. #infinite-footer a {
  69. text-decoration: none;
  70. }
  71. #infinite-footer .blog-info a:hover,
  72. #infinite-footer .blog-credits a:hover {
  73. color: #444;
  74. text-decoration: underline;
  75. }
  76. #infinite-footer .container {
  77. background: rgba( 255, 255, 255, 0.8 );
  78. border-color: #ccc;
  79. border-color: rgba( 0, 0, 0, 0.1 );
  80. border-style: solid;
  81. border-width: 1px 0 0;
  82. -moz-box-sizing: border-box;
  83. box-sizing: border-box;
  84. margin: 0 auto;
  85. overflow: hidden;
  86. padding: 1px 20px;
  87. width: 780px;
  88. }
  89. #infinite-footer .blog-info,
  90. #infinite-footer .blog-credits {
  91. -moz-box-sizing: border-box;
  92. -webkit-box-sizing: border-box;
  93. box-sizing: border-box;
  94. line-height: 25px;
  95. }
  96. #infinite-footer .blog-info {
  97. float: left;
  98. overflow: hidden;
  99. text-align: left;
  100. text-overflow: ellipsis;
  101. white-space: nowrap;
  102. width: 40%;
  103. }
  104. #infinite-footer .blog-credits {
  105. font-weight: normal;
  106. float: right;
  107. width: 60%;
  108. }
  109. #infinite-footer .blog-info a {
  110. color: #111;
  111. font-size: 14px;
  112. font-weight: bold;
  113. }
  114. #infinite-footer .blog-credits {
  115. color: #888;
  116. font-size: 12px;
  117. text-align: right;
  118. }
  119. #infinite-footer .blog-credits a {
  120. color: #666;
  121. }
  122. /**
  123. * Hooks to infinity-end body class to restore footer
  124. */
  125. .infinity-end.neverending #infinite-footer {
  126. display: none;
  127. }
  128. /**
  129. * Responsive structure for the footer
  130. */
  131. @media (max-width: 640px) {
  132. #infinite-footer .container {
  133. -moz-box-sizing: border-box;
  134. -webkit-box-sizing: border-box;
  135. box-sizing: border-box;
  136. width: 100%;
  137. }
  138. #infinite-footer .blog-info {
  139. width: 30%;
  140. }
  141. #infinite-footer .blog-credits {
  142. width: 70%;
  143. }
  144. #infinite-footer .blog-info a,
  145. #infinite-footer .blog-credits {
  146. font-size: 10px;
  147. }
  148. }
  149. /**
  150. * No fixed footer on small viewports
  151. */
  152. @media ( max-width: 640px ) {
  153. #infinite-footer {
  154. position: static;
  155. }
  156. }