convertkit / resources / frontend / css / broadcasts.css

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

148 lines 3.5 KB

Raw Download Zip

1	.convertkit-broadcasts.has-background,
2	.editor-styles-wrapper .convertkit-broadcasts.has-background {
3	padding: 20px;
4	}
5	.convertkit-broadcasts.convertkit-broadcasts-loading,
6	.editor-styles-wrapper .convertkit-broadcasts.convertkit-broadcasts-loading {
7	background-color: #e3e3e3 !important;
8	background-image: url(../images/spinner.gif);
9	background-position: center;
10	background-repeat: no-repeat;
11	}
12	.convertkit-broadcasts-list,
13	.editor-styles-wrapper .convertkit-broadcasts-list,
14	.convertkit-broadcasts-pagination,
15	.editor-styles-wrapper .convertkit-broadcasts-pagination {
16	list-style: none;
17	margin: 0;
18	padding: 0;
19	}
20
21	/**
22	* List View
23	*/
24	.convertkit-broadcasts-list li {
25	display: grid;
26	grid-template-areas:
27	"date title"
28	"image text";
29	grid-template-columns: 150px auto;
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 {
80	list-style: none;
81	margin: 0;
82	padding: 5px 0;
83	}
84	.convertkit-broadcasts-list li time {
85	display: inline-block;
86	grid-area: date;
87	}
88	.convertkit-broadcasts-list li .convertkit-broadcast-title {
89	display: inline-block;
90	grid-area: title;
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	*/
117	.convertkit-broadcasts-pagination {
118	display: grid;
119	grid-template-areas: "prev next";
120	grid-template-columns: repeat(2, 1fr);
121	grid-column-gap: 20px;
122	padding: 20px 0 0 0;
123	}
124	.convertkit-broadcasts-pagination li {
125	list-style: none;
126	margin: 0;
127	}
128	.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-prev {
129	grid-area: prev;
130	text-align: left;
131	}
132	.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-next {
133	grid-area: next;
134	text-align: right;
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	}