PluginProbe
Block Manager / 1.1
Block Manager v1.1
trunk 1.0 1.0.1 1.1 1.2 1.2.1 1.2.2 1.2.3c 1.2.4 1.2.5 2.0.0 2.1.0 2.1.0.1 2.1.1 3.0.0 3.1.0 3.1.1 3.1.2 3.2.0 3.2.1
block-manager / dist / css / style.css

style.css in Block Manager 1.1, at dist/css/style.css

829 lines 16.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .settings_page_gutenberg-block-manager #wpbody-content {
2 background-color: #f1f1f1;
3 }
4
5 .gbm *,
6 .gbm *:before,
7 .gbm *:after {
8 -webkit-box-sizing: border-box;
9 box-sizing: border-box;
10 }
11
12 .gbm button[type="button"] {
13 cursor: pointer;
14 }
15
16 .gbm-block-list-wrapper {
17 padding: 0 20px;
18 width: 100%;
19 max-width: 1800px;
20 }
21
22 @media screen and (min-width: 600px) {
23 .gbm-block-list-wrapper {
24 display: -webkit-box;
25 display: -webkit-flex;
26 display: -ms-flexbox;
27 display: flex;
28 -webkit-box-orient: horizontal;
29 -webkit-box-direction: reverse;
30 -webkit-flex-direction: row-reverse;
31 -ms-flex-direction: row-reverse;
32 flex-direction: row-reverse;
33 }
34 }
35
36 .gbm-block-list-wrapper .global-loader.loading {
37 background: url(../img/ajax-loader.gif) no-repeat 2px 26px;
38 padding: 25px 0 25px 26px;
39 display: block;
40 }
41
42 .gbm-block-list-wrapper.loaded .global-loader.loading {
43 display: none;
44 }
45
46 .gbm-block-list-wrapper .gbm-block-group {
47 margin: 15px 0 0;
48 background: #fff;
49 border: 1px solid #ccd0d4;
50 -webkit-border-radius: 4px;
51 border-radius: 4px;
52 }
53
54 .gbm-block-list-wrapper .gbm-nav {
55 width: 100%;
56 padding: 20px 0 0 0;
57 position: relative;
58 -webkit-transition: all 0.15s ease;
59 -o-transition: all 0.15s ease;
60 transition: all 0.15s ease;
61 }
62
63 @media screen and (min-width: 600px) {
64 .gbm-block-list-wrapper .gbm-nav {
65 width: 200px;
66 }
67 }
68
69 @media screen and (min-width: 768px) {
70 .gbm-block-list-wrapper .gbm-nav {
71 width: 220px;
72 }
73 }
74
75 .gbm-block-list-wrapper .gbm-nav-wrap {
76 padding-bottom: 5px;
77 }
78
79 .gbm-block-list-wrapper .gbm-nav-wrap button {
80 background: none;
81 border: none;
82 outline: none;
83 text-align: left;
84 padding: 0 0 5px;
85 margin: 0 0 5px;
86 width: 100%;
87 display: block;
88 font-size: 13px;
89 }
90
91 .gbm-block-list-wrapper .gbm-nav-wrap button:hover, .gbm-block-list-wrapper .gbm-nav-wrap button:focus {
92 text-decoration: underline;
93 color: #80629e;
94 }
95
96 .gbm-block-list-wrapper .gbm-nav #gbm-sticky {
97 padding: 16px 15px 15px;
98 background: #fff;
99 border: 1px solid #ccd0d4;
100 -webkit-border-radius: 4px;
101 border-radius: 4px;
102 }
103
104 .gbm-block-list-wrapper .gbm-blocks {
105 -webkit-box-flex: 1;
106 -webkit-flex: 1;
107 -ms-flex: 1;
108 flex: 1;
109 }
110
111 @media screen and (min-width: 600px) {
112 .gbm-block-list-wrapper .gbm-blocks {
113 padding-right: 20px;
114 }
115 }
116
117 .gbm-block-list-wrapper .gbm-blocks button.item {
118 width: 100%;
119 }
120
121 @media screen and (min-width: 600px) {
122 .gbm-block-list-wrapper .gbm-blocks button.item {
123 width: 100%;
124 margin: 0 0 10px;
125 }
126 }
127
128 @media screen and (min-width: 800px) {
129 .gbm-block-list-wrapper .gbm-blocks button.item {
130 margin: 0 5px 10px;
131 width: calc(50% - 10px);
132 }
133 }
134
135 @media screen and (min-width: 1024px) {
136 .gbm-block-list-wrapper .gbm-blocks button.item {
137 width: calc(33.333% - 10px);
138 }
139 }
140
141 @media screen and (min-width: 1300px) {
142 .gbm-block-list-wrapper .gbm-blocks button.item {
143 width: calc(25% - 10px);
144 }
145 }
146
147 @media screen and (min-width: 1700px) {
148 .gbm-block-list-wrapper .gbm-blocks button.item {
149 width: calc(20% - 10px);
150 }
151 }
152
153 .gbm-block-list-wrapper .gbm-blocks.gbm-view-list button.item {
154 width: calc(100% - 10px) !important;
155 margin: 0 5px 10px !important;
156 padding: 15px;
157 }
158
159 .gbm-block-list-wrapper .gbm-blocks.gbm-view-list button.item .gbm-block-switch {
160 left: auto;
161 bottom: auto;
162 right: 15px;
163 top: 15px;
164 }
165
166 .gbm-block-list-wrapper .gbm-search {
167 display: block;
168 width: 100%;
169 position: relative;
170 padding: 0;
171 }
172
173 .gbm-block-list-wrapper .gbm-search input {
174 -webkit-border-radius: 4px;
175 border-radius: 4px;
176 width: 100%;
177 margin: 0;
178 padding: 0 5px;
179 border-color: #ccd0d4;
180 background-color: #f7f7f7;
181 height: 32px;
182 font-size: 13px;
183 }
184
185 .gbm-block-list-wrapper .gbm-search button {
186 font-size: 14px;
187 margin: 0;
188 padding: 0 5px;
189 background: transparent;
190 color: #ccd0d4;
191 border: none;
192 -webkit-border-radius: 0;
193 border-radius: 0;
194 height: 32px;
195 font-size: 13px;
196 position: absolute;
197 top: 50%;
198 -webkit-transform: translateY(-50%);
199 -ms-transform: translateY(-50%);
200 transform: translateY(-50%);
201 right: 0;
202 }
203
204 .gbm-block-list-wrapper .gbm-search button:focus, .gbm-block-list-wrapper .gbm-search button:hover {
205 color: #80629e;
206 }
207
208 .gbm-code-export {
209 position: fixed;
210 left: 0;
211 top: 0;
212 right: 0;
213 bottom: 0;
214 background-color: rgba(255, 255, 255, 0.85);
215 z-index: 99999;
216 display: -webkit-box;
217 display: -webkit-flex;
218 display: -ms-flexbox;
219 display: flex;
220 -webkit-box-align: center;
221 -webkit-align-items: center;
222 -ms-flex-align: center;
223 align-items: center;
224 -webkit-box-pack: center;
225 -webkit-justify-content: center;
226 -ms-flex-pack: center;
227 justify-content: center;
228 width: 100%;
229 opacity: 0;
230 visibility: hidden;
231 -webkit-transition: all 0.35s ease-in-out 0.1s;
232 -o-transition: all 0.35s ease-in-out 0.1s;
233 transition: all 0.35s ease-in-out 0.1s;
234 -webkit-transform: scale(1.1);
235 -ms-transform: scale(1.1);
236 transform: scale(1.1);
237 }
238
239 .gbm-code-export.active {
240 opacity: 1;
241 visibility: visible;
242 -webkit-transform: scale(1);
243 -ms-transform: scale(1);
244 transform: scale(1);
245 }
246
247 .gbm-code-export--inner {
248 max-width: 680px;
249 margin: 0 auto;
250 padding: 20px;
251 background-color: #fff;
252 -webkit-border-radius: 10px;
253 border-radius: 10px;
254 border: 1px solid #ccd0d4;
255 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
256 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
257 }
258
259 .gbm-code-export--inner > div {
260 display: -webkit-box;
261 display: -webkit-flex;
262 display: -ms-flexbox;
263 display: flex;
264 width: 100%;
265 padding: 0 0 10px 5px;
266 -webkit-box-pack: justify;
267 -webkit-justify-content: space-between;
268 -ms-flex-pack: justify;
269 justify-content: space-between;
270 -webkit-box-align: center;
271 -webkit-align-items: center;
272 -ms-flex-align: center;
273 align-items: center;
274 }
275
276 .gbm-code-export--inner button {
277 margin-left: 5px !important;
278 -webkit-border-radius: 4px;
279 border-radius: 4px;
280 }
281
282 .gbm-code-export--inner p {
283 margin: 0;
284 padding: 0;
285 max-width: 60%;
286 }
287
288 .gbm-code-export code {
289 display: block;
290 padding: 20px;
291 word-break: break-word;
292 font-size: 11px;
293 -webkit-border-radius: 4px;
294 border-radius: 4px;
295 font-family: "consolas", Monaco, monospace;
296 border: 1px solid #ccd0d4;
297 max-height: 300px;
298 overflow: hidden;
299 overflow-y: auto;
300 -webkit-overflow-scrolling: touch;
301 }
302
303 .gbm-options {
304 padding: 15px 0 0;
305 display: -webkit-box;
306 display: -webkit-flex;
307 display: -ms-flexbox;
308 display: flex;
309 width: 100%;
310 }
311
312 .gbm-options button {
313 -webkit-border-radius: 4px;
314 border-radius: 4px;
315 border: 1px solid #ccd0d4;
316 background-color: #fff;
317 margin: 0;
318 padding: 8px 10px;
319 display: -webkit-box;
320 display: -webkit-flex;
321 display: -ms-flexbox;
322 display: flex;
323 -webkit-box-align: center;
324 -webkit-align-items: center;
325 -ms-flex-align: center;
326 align-items: center;
327 font-size: 12px;
328 line-height: 1;
329 color: #777;
330 }
331
332 .gbm-options button:hover, .gbm-options button:focus {
333 color: #222;
334 border-color: #999ea2;
335 }
336
337 .gbm-options button span {
338 margin-right: 5px;
339 opacity: 0.75;
340 }
341
342 .gbm-options button span,
343 .gbm-options button span:before {
344 height: 15px;
345 width: 15px;
346 font-size: 15px;
347 }
348
349 .gbm-options button.active {
350 background-color: #999ea2;
351 border-color: #999ea2;
352 color: #fff;
353 cursor: default;
354 -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
355 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
356 font-weight: 500;
357 }
358
359 .gbm-options button.active span {
360 opacity: 1;
361 }
362
363 .gbm-options button.export {
364 margin-left: auto;
365 }
366
367 .gbm-options--view {
368 display: -webkit-box;
369 display: -webkit-flex;
370 display: -ms-flexbox;
371 display: flex;
372 }
373
374 .gbm-options--view button {
375 -webkit-border-radius: 0 4px 4px 0;
376 border-radius: 0 4px 4px 0;
377 }
378
379 .gbm-options--view button:first-of-type {
380 border-right: none;
381 -webkit-border-radius: 4px 0 0 4px;
382 border-radius: 4px 0 0 4px;
383 }
384
385 .gbm-options--view button:last-of-type {
386 border-left: none;
387 }
388
389 .gbm-block-list {
390 width: 100%;
391 width: 100%;
392 display: -webkit-box;
393 display: -webkit-flex;
394 display: -ms-flexbox;
395 display: flex;
396 -webkit-flex-wrap: wrap;
397 -ms-flex-wrap: wrap;
398 flex-wrap: wrap;
399 position: relative;
400 padding: 10px 10px 0px;
401 text-align: left;
402 }
403
404 @media screen and (min-width: 600px) {
405 .gbm-block-list {
406 padding: 10px 5px 0px;
407 }
408 }
409
410 .gbm-block-list.loading .loader {
411 opacity: 0.5;
412 visibility: visible;
413 }
414
415 .gbm-block-list .loader {
416 position: absolute;
417 left: 0;
418 top: 0;
419 width: 100%;
420 height: 100%;
421 background-color: #fff;
422 z-index: 9999;
423 -webkit-transition: all 0.15s ease;
424 -o-transition: all 0.15s ease;
425 transition: all 0.15s ease;
426 visibility: hidden;
427 opacity: 0;
428 cursor: default;
429 }
430
431 .gbm-block-list .item {
432 padding: 15px 15px 45px;
433 border: 1px solid #ccd0d4;
434 background-color: #f7f7f7;
435 background-position: right 15px bottom 15px;
436 -webkit-border-radius: 4px;
437 border-radius: 4px;
438 cursor: pointer;
439 position: relative;
440 -webkit-transition: all 0.15s ease;
441 -o-transition: all 0.15s ease;
442 transition: all 0.15s ease;
443 text-shadow: 0 1px 1px #fff;
444 margin: 0 0 10px;
445 display: -webkit-box;
446 display: -webkit-flex;
447 display: -ms-flexbox;
448 display: flex;
449 -webkit-box-align: start;
450 -webkit-align-items: flex-start;
451 -ms-flex-align: start;
452 align-items: flex-start;
453 -webkit-box-orient: vertical;
454 -webkit-box-direction: normal;
455 -webkit-flex-direction: column;
456 -ms-flex-direction: column;
457 flex-direction: column;
458 position: relative;
459 }
460
461 .gbm-block-list .item:hover, .gbm-block-list .item:focus {
462 border-color: #999ea2;
463 }
464
465 .gbm-block-list .item:hover.disabled .gbm-block-switch--wrap, .gbm-block-list .item:focus.disabled .gbm-block-switch--wrap {
466 background-color: #999;
467 }
468
469 .gbm-block-list .item:hover .block-info--title, .gbm-block-list .item:focus .block-info--title {
470 text-decoration: underline;
471 }
472
473 .gbm-block-list .item.disabled {
474 background-color: rgba(255, 255, 255, 0.25);
475 border-color: #e1e1e1;
476 }
477
478 .gbm-block-list .item.disabled .gbm-block-switch--wrap {
479 background-color: #ccc;
480 }
481
482 .gbm-block-list .item.disabled .gbm-block-switch span {
483 margin-left: 2px;
484 }
485
486 .gbm-block-list .item.disabled .icon {
487 opacity: 0.35;
488 }
489
490 .gbm-block-list .item.disabled:hover, .gbm-block-list .item.disabled:focus {
491 border-color: #999;
492 }
493
494 .gbm-block-list .item.filtered {
495 background-color: rgba(255, 255, 255, 0.5);
496 border-color: #efefef;
497 cursor: not-allowed;
498 text-decoration: none;
499 opacity: 0.65;
500 }
501
502 .gbm-block-list .item.filtered:hover, .gbm-block-list .item.filtered:focus {
503 border-color: #efefef;
504 }
505
506 .gbm-block-list .item.filtered:hover .block-info--title, .gbm-block-list .item.filtered:focus .block-info--title {
507 text-decoration: none;
508 }
509
510 .gbm-block-list .item.loading {
511 background: #fff url(../img/ajax-loader.gif) no-repeat right 15px bottom 15px;
512 }
513
514 .gbm-block-list .item.loading > .gbm-block-group {
515 opacity: 0.65;
516 }
517
518 .gbm-block-list .item--wrap {
519 display: -webkit-box;
520 display: -webkit-flex;
521 display: -ms-flexbox;
522 display: flex;
523 -webkit-box-align: start;
524 -webkit-align-items: flex-start;
525 -ms-flex-align: start;
526 align-items: flex-start;
527 -webkit-box-orient: vertical;
528 -webkit-box-direction: normal;
529 -webkit-flex-direction: column;
530 -ms-flex-direction: column;
531 flex-direction: column;
532 -webkit-flex-wrap: nowrap;
533 -ms-flex-wrap: nowrap;
534 flex-wrap: nowrap;
535 width: 100%;
536 position: relative;
537 padding-left: 40px;
538 }
539
540 .gbm-block-list .item--wrap .block-info {
541 display: block;
542 width: 100%;
543 height: auto;
544 line-height: 1.4;
545 }
546
547 .gbm-block-list .item--wrap .block-info--wrap {
548 -webkit-box-flex: 1;
549 -webkit-flex: 1;
550 -ms-flex: 1;
551 flex: 1;
552 text-align: left;
553 }
554
555 .gbm-block-list .item--wrap .block-info--title {
556 font-weight: 600;
557 margin-bottom: 10px;
558 font-size: 14px;
559 line-height: 18px;
560 text-transform: capitalize;
561 }
562
563 .gbm-block-list .item--wrap .block-info--desc {
564 opacity: 0.75;
565 width: 100%;
566 display: -webkit-box;
567 -webkit-line-clamp: 3;
568 -webkit-box-orient: vertical;
569 overflow: hidden;
570 }
571
572 .gbm-block-list .item--wrap .block-info--id {
573 padding-top: 10px;
574 font-size: 11px;
575 font-family: "consolas", Monaco, monospace;
576 display: none;
577 }
578
579 .gbm-block-list .item[data-category="woocommerce"] div.icon {
580 color: #96588a;
581 opacity: 1;
582 }
583
584 .gbm-block-list .item[data-category="woocommerce"] div.icon svg {
585 fill: currentColor;
586 }
587
588 .gbm-block-list .item span.dashicons {
589 font-size: 23px;
590 }
591
592 .gbm-block-list .item div.icon {
593 width: 24px;
594 opacity: 0.65;
595 display: block;
596 margin: 0 0 8px;
597 text-align: left;
598 position: absolute;
599 left: 0;
600 top: 0;
601 -webkit-transition: all 0.15s ease;
602 -o-transition: all 0.15s ease;
603 transition: all 0.15s ease;
604 }
605
606 .gbm-block-list .gbm-block-switch {
607 position: absolute;
608 left: 13px;
609 bottom: 15px;
610 }
611
612 .gbm-block-list-controls {
613 display: -webkit-box;
614 display: -webkit-flex;
615 display: -ms-flexbox;
616 display: flex;
617 width: 100%;
618 -webkit-box-align: center;
619 -webkit-align-items: center;
620 -ms-flex-align: center;
621 align-items: center;
622 -webkit-flex-wrap: nowrap;
623 -ms-flex-wrap: nowrap;
624 flex-wrap: nowrap;
625 margin: 0;
626 padding: 8px 10px 8px 11px;
627 border-bottom: 1px solid #ccd0d4;
628 }
629
630 .gbm-block-list-controls.no-border {
631 border: none;
632 }
633
634 .gbm-block-list-controls h3 {
635 -webkit-box-flex: 1;
636 -webkit-flex: 1;
637 -ms-flex: 1;
638 flex: 1;
639 text-transform: uppercase;
640 padding: 0;
641 margin: 0;
642 font-size: 13px;
643 font-weight: 700;
644 }
645
646 .gbm-block-list-controls h3 span {
647 font-weight: 400;
648 opacity: 0.5;
649 font-size: 12px;
650 position: relative;
651 left: 2px;
652 }
653
654 .gbm-block-list-controls .gbm-block-switch {
655 position: relative;
656 top: -1px;
657 width: 30px;
658 height: 30px;
659 }
660
661 .gbm-block-switch {
662 cursor: pointer;
663 height: 9px;
664 width: 22px;
665 padding: 0;
666 margin: 0;
667 -webkit-box-shadow: none;
668 box-shadow: none;
669 border: none;
670 background-color: transparent;
671 }
672
673 .gbm-block-switch--wrap {
674 position: relative;
675 height: 13px;
676 width: 26px;
677 background-color: #56c338;
678 -webkit-border-radius: 100px;
679 border-radius: 100px;
680 -webkit-transition: all 0.15s ease;
681 -o-transition: all 0.15s ease;
682 transition: all 0.15s ease;
683 }
684
685 .gbm-block-switch span {
686 -webkit-border-radius: 100px;
687 border-radius: 100px;
688 width: 9px;
689 height: 9px;
690 background-color: #fff;
691 display: block;
692 -webkit-transition: all 0.15s ease;
693 -o-transition: all 0.15s ease;
694 transition: all 0.15s ease;
695 margin-left: 15px;
696 position: relative;
697 top: 2px;
698 }
699
700 .gbm-block-switch.disabled .gbm-block-switch--wrap {
701 background-color: #ccc;
702 }
703
704 .gbm-block-switch.disabled span {
705 margin-left: 2px;
706 }
707
708 .gbm .offscreen {
709 position: absolute !important;
710 top: -9999px !important;
711 left: -9999px !important;
712 }
713
714 .gbm-page-wrap--header {
715 background: #fff url(../img/icon.png) no-repeat 20px 20px;
716 -webkit-background-size: 48px 48px;
717 background-size: 48px 48px;
718 padding: 23px 20px 20px 78px;
719 border-bottom: 1px solid #ccd0d4;
720 position: relative;
721 }
722
723 @media screen and (min-width: 768px) {
724 .gbm-page-wrap--header {
725 padding-right: 200px;
726 }
727 }
728
729 .gbm-page-wrap--header h2 {
730 margin: 0 0 3px;
731 padding: 0;
732 }
733
734 .gbm-page-wrap--header h2 span {
735 font-size: 12px;
736 position: relative;
737 top: -1px;
738 left: 1px;
739 }
740
741 .gbm-page-wrap--header p {
742 padding: 0;
743 margin: 0;
744 }
745
746 .gbm-page-wrap--header p span.block-total {
747 display: inline-block;
748 background: #f7f7f7;
749 padding: 1px 4px;
750 -webkit-border-radius: 4px;
751 border-radius: 4px;
752 border: 1px solid #efefef;
753 font-weight: 600;
754 }
755
756 .gbm-page-wrap--header button.button {
757 margin-top: 10px;
758 display: -webkit-box;
759 display: -webkit-flex;
760 display: -ms-flexbox;
761 display: flex;
762 -webkit-box-align: center;
763 -webkit-align-items: center;
764 -ms-flex-align: center;
765 align-items: center;
766 }
767
768 @media screen and (min-width: 768px) {
769 .gbm-page-wrap--header button.button {
770 margin-top: 0;
771 position: absolute;
772 right: 20px;
773 top: 50%;
774 -webkit-transform: translateY(-50%);
775 -ms-transform: translateY(-50%);
776 transform: translateY(-50%);
777 }
778 }
779
780 .gbm-page-wrap--header button.button span {
781 position: relative;
782 left: -2px;
783 }
784
785 #gbm-sticky.attached {
786 position: fixed;
787 width: auto;
788 top: 70px;
789 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
790 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
791 }
792
793 .settings_page_gutenberg-block-manager #wpcontent {
794 padding-left: 0;
795 }
796
797 .settings_page_gutenberg-block-manager #gbm-container {
798 padding: 0;
799 position: relative;
800 }
801
802 #gbm-other-plugins {
803 background: #f7f7f7;
804 padding: 20px 20px 0;
805 border-bottom: 1px solid #ccd0d4;
806 display: none;
807 }
808
809 #gbm-other-plugins h2 {
810 padding: 0;
811 margin: 0;
812 }
813
814 #gbm-other-plugins section {
815 max-width: 1800px;
816 position: relative;
817 }
818
819 #gbm-other-plugins section > h2 {
820 margin: 0 0 20px;
821 }
822
823 #gbm-other-plugins section > button {
824 position: absolute;
825 right: 0;
826 top: -8px;
827 }
828
829 /*# sourceMappingURL=style.css.map*/