← All changes | modules/theme-tools/compat/twentytwentyone.css +114 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,114 @@
	1	+/**
	2	+ * Related Posts
	3	+ */
	4	+
	5	+.entry-content #jp-relatedposts {
	6	+ max-width: var(--responsive--aligndefault-width);
	7	+ margin-left: auto;
	8	+ margin-right: auto;
	9	+}
	10	+
	11	+/**
	12	+ * Infinite Scroll
	13	+ */
	14	+
	15	+/* Globally hidden elements when Infinite Scroll is supported and in use. */
	16	+.infinite-scroll .pagination,
	17	+.infinite-scroll.neverending .widget-area,
	18	+.infinite-scroll.neverending footer#colophon {
	19	+
	20	+ /* Theme Footer (when set to scrolling) */
	21	+ display: none;
	22	+}
	23	+
	24	+/* When Infinite Scroll has reached its end we need to re-display
	25	+ * elements that were hidden (via .neverending) before. */
	26	+.infinity-end.neverending .widget-area,
	27	+.infinity-end.neverending footer#colophon {
	28	+ display: block;
	29	+}
	30	+
	31	+body[class*=" infinity-"] main#main > article:last-of-type .entry-footer {
	32	+ border-bottom: var(--separator--height) solid var(--separator--border-color);
	33	+}
	34	+
	35	+body:not(.infinity-end) .site-main > div:nth-last-child(2) > article:last-of-type .entry-footer,
	36	+body.infinity-end .site-main > div:last-of-type > article:last-of-type .entry-footer {
	37	+ border: none;
	38	+}
	39	+
	40	+.site-main > .infinite-wrap > article > .entry-footer {
	41	+ margin-top: var(--global--spacing-vertical);
	42	+ padding-top: var(--global--spacing-unit);
	43	+ padding-bottom: calc(3 * var(--global--spacing-vertical));
	44	+ border-bottom: var(--separator--height) solid var(--separator--border-color);
	45	+}
	46	+
	47	+.site-main > .infinite-wrap > * {
	48	+ margin-top: calc(3 * var(--global--spacing-vertical));
	49	+ margin-bottom: calc(3 * var(--global--spacing-vertical));
	50	+}
	51	+
	52	+#infinite-handle {
	53	+ text-align: center;
	54	+}
	55	+
	56	+.infinite-loader {
	57	+ margin: calc(3 * 1rem) auto;
	58	+}
	59	+
	60	+#infinite-handle span {
	61	+ color: var(--global--color-background);
	62	+ background-color: var(--global--color-secondary);
	63	+ font-family: var(--global--font-primary);
	64	+ font-size: var(--global--font-size-base);
	65	+ font-weight: 500;
	66	+ line-height: 1.5;
	67	+ border-width: 3px;
	68	+ border-radius: 0;
	69	+ padding: 15px calc(2 * var(--button--padding-vertical));
	70	+ max-width: 170px;
	71	+ margin: auto;
	72	+}
	73	+
	74	+#infinite-handle span:hover {
	75	+ color: var(--global--color-secondary);
	76	+ background-color: var(--global--color-background);
	77	+ border-color: var(--global--color-secondary);
	78	+ border-style: solid;
	79	+}
	80	+
	81	+#infinite-handle span:active {
	82	+ color: var(--global--color-secondary);
	83	+ background-color: var(--global--color-background);
	84	+ border-color: var(--global--color-secondary);
	85	+}
	86	+
	87	+/* Customizer */
	88	+.widget-area .widget_block {
	89	+ min-width: 0;
	90	+}
	91	+
	92	+@media only screen and (min-width: 1024px) {
	93	+
	94	+ .widget-area {
	95	+
	96	+ /*
	97	+ Fix: minimum width of 0
	98	+ See: https://css-tricks.com/preventing-a-grid-blowout/
	99	+ */
	100	+ grid-template-columns: repeat(3, minmax(0, 1fr));
	101	+ }
	102	+}
	103	+
	104	+/* Contact form */
	105	+
	106	+/* See https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/style.css?rev=58726#L1276 */
	107	+@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	108	+
	109	+ .contact-form input.grunion-field[type="checkbox"],
	110	+ .contact-form input.grunion-field[type="radio"] {
	111	+ width: 25px;
	112	+ height: 25px;
	113	+ }
	114	+}