PluginProbe
BlockSpare – Gutenberg Blocks for News, Magazine, Blog & Business Websites / 3.3.3
BlockSpare – Gutenberg Blocks for News, Magazine, Blog & Business Websites v3.3.3
4.1.0 trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.0.5 1.1.0 1.1.1 1.1.2 1.2.0 1.2.1 1.2.2 1.2.3 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 2.1.2 2.5.0 2.5.3 2.6.1 All 38 releases
blockspare / admin / assets / css / style.css

style.css in BlockSpare – Gutenberg Blocks for News, Magazine, Blog & Business Websites 3.3.3, at admin/assets/css/style.css

612 lines 14.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1
2 :root {
3 --blockspare-primary-color: #8B249C;
4 --blockspare-secondary-color: #3B1A5B;
5 --blockspare-text-accent: #1f2937;
6 --blockspare-text-primary: #4b5563:
7 }
8
9 /***************** Notice Start ***********************/
10 .blockspare-notice {
11 display: flex;
12 position: relative;
13 border: none;
14 padding: 0;
15 overflow: hidden;
16 }
17
18 .blockspare-notice .blockspare-notice__logo {
19 background: #fdf5ff;
20 padding: 15px 12px;
21 border-left: 4px solid;
22 border-image: linear-gradient(to bottom, var(--blockspare-secondary-color), var(--blockspare-secondary-color)) 1 100%;
23 z-index: 1;
24 }
25
26 .blockspare-notice .blockspare-notice__logo svg {
27 width: 30px;
28 height: 30px;
29 }
30
31 .blockspare-notice .blockspare-logo .st0 {
32 fill: var(--blockspare-secondary-color);
33 }
34 .blockspare-notice .blockspare-logo .st1 {
35 fill:var(--blockspare-primary-color);
36 }
37
38 .blockspare-notice .blockspare-notice__content {
39 flex: 1;
40 padding: 20px 50px 25px 20px;
41 z-index: 1;
42 background: linear-gradient(
43 to right,
44 #fff 40%, transparent 100%
45 ) 50% / 100% 100% no-repeat;
46 }
47
48 .blockspare-notice .blockspare-notice__content h2{
49 margin: 0;
50 }
51
52 .blockspare-notice .blockspare-notice__content p{
53 max-width: 800px;
54 }
55
56 .blockspare-notice .blockspare-notice__content .links{
57 display: flex;
58 flex-wrap: wrap;
59 gap: 10px;
60 }
61
62 .blockspare-notice .button-primary {
63 background-color: var(--blockspare-primary-color);
64 border-color: var(--blockspare-primary-color);
65 }
66
67 .blockspare-notice .button-primary:hover {
68 color: var(--blockspare-primary-color);
69 border-color: var(--blockspare-primary-color);
70 }
71
72 .blockspare-notice .button-secondary {
73 color: var(--blockspare-primary-color);
74 border-color: var(--blockspare-primary-color);
75 }
76
77 .blockspare-notice .button-secondary:hover {
78 color: var(--blockspare-secondary-color);
79 border-color: var(--blockspare-secondary-color);
80 }
81
82 .blockspare-pro-link {
83 color: var(--blockspare-primary-color);
84 color: var(--blockspare-primary-color);
85 }
86
87 .blockspare-pro-link:hover, .blockspare-pro-link:focus {
88 color: var(--blockspare-primary-color);
89 }
90
91 .blockspare-notice .bs-notice-image {
92 flex: 1;
93 position: absolute;
94 left: 100%;
95 top: 0;
96 width: 1260px;
97 height: 100%;
98 z-index: 0;
99 transform: translateX(-1260px);
100 }
101
102 .blockspare-notice .bs-notice-image img{
103 width: 100%;
104 height: 100%;
105 object-fit: cover;
106 overflow: hidden;
107 }
108
109 .blockspare-notice .blockspare-notice-dismiss {
110 text-decoration: none;
111 z-index: 2;
112 }
113
114
115 /**************** setup notice ******************/
116 .blockspare-notice-setup {
117 position: relative;
118 border: none;
119 padding: 0;
120 }
121
122
123 .blockspare-notice-setup .bs-welcome-panel-header {
124 position: relative;
125 color: #fff;
126 width: 100%;
127 background-image: url(../../../assets/banner.jpg);
128 background-attachment: fixed;
129 background-size: contain, cover;
130
131 }
132
133 .toplevel_page_blockspare .blockspare-notice-setup .bs-welcome-panel-header {
134 border-radius: 6px;
135 overflow: hidden;
136 }
137
138 .blockspare-notice-setup .bs-welcome-panel-header::before{
139 content: '';
140 position: absolute;
141 top: 0;
142 right: 0;
143 bottom: 0;
144 left: 0;
145 z-index: 1;
146 background: rgba(0, 0, 0, 0.7);
147 }
148
149 .blockspare-notice-setup .bs-welcome-panel-header * {
150 color: inherit;
151 position: relative;
152 z-index: 1;
153 }
154
155 .blockspare-notice-setup .bs-welcome-panel-header-image {
156 overflow: hidden;
157 max-width: 1500px;
158 margin: 0 auto;
159 padding: 0 32px;
160 box-sizing: border-box;
161 }
162
163 .blockspare-notice-setup .blockspare-notice-image {
164 display: block;
165 width: 100%;
166 height: 100%;
167 object-fit: cover;
168 overflow: hidden;
169 }
170
171 .blockspare-notice-setup .blockspare-notice-info {
172 max-width: 1500px;
173 margin: 0 auto;
174 padding: 32px;
175 box-sizing: border-box;
176 text-align: center;
177 }
178
179 .blockspare-notice-setup .bs-welcome-panel-header-logo {
180 display: flex;
181 align-items: center;
182 justify-content: center;
183 gap: 10px;
184 font-size: 20px;
185 margin-bottom: 16px;
186 }
187
188 .blockspare-notice-setup .bs-welcome-panel-header-logo svg{
189 fill: #fff;
190 }
191
192 .blockspare-notice-setup .blockspare-version {
193 display: flex;
194 align-items: center;
195 gap: 5px;
196 }
197 .blockspare-notice-setup .blockspare-version span{
198 background: var(--blockspare-primary-color);
199 font-size: 12px;
200 padding: 0 5px;
201 border-radius: 3px;
202 }
203
204 .blockspare-notice-setup .blockspare-notice-title {
205 margin: 0;
206 font-size: 32px;
207 font-weight: 600;
208 line-height: 1.25;
209 }
210
211 .blockspare-notice-setup .blockspare-notice-description {
212 margin: 10px auto 24px;
213 font-size: 18px;
214 line-height: 1.7;
215 max-width: 700px;
216 }
217 .blockspare-notice-setup .blockspare-notice-buttons{
218 display: flex;
219 flex-wrap: wrap;
220 gap: 12px;
221 align-items: center;
222 /* margin-bottom: 24px; */
223 justify-content: center;
224 }
225
226 .blockspare-notice-setup .blockspare-notice-button {
227 display: inline-flex;
228 align-items: center;
229 gap: 8px;
230 font-weight: 500;
231 font-size: 14px;
232 text-transform: uppercase;
233 line-height: 24px;
234 padding: 10px 16px;
235 border-radius: 6px;
236 text-align: center;
237 text-decoration: none;
238 border: 1px solid transparent;
239 cursor: pointer;
240 white-space: nowrap;
241 }
242
243 .blockspare-notice-setup .blockspare-notice-button:focus {
244 box-shadow: none;
245 border: none;
246 }
247
248 .blockspare-notice-setup .blockspare-notice-button-primary{
249 background-color: var(--blockspare-primary-color);
250 border-color: var(--blockspare-primary-color);
251 color: #fff;
252 }
253
254
255 .blockspare-notice-setup .blockspare-notice-button-outline {
256 border-color: var(--blockspare-primary-color);
257 color: var(--blockspare-primary-color);
258 }
259
260
261 .blockspare-notice-setup .blockspare-notice-button-secondary {
262 border: 1px solid #ffffff;
263 color: #ffffff;
264 }
265
266
267 .blockspare-notice-setup .blockspare-notice-links{
268 display: flex;
269 flex-wrap: wrap;
270 gap: 16px;
271 }
272
273 .blockspare-notice-setup .blockspare-notice-link {
274 color: var(--blockspare-primary-color);
275 font-size: 14px;
276 /* text-decoration: none; */
277 transition: all .3s ease-in-out;
278 }
279
280 /* .blockspare-notice-setup .blockspare-notice-link:hover {
281 text-decoration: underline;
282 } */
283
284 .blockspare-notice-setup .bs-welcome-panel-column-container {
285 display: flex;
286 justify-content: center;
287 width: 100%;
288 z-index: 1;
289 padding: 32px;
290 gap: 32px;
291 box-sizing: border-box;
292 background: #fff;
293 }
294
295 .blockspare-notice-setup .bs-welcome-panel-column {
296 width: 100%;
297 max-width: 460px;
298 display: grid;
299 grid-template-columns: min-content 1fr;
300 gap: 24px;
301 }
302
303 .blockspare-notice-setup .bs-welcome-panel-column-icon {
304 display: flex;
305 align-items: center;
306 justify-content: center;
307 width: 48px;
308 height: 48px;
309 background: var(--blockspare-primary-color); /* fallback for old browsers */
310 background: -webkit-linear-gradient(to bottom, var(--blockspare-primary-color), #000); /* Chrome 10-25, Safari 5.1-6 */
311 background: linear-gradient(to bottom, var(--blockspare-primary-color), #000);
312 border-radius: 50%;
313 }
314
315 .blockspare-notice-setup .bs-welcome-panel-column-icon svg {
316 fill: #fff;
317 }
318
319 .blockspare-notice-setup .bs-welcome-panel-column h3{
320 margin: 0;
321 font-size: 18px;
322 font-weight: 400;
323 line-height: 1.4;
324 }
325
326 .blockspare-notice-setup .bs-welcome-panel-column p{
327 font-size: 14px;
328 line-height: 1.7;
329 padding: 0;
330 }
331
332 .blockspare-notice-setup .blockspare-notice-dismiss {
333 z-index: 3;
334 text-decoration: none;
335 }
336
337 .blockspare-notice-setup .blockspare-notice-dismiss::before {
338 color: #fff;
339 }
340
341 .blockspare-notice-setup .blockspare-notice-dismiss:hover::before {
342 color: #D63638;
343 }
344
345 /* dashboard_widget_notice */
346
347 #blockspare_dashboard_widget_id .inside {
348 padding: 0;
349 margin: 0;
350 }
351
352 #blockspare_dashboard_widget_id .bs-welcome-panel-header{
353 padding: 12px;
354 display: flex;
355 align-items: center;
356 gap: 10px;
357 border-bottom: 1px solid #f0f0f1;
358 }
359
360 #blockspare_dashboard_widget_id .bs-welcome-panel-banner {
361 /* text-align: center; */
362 padding: 12px 12px 20px 12px;
363 background-image: url("../../../assets/banner.jpg");
364 background-position: center; /* Center the image */
365 background-repeat: no-repeat; /* Do not repeat the image */
366 background-size: cover;
367 position: relative;
368 }
369
370 #blockspare_dashboard_widget_id .bs-welcome-panel-banner::before {
371 content: '';
372 position: absolute;
373 left: 0;
374 top: 0;
375 width: 100%;
376 height: 100%;
377 background: rgba(59, 26, 91, 0.5);
378 z-index: 0;
379 }
380 #blockspare_dashboard_widget_id .bs-welcome-panel-banner h2
381 {
382 color: #ffffff;
383 font-size: 22px;
384 line-height: 1.5;
385 font-weight: 500;
386 position: relative;
387 z-index: 1;
388 }
389 #blockspare_dashboard_widget_id .bs-welcome-panel-banner h4{
390 color: #ffffff;
391 position: relative;
392 z-index: 1;
393 }
394
395 #blockspare_dashboard_widget_id .bs-welcome-panel-header-logo {
396 display: flex;
397 align-items: center;
398 justify-content: center;
399 width: 33px;
400 height: 33px;
401 border-radius: 50%;
402 background: var(--blockspare-primary-color); /* fallback for old browsers */
403 background: -webkit-linear-gradient(to right, var(--blockspare-primary-color), var(--blockspare-secondary-color)); /* Chrome 10-25, Safari 5.1-6 */
404 background: linear-gradient(to right, var(--blockspare-primary-color), var(--blockspare-secondary-color));
405 }
406
407 #blockspare_dashboard_widget_id .bs-welcome-panel-header-logo svg{
408 height: 18px;
409 width: 18px;
410 fill: #fff;
411 }
412
413 #blockspare_dashboard_widget_id .blockspare-version span{
414 color: var(--blockspare-primary-color);
415 }
416
417 #blockspare_dashboard_widget_id .bs-dashobard-button {
418 display: inline-flex;
419 align-items: center;
420 justify-content: center;
421 gap: 5px;
422 text-decoration: none;
423 font-size: 13px;
424 min-height: 30px;
425 padding: 0 10px;
426 cursor: pointer;
427 border: 1px solid transparent;
428 border-radius: 3px;
429 white-space: nowrap;
430 box-sizing: border-box;
431 color: var(--blockspare-primary-color);
432 border-color: var(--blockspare-primary-color);
433 background: rgba(140, 36, 156, 0.15);
434 transition: all .3s ease-in-out;
435 }
436
437 #blockspare_dashboard_widget_id .bs-dashobard-button:hover{
438 background: rgba(140, 36, 156, 0.2);;
439 border-color: var(--blockspare-secondary-color);
440 color: var(--blockspare-secondary-color);
441 }
442
443 #blockspare_dashboard_widget_id .bs-create-button {
444 margin-left: auto;
445 }
446
447 #blockspare_dashboard_widget_id .bs-welcome-panel-column-container {
448 display: flex;
449 flex-direction: column;
450 gap: 16px;
451 padding: 16px;
452 box-sizing: border-box;
453 }
454
455 #blockspare_dashboard_widget_id .bs-welcome-panel-column {
456 display: grid;
457 grid-template-columns: min-content 1fr;
458 gap: 16px;
459 }
460
461 #blockspare_dashboard_widget_id .bs-welcome-panel-column-content h3 {
462 margin: 0;
463 font-size: 14px;
464 font-weight: 600;
465 line-height: 1.4;
466 color: var(--blockspare-text-accent);
467 }
468
469 #blockspare_dashboard_widget_id .bs-welcome-panel-column-content p {
470 font-size: 14px;
471 font-weight: 400;
472 color: var(--blockspare-text-primary);
473 margin: 8px 0;
474 }
475
476 #blockspare_dashboard_widget_id .bs-welcome-panel-column-content a {
477 font-size: 14px;
478 font-weight: 400;
479 text-decoration: none;
480 color: var(--blockspare-primary-color);
481 transition: all .3s ease-in-out;
482 }
483
484 #blockspare_dashboard_widget_id .bs-welcome-panel-column-content a:hover {
485 color: var(--blockspare-secondary-color);
486 text-decoration: underline;
487 }
488
489 #blockspare_dashboard_widget_id .blockspare-dashboard-widget-footer {
490 border-top: 1px solid #f0f0f1;
491 padding: 12px;
492 }
493
494 #blockspare_dashboard_widget_id .blockspare-dashboard-widget-footer ul{
495 display: flex;
496 list-style: none;
497 margin: 0;
498 padding: 0;
499 }
500
501 #blockspare_dashboard_widget_id .blockspare-dashboard-widget-footer li{
502 padding: 0 10px;
503 margin: 0;
504 border-inline-start: 1px solid #ddd;
505 }
506
507 #blockspare_dashboard_widget_id .blockspare-dashboard-widget-footer li:first-child{
508 padding-inline-start: 0;
509 border: none;
510 }
511
512
513 /***************** Notice End ***********************/
514
515 @media screen and (max-width: 1800px) {
516 .blockspare-notice .blockspare-notice__content {
517 background: linear-gradient(
518 to right,
519 #fff 45%, transparent 100%
520 ) 5% / 100% 100% no-repeat;
521 }
522 }
523
524 @media screen and (max-width: 1400px) {
525 .blockspare-notice .blockspare-notice__content {
526 background: linear-gradient(
527 to right,
528 #fff 60%, transparent 100%
529 ) 50% / 100% 100% no-repeat;
530 }
531 }
532
533 @media screen and (max-width: 1180px) and (min-width: 783px) {
534 .blockspare-notice-setup .bs-welcome-panel-column {
535 grid-template-columns: 1fr;
536 }
537 .blockspare-notice-setup .bs-welcome-panel-column-icon {
538 display: none;
539 }
540 }
541
542 @media screen and (max-width: 1199px) {
543 .blockspare-notice-setup .bs-welcome-panel-header-logo {
544 font-size: 18px;
545 }
546 .blockspare-notice-setup .blockspare-notice-title {
547 font-size: 40px;
548 }
549
550 .blockspare-notice-setup .blockspare-notice-description {
551 font-size: 18px;
552 }
553 .blockspare-notice .bs-notice-image {
554 display: none;
555 }
556 }
557
558
559 @media screen and (max-width: 782px) {
560 .blockspare-notice-setup .bs-welcome-panel-column-container {
561 flex-wrap: wrap;
562 padding: 32px;
563 }
564 .blockspare-notice-setup .blockspare-notice-info {
565 padding: 32px;
566 }
567
568 .blockspare-notice-setup .bs-welcome-panel-header-image {
569 padding: 0 32px;
570 }
571 .blockspare-notice-setup .bs-welcome-panel-header-logo {
572 font-size: 16px;
573 }
574 .blockspare-notice-setup .blockspare-notice-title {
575 font-size: 32px;
576 }
577
578 .blockspare-notice-setup .blockspare-notice-description {
579 font-size: 16px;
580 }
581 .blockspare-notice-setup .bs-welcome-panel-column {
582 max-width: 100%;
583 }
584 }
585
586
587 .blockspare-notice .button-primary {
588 background-color: #8b249c;
589 border-color: #8b249c;
590 }
591 .blockspare-notice .button-primary:hover {
592 background-color: #3B1A5B;
593 border-color: #3B1A5B;
594 }
595 .blockspare-notice .button-secondary {
596 color: #8b249c;
597 border-color: #8b249c;
598 }
599
600 .blockspare-notice .button-secondary:hover {
601 color: #3B1A5B;
602 border-color: #3B1A5B;
603 }
604
605 .blockspare-pro-link {
606 color: #8b249c;
607 font-weight: bold;
608 }
609 .blockspare-pro-link:hover,
610 .blockspare-pro-link:focus {
611 color: #8b249c;
612 }