convertkit / resources / frontend / css / broadcasts.css

broadcasts.css in Kit (formerly ConvertKit) – Email Newsletter, Email Marketing, Membership, Subscribers and Landing Pages 3.0.8, at resources/frontend/css/broadcasts.css

212 lines 4.7 KB

Raw Download Zip

1	/**
2	* Pagination
3	*/
4	.convertkit-broadcasts-pagination {
5	display: grid;
6	grid-template-areas: "prev next";
7	grid-template-columns: repeat(2, 1fr);
8	grid-column-gap: 20px;
9	padding: 20px 0 0 0;
10	}
11
12	.convertkit-broadcasts-pagination li {
13	list-style: none;
14	margin: 0;
15	}
16
17	.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-prev {
18	grid-area: prev;
19	text-align: left;
20	}
21
22	.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-next {
23	grid-area: next;
24	text-align: right;
25	}
26
27	.convertkit-broadcasts-list,
28	.editor-styles-wrapper .convertkit-broadcasts-list,
29	.convertkit-broadcasts-pagination,
30	.editor-styles-wrapper .convertkit-broadcasts-pagination {
31	list-style: none;
32	margin: 0;
33	padding: 0;
34	}
35
36	/**
37	* Broadcasts
38	*/
39	.convertkit-broadcasts.has-background,
40	.convertkit-broadcasts[data-background-color],
41	.editor-styles-wrapper .convertkit-broadcasts.has-background {
42	padding: 20px;
43	}
44
45	.convertkit-broadcasts.convertkit-broadcasts-loading,
46	.editor-styles-wrapper .convertkit-broadcasts.convertkit-broadcasts-loading {
47	background-color: #e3e3e3 !important;
48	background-image: url(../images/spinner.gif);
49	background-position: center;
50	background-repeat: no-repeat;
51	}
52
53	/**
54	* Broadcast Item
55	*/
56	.convertkit-broadcasts-list li {
57	list-style: none;
58	margin: 0;
59	padding: 5px 0;
60	display: grid;
61	grid-template-areas:
62	"date title"
63	"image text";
64	grid-template-columns: 150px auto;
65	grid-column-gap: 20px;
66	}
67
68	.convertkit-broadcasts-list li time {
69	display: inline-block;
70	grid-area: date;
71	}
72
73	.convertkit-broadcasts[data-display-order="broadcast-date"] .convertkit-broadcasts-list li time {
74	text-align: right;
75	}
76
77	.convertkit-broadcasts[data-display-grid="1"][data-display-order="broadcast-date"] .convertkit-broadcasts-list li time {
78	text-align: left;
79	}
80
81	.convertkit-broadcasts-list li .convertkit-broadcast-title {
82	display: inline-block;
83	grid-area: title;
84	}
85
86	.convertkit-broadcasts-list li .convertkit-broadcast-image {
87	display: inline-block;
88	grid-area: image;
89	}
90
91	.convertkit-broadcasts-list li .convertkit-broadcast-image img {
92	max-width: 100%;
93	height: auto;
94	}
95
96	.convertkit-broadcasts-list li .convertkit-broadcast-text {
97	display: inline-block;
98	grid-area: text;
99	font-size: 16px;
100	}
101
102	.convertkit-broadcasts-list li .convertkit-broadcast-read-more {
103	display: block;
104	}
105
106	@media screen and (max-width: 478px) {
107
108	.convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li {
109	margin: 0 0 20px 0;
110	}
111	}
112
113	/**
114	* List View
115	*/
116	.convertkit-broadcasts[data-display-order="broadcast-date"] .convertkit-broadcasts-list li {
117	grid-template-areas:
118	"title date"
119	"text image";
120	grid-template-columns: auto 150px;
121	}
122
123	@media screen and (max-width: 478px) {
124
125	.convertkit-broadcasts-list li {
126	grid-template-areas:
127	"image image"
128	"date date"
129	"title title"
130	"text text";
131	grid-row-gap: 10px;
132	}
133	}
134
135	/**
136	* Grid View.
137	*/
138	.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
139	display: grid;
140	grid-template-columns: repeat(3, 1fr);
141	grid-column-gap: 20px;
142	grid-row-gap: 20px;
143	align-items: start;
144	}
145
146	.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li {
147	grid-template-areas:
148	"image"
149	"date"
150	"title"
151	"text";
152	grid-template-columns: none;
153	grid-row-gap: 10px;
154	}
155
156	.convertkit-broadcasts[data-display-grid="1"][data-display-order="broadcast-date"] .convertkit-broadcasts-list li {
157	grid-template-areas:
158	"image"
159	"title"
160	"text"
161	"date";
162	}
163
164	.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li .convertkit-broadcast-read-more {
165	margin: 10px 0 0 0;
166	}
167
168	@media screen and (max-width: 768px) {
169
170	.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
171	grid-template-columns: repeat(2, 1fr);
172	}
173	}
174
175	@media screen and (max-width: 478px) {
176
177	.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list {
178	grid-template-columns: repeat(1, 1fr);
179	}
180	}
181
182	/**
183	* Replicates CSS styles provided by block themes for older non-block themes
184	* that may not include these definitions, resulting in incorrect spacing.
185	*/
186	.convertkit-broadcasts {
187	margin-bottom: 20px;
188	}
189
190	@media only screen and (min-width: 482px) {
191
192	.convertkit-broadcasts {
193	margin-bottom: 30px;
194	}
195	}
196
197	/**
198	* Imported Broadcasts to Posts
199	* - Styles here are designed to override common themes that may interfere
200	* with an imported Kit Broadcast, such as Elementor.
201	*/
202	body.convertkit-broadcast.elementor-default table,
203	body.convertkit-broadcast.elementor-default table tbody,
204	body.convertkit-broadcast.elementor-default table tbody td {
205	border: none;
206	}
207
208	body.convertkit-broadcast.elementor-default table tbody > tr:nth-child(odd) > td,
209	body.convertkit-broadcast.elementor-default table tbody > tr:nth-child(odd) > th {
210	background: none;
211	}
212