PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.7
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.7
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / src / admin / styles / _lite-vs-pro.scss

_lite-vs-pro.scss in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.7, at src/admin/styles/_lite-vs-pro.scss

366 lines 7.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .sp-pcp-blocks-setting-modules-page {
2 .sp-pcp-blocks-settings-toggle-btn {
3 position: absolute;
4 right: 20px;
5 }
6
7 .sp-smart-post-sidebar-popup-toggle {
8 position: absolute;
9 right: 0;
10 bottom: 60px;
11 }
12 }
13
14 .spspc-title .spspc-settings-info {
15 padding: 5px !important;
16 margin: 0;
17 cursor: help;
18
19 svg {
20 transform: translateY(3px);
21 }
22
23 &:hover .spspc-help-tooltip {
24 opacity: 1;
25 visibility: visible;
26 }
27
28 .spspc-help-tooltip {
29 width: 400px !important;
30 display: inline-block;
31 position: absolute;
32 margin-left: 10px;
33 opacity: 0;
34 visibility: hidden;
35 transition: all 0.3s ease-in-out;
36 z-index: 9;
37 text-align: left !important;
38 padding: 15px 20px 15px !important;
39
40 // ul li {
41 // // list-style: disc !important;
42 // // margin-top: 4px !important;
43 // // margin-left: 20px;
44 // }
45 }
46
47 .spspc-info-icon {
48 display: inline-block;
49 color: #bdbdbd;
50 font-size: 16px;
51 transform: translateY(5px);
52 }
53
54 }
55
56 .sp-pcp-page-section-title {
57 grid-column: 1/4;
58 margin-bottom: -10px;
59 margin-top: -6px;
60 .sp-pcp-blocks-setting-title {
61 font-size: 24px !important;
62 margin-top: 0 !important;
63 }
64 span {
65 margin-top: 22px;
66 display: inline-block;
67 font-size: 16px;
68 }
69 }
70
71 // .spspc-trustpilot-section {
72 // display: flex;
73 // justify-content: center;
74 // font-size: 16px;
75 // font-weight: 500;
76 // line-height: 1.4;
77 // margin-top: 80px !important;
78 // gap: 5px;
79 // align-items: center;
80 // h4 {
81 // font-weight: 500;
82 // margin-bottom: 20px;
83 // }
84 // ul {
85 // display: flex;
86 // gap: 2px;
87 // li {
88 // display: flex;
89 // }
90 // }
91 // a {
92 // color: #1E1E1E;
93 // }
94 // }
95
96 // Testimonial Section Styles
97 .spspc-testimonial {
98 margin-top: 60px;
99
100 .spspc-testimonial-header {
101 display: flex;
102 flex-direction: column;
103 align-items: center;
104 gap: 16px;
105 padding-top: 80px !important;
106 margin-bottom: 50px !important;
107
108 .spspc-testimonial-ratings {
109 display: flex;
110 gap: 16px;
111
112 .spspc-testimonial-rating-item {
113 display: flex;
114 align-items: center;
115 gap: 8px;
116 text-decoration: none;
117 transition: opacity 0.3s ease;
118
119 .spspc-testimonial-rating-wordpress {
120 display: flex;
121 align-items: center;
122 gap: 8px;
123
124 .spspc-wp-mark {
125 width: 20px;
126 height: 20px;
127 border-radius: 4px;
128 color: #fff;
129 display: flex;
130 align-items: center;
131 justify-content: center;
132 font-weight: 700;
133 font-size: 14px;
134 }
135
136 .spspc-wp-text {
137 color: #444c50;
138 font-weight: 500;
139 font-size: 14px;
140 display: flex;
141
142 svg {
143 color: #ffc329;
144 width: 15px;
145 height: 15px;
146 }
147 }
148 }
149
150 .spspc-testimonial-rating-trustpilot {
151 width: 20px;
152 height: 20px;
153
154 .spspc-trustpilot-mark {
155 color: #00b57a;
156 font-size: 20px;
157
158 svg {
159 width: 21px;
160 height: 20px;
161 }
162 }
163 }
164
165 .spspc-trustpilot-stars {
166 color: #fff;
167 font-size: 14px;
168 display: flex;
169 gap: 2px;
170
171 svg {
172 background-color: #00b57a;
173 padding: 2px;
174 width: 13px;
175 height: 13px;
176 }
177 }
178
179 .spspc-testimonial-rating-score {
180 color: #444c50;
181 font-weight: 600;
182 font-size: 16px;
183 }
184
185 .spspc-testimonial-review-count {
186 color: #575f62;
187 font-weight: 500;
188 font-size: 14px;
189 }
190 }
191 }
192
193 .spspc-testimonial-title {
194 font-size: 28px;
195 font-weight: 600;
196 line-height: 28px;
197 color: #2f2f2f;
198 margin: 0;
199 }
200 }
201
202 .spspc-testimonial-wrap {
203 display: flex;
204 gap: 24px;
205 }
206 }
207
208 .spspc-testimonial-card {
209 background: #fff;
210 border: 1px solid #ddd;
211 border-radius: 16px;
212 padding: 32px !important;
213 flex: 1;
214 min-width: 0;
215 display: flex;
216 flex-direction: column;
217 gap: 20px;
218 align-items: flex-start;
219
220 .spspc-testimonial-card-header {
221 .spspc-testimonial-reviewer {
222 display: flex;
223 gap: 12px;
224 align-items: center;
225
226 .spspc-testimonial-avatar {
227 position: relative;
228 width: 60px;
229 height: 60px;
230 flex-shrink: 0;
231
232 img {
233 width: 60px;
234 height: 60px;
235 border-radius: 99px;
236 object-fit: cover;
237 }
238
239 .spspc-testimonial-source-badge {
240 position: absolute;
241 bottom: 0;
242 right: 0;
243 width: 24px;
244 height: 24px;
245 background: #fff;
246 border-radius: 50%;
247 display: flex;
248 align-items: center;
249 justify-content: center;
250 padding: 1px;
251 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
252
253 span {
254 width: 16px;
255 height: 16px;
256 background: #1e1e1e;
257 border-radius: 4px;
258 color: #fff;
259 display: flex;
260 align-items: center;
261 justify-content: center;
262 font-weight: 700;
263 font-size: 10px;
264 }
265
266 svg {
267 width: 16px;
268 height: 16px;
269 }
270 }
271 }
272
273 .spspc-testimonial-reviewer-info {
274 display: flex;
275 flex-direction: column;
276 gap: 4px;
277
278 h3 {
279 font-size: 16px;
280 font-weight: 500;
281 color: #1e1e1e;
282 margin: 0;
283 }
284
285 p {
286 font-size: 14px;
287 color: #757575;
288 margin: 0;
289 }
290 }
291 }
292 }
293
294 .spspc-testimonial-rating-stars {
295 display: flex;
296 justify-content: flex-start;
297 gap: 2px;
298 align-items: center;
299
300 span {
301 color: #F4674D;
302 font-size: 16px;
303 display: flex;
304 gap: 2px;
305 }
306 }
307
308 .spspc-testimonial-card-content {
309 p {
310 font-size: 15px;
311 line-height: 24px;
312 color: #1e1e1e;
313 margin: 0;
314 }
315 }
316
317 // Trustpilot card specific styles
318 &.spspc-testimonial-card-trustpilot {
319 .spspc-testimonial-avatar {
320 // Yellow background for Trustpilot initials
321 .spspc-testimonial-avatar-initials {
322 width: 60px;
323 height: 60px;
324 border-radius: 99px;
325 background-color: #fff7c4;
326 display: flex;
327 align-items: center;
328 justify-content: center;
329 font-weight: 500;
330 font-size: 22px;
331 color: #000;
332 }
333 }
334
335 .spspc-testimonial-source-badge {
336 svg {
337 color: #00b57a;
338 }
339 }
340 }
341
342 .spspc-testimonial-rating-trustpilot-stars {
343 display: flex;
344 gap: 2px;
345 align-items: center;
346
347 .spspc-trustpilot-star-item {
348 background-color: #00b57a;
349 padding: 1.5px;
350 border-radius: 2px;
351 display: flex;
352 align-items: center;
353 justify-content: center;
354 width: 11px;
355 height: 11px;
356 flex-shrink: 0;
357
358 svg {
359 width: 13px;
360 height: 13px;
361 }
362 }
363 }
364 }
365
366