twentyseventeen.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. .infinite-scroll .pagination {
  2. display: none;
  3. }
  4. .infinite-wrap > article:before,
  5. .infinite-wrap > article:after {
  6. content: "";
  7. display: table;
  8. }
  9. .infinite-wrap > article:after {
  10. clear: both;
  11. }
  12. .infinite-wrap > article {
  13. padding-bottom: 2em;
  14. }
  15. /* Spinner */
  16. .site-main .infinite-loader {
  17. clear: both;
  18. color: currentColor;
  19. height: 42px;
  20. margin-bottom: 3.5em;
  21. }
  22. .blog:not(.has-sidebar) .infinite-loader {
  23. width: 100%;
  24. }
  25. .site-main .infinite-loader .spinner {
  26. left: 50%!important;
  27. }
  28. /* Click-to-load */
  29. #infinite-handle {
  30. clear: both;
  31. margin: 0 7.6923% 2em;
  32. text-align: center;
  33. }
  34. /* Style "Load More" button */
  35. .site-main #infinite-handle span {
  36. background: #1a1a1a;
  37. border-radius: 2px;
  38. color: #fff;
  39. font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
  40. font-size: inherit;
  41. font-weight: 700;
  42. letter-spacing: 0.046875em;
  43. line-height: 1;
  44. padding: 0.84375em 0.875em 0.78125em;
  45. text-transform: uppercase;
  46. }
  47. #infinite-handle span:hover,
  48. #infinite-handle span:focus {
  49. background: #767676;
  50. }
  51. /* Style "Load More" button when dark color scheme is used */
  52. .colors-dark .site-main #infinite-handle span {
  53. background: #f8f8f8;
  54. border-radius: 2px;
  55. color: #222;
  56. font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
  57. font-size: inherit;
  58. font-weight: 700;
  59. letter-spacing: 0.046875em;
  60. line-height: 1;
  61. padding: 0.84375em 0.875em 0.78125em;
  62. text-transform: uppercase;
  63. }
  64. .colors-dark #infinite-handle span:hover,
  65. .colors-dark #infinite-handle span:focus {
  66. background: #bbb;
  67. columns: #222;
  68. }
  69. /* Style Infinite Footer */
  70. #infinite-footer {
  71. position: fixed !important;
  72. }
  73. #infinite-footer .container {
  74. background-color: #fff;
  75. border-color: #d1d1d1;
  76. padding: 0 7.6923%;
  77. }
  78. #infinite-footer .blog-info,
  79. #infinite-footer .blog-credits {
  80. font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
  81. text-align: center;
  82. width: auto;
  83. }
  84. #infinite-footer .blog-info a,
  85. #infinite-footer .blog-credits,
  86. #infinite-footer .blog-credits a {
  87. color: #222222;
  88. }
  89. #infinite-footer .blog-info a:hover,
  90. #infinite-footer .blog-info a:focus,
  91. #infinite-footer .blog-credits a:hover,
  92. #infinite-footer .blog-credits a:focus {
  93. color: #767676;
  94. text-decoration: none;
  95. }
  96. .infinite-scroll #navigation,
  97. .infinite-scroll.neverending .jetpack-mobile-link,
  98. .infinite-scroll.neverending .site-footer {
  99. display: none;
  100. }
  101. /* Shows the footer & mobile link again in case all posts have been loaded */
  102. .infinity-end.neverending .jetpack-mobile-link,
  103. .infinity-end.neverending .site-footer {
  104. display: block;
  105. }
  106. @media screen and (min-width: 44.375em) {
  107. #infinite-handle {
  108. margin: 0 0 1em 0;
  109. text-align: center;
  110. }
  111. .has-sidebar #infinite-handle {
  112. text-align: left;
  113. }
  114. .site-main #infinite-handle span {
  115. display: inline-block;
  116. }
  117. }
  118. @media screen and (min-width: 48em) {
  119. .infinite-wrap > article {
  120. padding-bottom: 4em;
  121. }
  122. }
  123. @media screen and (min-width: 48em) {
  124. #infinite-footer .blog-info,
  125. #infinite-footer .blog-credits {
  126. line-height: 35px;
  127. }
  128. #infinite-footer .blog-info {
  129. font-size: 1.1rem;
  130. }
  131. #infinite-footer .blog-credits {
  132. font-size: 0.9rem;
  133. }
  134. .blog:not(.has-sidebar) .infinite-loader {
  135. float: right;
  136. width: 58%;
  137. }
  138. .site-main .infinite-loader .spinner {
  139. margin-left: -17px;
  140. }
  141. }