← All changes | modules/infinite-scroll/themes/twentyseventeen.css +171 -0 16.2-beta → 16.3-beta View file →

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