← All changes | modules/infinite-scroll/infinity.css +200 -0 16.2-beta → 16.3 View file →

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