PluginProbe
BlockSpare – Gutenberg Blocks for News, Magazine, Blog & Business Websites / trunk
BlockSpare – Gutenberg Blocks for News, Magazine, Blog & Business Websites vtrunk
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 trunk, at admin/assets/css/style.css

611 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: #ce242c;
4 --blockspare-secondary-color: #141618;
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: 22px;
207 font-weight: 600;
208 line-height: 1.25;
209 }
210
211 .blockspare-notice-setup .blockspare-notice-description {
212 margin: 10px auto 24px;
213 line-height: 1.7;
214 max-width: 700px;
215 }
216 .blockspare-notice-setup .blockspare-notice-buttons{
217 display: flex;
218 flex-wrap: wrap;
219 gap: 12px;
220 align-items: center;
221 /* margin-bottom: 24px; */
222 justify-content: center;
223 }
224
225 .blockspare-notice-setup .blockspare-notice-button {
226 display: inline-flex;
227 align-items: center;
228 gap: 8px;
229 font-weight: 500;
230 font-size: 12px;
231 text-transform: uppercase;
232 padding: 6px 12px;
233 border-radius: 6px;
234 text-align: center;
235 text-decoration: none;
236 border: 1px solid transparent;
237 cursor: pointer;
238 white-space: nowrap;
239 }
240
241 .blockspare-notice-setup .blockspare-notice-button:focus {
242 box-shadow: none;
243 border: none;
244 }
245
246 .blockspare-notice-setup .blockspare-notice-button-primary{
247 background-color: var(--blockspare-primary-color);
248 border-color: var(--blockspare-primary-color);
249 color: #fff;
250 }
251
252
253 .blockspare-notice-setup .blockspare-notice-button-outline {
254 border-color: var(--blockspare-primary-color);
255 color: var(--blockspare-primary-color);
256 }
257
258
259 .blockspare-notice-setup .blockspare-notice-button-secondary {
260 border: 1px solid #ffffff;
261 color: #ffffff;
262 }
263
264
265 .blockspare-notice-setup .blockspare-notice-links{
266 display: flex;
267 flex-wrap: wrap;
268 gap: 16px;
269 }
270
271 .blockspare-notice-setup .blockspare-notice-link {
272 color: var(--blockspare-primary-color);
273 font-size: 12px;
274 /* text-decoration: none; */
275 transition: all .3s ease-in-out;
276 }
277
278 /* .blockspare-notice-setup .blockspare-notice-link:hover {
279 text-decoration: underline;
280 } */
281
282 .blockspare-notice-setup .bs-welcome-panel-column-container {
283 display: flex;
284 justify-content: center;
285 flex-direction: column;
286 width: 100%;
287 z-index: 1;
288 padding: 32px;
289 gap: 32px;
290 box-sizing: border-box;
291 background: #fff;
292 }
293
294 .blockspare-notice-setup .bs-welcome-panel-column {
295 width: 100%;
296 max-width: 460px;
297 display: grid;
298 grid-template-columns: min-content 1fr;
299 gap: 24px;
300 }
301
302 .blockspare-notice-setup .bs-welcome-panel-column-icon {
303 display: flex;
304 align-items: center;
305 justify-content: center;
306 width: 48px;
307 height: 48px;
308 background: var(--blockspare-primary-color); /* fallback for old browsers */
309 background: -webkit-linear-gradient(to bottom, var(--blockspare-primary-color), #000); /* Chrome 10-25, Safari 5.1-6 */
310 background: linear-gradient(to bottom, var(--blockspare-primary-color), #000);
311 border-radius: 50%;
312 }
313
314 .blockspare-notice-setup .bs-welcome-panel-column-icon svg {
315 fill: #fff;
316 }
317
318 .blockspare-notice-setup .bs-welcome-panel-column h3{
319 margin: 0;
320 font-size: 15px;
321 font-weight: 400;
322 line-height: 1.4;
323 }
324
325 .blockspare-notice-setup .bs-welcome-panel-column p{
326 font-size: 14px;
327 line-height: 1.7;
328 padding: 0;
329 }
330
331 .blockspare-notice-setup .blockspare-notice-dismiss {
332 z-index: 3;
333 text-decoration: none;
334 }
335
336 .blockspare-notice-setup .blockspare-notice-dismiss::before {
337 color: #fff;
338 }
339
340 .blockspare-notice-setup .blockspare-notice-dismiss:hover::before {
341 color: #D63638;
342 }
343
344 /* dashboard_widget_notice */
345
346 #blockspare_dashboard_widget_id .inside {
347 padding: 0;
348 margin: 0;
349 }
350
351 #blockspare_dashboard_widget_id .bs-welcome-panel-header{
352 padding: 12px;
353 display: flex;
354 align-items: center;
355 gap: 10px;
356 border-bottom: 1px solid #f0f0f1;
357 }
358
359 #blockspare_dashboard_widget_id .bs-welcome-panel-banner {
360 /* text-align: center; */
361 padding: 12px 12px 20px 12px;
362 background-image: url("../../../assets/banner.jpg");
363 background-position: center; /* Center the image */
364 background-repeat: no-repeat; /* Do not repeat the image */
365 background-size: cover;
366 position: relative;
367 }
368
369 #blockspare_dashboard_widget_id .bs-welcome-panel-banner::before {
370 content: '';
371 position: absolute;
372 left: 0;
373 top: 0;
374 width: 100%;
375 height: 100%;
376 background: rgba(59, 26, 91, 0.5);
377 z-index: 0;
378 }
379 #blockspare_dashboard_widget_id .bs-welcome-panel-banner h2
380 {
381 color: #ffffff;
382 font-size: 22px;
383 line-height: 1.5;
384 font-weight: 500;
385 position: relative;
386 z-index: 1;
387 }
388 #blockspare_dashboard_widget_id .bs-welcome-panel-banner h4{
389 color: #ffffff;
390 position: relative;
391 z-index: 1;
392 }
393
394 #blockspare_dashboard_widget_id .bs-welcome-panel-header-logo {
395 display: flex;
396 align-items: center;
397 justify-content: center;
398 width: 33px;
399 height: 33px;
400 border-radius: 50%;
401 background: var(--blockspare-primary-color); /* fallback for old browsers */
402 background: -webkit-linear-gradient(to right, var(--blockspare-primary-color), var(--blockspare-secondary-color)); /* Chrome 10-25, Safari 5.1-6 */
403 background: linear-gradient(to right, var(--blockspare-primary-color), var(--blockspare-secondary-color));
404 }
405
406 #blockspare_dashboard_widget_id .bs-welcome-panel-header-logo svg{
407 height: 18px;
408 width: 18px;
409 fill: #fff;
410 }
411
412 #blockspare_dashboard_widget_id .blockspare-version span{
413 color: var(--blockspare-primary-color);
414 }
415
416 #blockspare_dashboard_widget_id .bs-dashobard-button {
417 display: inline-flex;
418 align-items: center;
419 justify-content: center;
420 gap: 5px;
421 text-decoration: none;
422 font-size: 13px;
423 min-height: 30px;
424 padding: 0 10px;
425 cursor: pointer;
426 border: 1px solid transparent;
427 border-radius: 3px;
428 white-space: nowrap;
429 box-sizing: border-box;
430 color: var(--blockspare-primary-color);
431 border-color: var(--blockspare-primary-color);
432 background: rgba(140, 36, 156, 0.15);
433 transition: all .3s ease-in-out;
434 }
435
436 #blockspare_dashboard_widget_id .bs-dashobard-button:hover{
437 background: rgba(140, 36, 156, 0.2);;
438 border-color: var(--blockspare-secondary-color);
439 color: var(--blockspare-secondary-color);
440 }
441
442 #blockspare_dashboard_widget_id .bs-create-button {
443 margin-left: auto;
444 }
445
446 #blockspare_dashboard_widget_id .bs-welcome-panel-column-container {
447 display: flex;
448 flex-direction: column;
449 gap: 16px;
450 padding: 16px;
451 box-sizing: border-box;
452 }
453
454 #blockspare_dashboard_widget_id .bs-welcome-panel-column {
455 display: grid;
456 grid-template-columns: min-content 1fr;
457 gap: 16px;
458 }
459
460 #blockspare_dashboard_widget_id .bs-welcome-panel-column-content h3 {
461 margin: 0;
462 font-size: 14px;
463 font-weight: 600;
464 line-height: 1.4;
465 color: var(--blockspare-text-accent);
466 }
467
468 #blockspare_dashboard_widget_id .bs-welcome-panel-column-content p {
469 font-size: 14px;
470 font-weight: 400;
471 color: var(--blockspare-text-primary);
472 margin: 8px 0;
473 }
474
475 #blockspare_dashboard_widget_id .bs-welcome-panel-column-content a {
476 font-size: 14px;
477 font-weight: 400;
478 text-decoration: none;
479 color: var(--blockspare-primary-color);
480 transition: all .3s ease-in-out;
481 }
482
483 #blockspare_dashboard_widget_id .bs-welcome-panel-column-content a:hover {
484 color: var(--blockspare-secondary-color);
485 text-decoration: underline;
486 }
487
488 #blockspare_dashboard_widget_id .blockspare-dashboard-widget-footer {
489 border-top: 1px solid #f0f0f1;
490 padding: 12px;
491 }
492
493 #blockspare_dashboard_widget_id .blockspare-dashboard-widget-footer ul{
494 display: flex;
495 list-style: none;
496 margin: 0;
497 padding: 0;
498 }
499
500 #blockspare_dashboard_widget_id .blockspare-dashboard-widget-footer li{
501 padding: 0 10px;
502 margin: 0;
503 border-inline-start: 1px solid #ddd;
504 }
505
506 #blockspare_dashboard_widget_id .blockspare-dashboard-widget-footer li:first-child{
507 padding-inline-start: 0;
508 border: none;
509 }
510
511
512 /***************** Notice End ***********************/
513
514 @media screen and (max-width: 1800px) {
515 .blockspare-notice .blockspare-notice__content {
516 background: linear-gradient(
517 to right,
518 #fff 45%, transparent 100%
519 ) 5% / 100% 100% no-repeat;
520 }
521 }
522
523 @media screen and (max-width: 1400px) {
524 .blockspare-notice .blockspare-notice__content {
525 background: linear-gradient(
526 to right,
527 #fff 60%, transparent 100%
528 ) 50% / 100% 100% no-repeat;
529 }
530 }
531
532 @media screen and (max-width: 1180px) and (min-width: 783px) {
533 .blockspare-notice-setup .bs-welcome-panel-column {
534 grid-template-columns: 1fr;
535 }
536 .blockspare-notice-setup .bs-welcome-panel-column-icon {
537 display: none;
538 }
539 }
540
541 @media screen and (max-width: 1199px) {
542 .blockspare-notice-setup .bs-welcome-panel-header-logo {
543 font-size: 18px;
544 }
545 .blockspare-notice-setup .blockspare-notice-title {
546 font-size: 40px;
547 }
548
549 .blockspare-notice-setup .blockspare-notice-description {
550 font-size: 18px;
551 }
552 .blockspare-notice .bs-notice-image {
553 display: none;
554 }
555 }
556
557
558 @media screen and (max-width: 782px) {
559 .blockspare-notice-setup .bs-welcome-panel-column-container {
560 flex-wrap: wrap;
561 padding: 32px;
562 }
563 .blockspare-notice-setup .blockspare-notice-info {
564 padding: 32px;
565 }
566
567 .blockspare-notice-setup .bs-welcome-panel-header-image {
568 padding: 0 32px;
569 }
570 .blockspare-notice-setup .bs-welcome-panel-header-logo {
571 font-size: 16px;
572 }
573 .blockspare-notice-setup .blockspare-notice-title {
574 font-size: 32px;
575 }
576
577 .blockspare-notice-setup .blockspare-notice-description {
578 font-size: 16px;
579 }
580 .blockspare-notice-setup .bs-welcome-panel-column {
581 max-width: 100%;
582 }
583 }
584
585
586 .blockspare-notice .button-primary {
587 background-color: #ce242c;
588 border-color: #ce242c;
589 }
590 .blockspare-notice .button-primary:hover {
591 background-color: #141618;
592 border-color: #141618;
593 }
594 .blockspare-notice .button-secondary {
595 color: #ce242c;
596 border-color: #ce242c;
597 }
598
599 .blockspare-notice .button-secondary:hover {
600 color: #141618;
601 border-color: #141618;
602 }
603
604 .blockspare-pro-link {
605 color: #ce242c;
606 font-weight: bold;
607 }
608 .blockspare-pro-link:hover,
609 .blockspare-pro-link:focus {
610 color: #ce242c;
611 }