← All changes | resources/frontend/css/broadcasts.css +113 -3 2.2.1 → 2.7.4 View file →

		@@ -16,23 +16,105 @@
16	16	list-style: none;
17	17	margin: 0;
18	18	padding: 0;
19	19	}
	20	+
	21	+/**
	22	+ * List View
	23	+ */
20	24	.convertkit-broadcasts-list li {
21	25	display: grid;
22		- grid-template-areas: "date subject";
	26	+ grid-template-areas:
	27	+ "date title"
	28	+ "image text";
23	29	grid-template-columns: 150px auto;
24	30	grid-column-gap: 20px;
	31	+}
	32	+@media screen and (max-width: 478px) {
	33	+ .convertkit-broadcasts-list li {
	34	+ grid-template-areas:
	35	+ "image image"
	36	+ "date date"
	37	+ "title title"
	38	+ "text text";
	39	+ grid-row-gap: 10px;
	40	+ }
	41	+}
	42	+
	43	+/**
	44	+ * Grid View.
	45	+ */
	46	+.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
	47	+ display: grid;
	48	+ grid-template-columns: repeat(3, 1fr);
	49	+ grid-column-gap: 20px;
	50	+ grid-row-gap: 20px;
	51	+ align-items: start;
	52	+}
	53	+.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li {
	54	+ grid-template-areas:
	55	+ "image"
	56	+ "date"
	57	+ "title"
	58	+ "text";
	59	+ grid-template-columns: none;
	60	+ grid-row-gap: 10px;
	61	+}
	62	+.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li .convertkit-broadcast-read-more {
	63	+ margin: 10px 0 0 0;
	64	+}
	65	+@media screen and (max-width: 768px) {
	66	+ .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
	67	+ grid-template-columns: repeat(2, 1fr);
	68	+ }
	69	+}
	70	+@media screen and (max-width: 478px) {
	71	+ .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
	72	+ grid-template-columns: repeat(1, 1fr);
	73	+ }
	74	+}
	75	+
	76	+/**
	77	+ * Broadcast Item
	78	+ */
	79	+.convertkit-broadcasts-list li {
25	80	list-style: none;
26	81	margin: 0;
27	82	padding: 5px 0;
28	83	}
29	84	.convertkit-broadcasts-list li time {
	85	+ display: inline-block;
30	86	grid-area: date;
31	87	}
32		-.convertkit-broadcasts-list li a {
33		- grid-area: subject;
	88	+.convertkit-broadcasts-list li .convertkit-broadcast-title {
	89	+ display: inline-block;
	90	+ grid-area: title;
34	91	}
	92	+.convertkit-broadcasts-list li .convertkit-broadcast-image {
	93	+ display: inline-block;
	94	+ grid-area: image;
	95	+}
	96	+.convertkit-broadcasts-list li .convertkit-broadcast-image img {
	97	+ max-width: 100%;
	98	+ height: auto;
	99	+}
	100	+.convertkit-broadcasts-list li .convertkit-broadcast-text {
	101	+ display: inline-block;
	102	+ grid-area: text;
	103	+ font-size: 16px;
	104	+}
	105	+.convertkit-broadcasts-list li .convertkit-broadcast-read-more {
	106	+ display: block;
	107	+}
	108	+@media screen and (max-width: 478px) {
	109	+ .convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li {
	110	+ margin: 0 0 20px 0;
	111	+ }
	112	+}
	113	+
	114	+/**
	115	+ * Pagination
	116	+ */
35	117	.convertkit-broadcasts-pagination {
36	118	display: grid;
37	119	grid-template-areas: "prev next";
38	120	grid-template-columns: repeat(2, 1fr);
		@@ -50,4 +132,32 @@
50	132	.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-next {
51	133	grid-area: next;
52	134	text-align: right;
53	135	}
	136	+
	137	+/**
	138	+ * Replicates CSS styles provided by block themes for older non-block themes
	139	+ * that may not include these definitions, resulting in incorrect spacing.
	140	+ */
	141	+.convertkit-broadcasts {
	142	+ margin-bottom: 20px;
	143	+}
	144	+@media only screen and (min-width: 482px) {
	145	+ .convertkit-broadcasts {
	146	+ margin-bottom: 30px;
	147	+ }
	148	+}
	149	+
	150	+/**
	151	+ * Imported Broadcasts to Posts
	152	+ * - Styles here are designed to override common themes that may interfere
	153	+ * with an imported Kit Broadcast, such as Elementor.
	154	+ */
	155	+body.convertkit-broadcast.elementor-default table,
	156	+body.convertkit-broadcast.elementor-default table tbody,
	157	+body.convertkit-broadcast.elementor-default table tbody td {
	158	+ border: none;
	159	+}
	160	+body.convertkit-broadcast.elementor-default table tbody>tr:nth-child(odd)>td,
	161	+body.convertkit-broadcast.elementor-default table tbody>tr:nth-child(odd)>th {
	162	+ background: none;
	163	+}