← All changes | modules/infinite-scroll/infinity.css +33 -111 13.7.2 → 16.3-a.1 View file →

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