PluginProbe
Block Manager / 1.0.1
Block Manager v1.0.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.0.1, at dist/css/style.css

591 lines 11.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .gbm *,
2 .gbm *:before,
3 .gbm *:after {
4 -webkit-box-sizing: border-box;
5 box-sizing: border-box;
6 }
7
8 .gbm button[type="button"] {
9 cursor: pointer;
10 }
11
12 .gbm-block-list-wrapper {
13 padding: 0 20px;
14 width: 100%;
15 max-width: 1800px;
16 }
17
18 @media screen and (min-width: 600px) {
19 .gbm-block-list-wrapper {
20 display: -webkit-box;
21 display: -webkit-flex;
22 display: -ms-flexbox;
23 display: flex;
24 -webkit-box-orient: horizontal;
25 -webkit-box-direction: reverse;
26 -webkit-flex-direction: row-reverse;
27 -ms-flex-direction: row-reverse;
28 flex-direction: row-reverse;
29 }
30 }
31
32 .gbm-block-list-wrapper .global-loader.loading {
33 background: url(../img/ajax-loader.gif) no-repeat 2px 26px;
34 padding: 25px 0 25px 26px;
35 display: block;
36 }
37
38 .gbm-block-list-wrapper.loaded .global-loader.loading {
39 display: none;
40 }
41
42 .gbm-block-list-wrapper .gbm-block-group {
43 margin: 20px 0 0;
44 background: #fff;
45 border: 1px solid #ccd0d4;
46 -webkit-border-radius: 3px;
47 border-radius: 3px;
48 }
49
50 .gbm-block-list-wrapper .gbm-nav {
51 width: 100%;
52 padding: 20px 0 0 0;
53 position: relative;
54 -webkit-transition: all 0.15s ease;
55 -o-transition: all 0.15s ease;
56 transition: all 0.15s ease;
57 }
58
59 @media screen and (min-width: 600px) {
60 .gbm-block-list-wrapper .gbm-nav {
61 width: 200px;
62 }
63 }
64
65 @media screen and (min-width: 768px) {
66 .gbm-block-list-wrapper .gbm-nav {
67 width: 220px;
68 }
69 }
70
71 .gbm-block-list-wrapper .gbm-nav-wrap {
72 padding-bottom: 5px;
73 }
74
75 .gbm-block-list-wrapper .gbm-nav-wrap button {
76 background: none;
77 border: none;
78 outline: none;
79 text-align: left;
80 padding: 0 0 5px;
81 margin: 0 0 5px;
82 width: 100%;
83 display: block;
84 font-size: 13px;
85 }
86
87 .gbm-block-list-wrapper .gbm-nav-wrap button:hover, .gbm-block-list-wrapper .gbm-nav-wrap button:focus {
88 text-decoration: underline;
89 color: #80629e;
90 }
91
92 .gbm-block-list-wrapper .gbm-nav #gbm-sticky {
93 padding: 16px 15px 15px;
94 background: #fff;
95 border: 1px solid #ccd0d4;
96 -webkit-border-radius: 3px;
97 border-radius: 3px;
98 }
99
100 .gbm-block-list-wrapper .gbm-blocks {
101 -webkit-box-flex: 1;
102 -webkit-flex: 1;
103 -ms-flex: 1;
104 flex: 1;
105 }
106
107 @media screen and (min-width: 600px) {
108 .gbm-block-list-wrapper .gbm-blocks {
109 padding-right: 20px;
110 }
111 }
112
113 .gbm-block-list-wrapper .gbm-search {
114 display: block;
115 width: 100%;
116 position: relative;
117 padding: 0;
118 }
119
120 .gbm-block-list-wrapper .gbm-search input {
121 -webkit-border-radius: 3px;
122 border-radius: 3px;
123 width: 100%;
124 margin: 0;
125 padding: 0 5px;
126 border-color: #ccd0d4;
127 height: 32px;
128 font-size: 13px;
129 }
130
131 .gbm-block-list-wrapper .gbm-search button {
132 font-size: 14px;
133 margin: 0;
134 padding: 0 5px;
135 background: transparent;
136 color: #ccd0d4;
137 border: none;
138 -webkit-border-radius: 0;
139 border-radius: 0;
140 height: 32px;
141 font-size: 13px;
142 position: absolute;
143 top: 50%;
144 -webkit-transform: translateY(-50%);
145 -ms-transform: translateY(-50%);
146 transform: translateY(-50%);
147 right: 0;
148 }
149
150 .gbm-block-list-wrapper .gbm-search button:focus, .gbm-block-list-wrapper .gbm-search button:hover {
151 color: #80629e;
152 }
153
154 .gbm-block-list {
155 width: 100%;
156 width: 100%;
157 display: -webkit-box;
158 display: -webkit-flex;
159 display: -ms-flexbox;
160 display: flex;
161 -webkit-flex-wrap: wrap;
162 -ms-flex-wrap: wrap;
163 flex-wrap: wrap;
164 position: relative;
165 padding: 10px 10px 0px;
166 text-align: left;
167 }
168
169 @media screen and (min-width: 600px) {
170 .gbm-block-list {
171 padding: 10px 5px 0px;
172 }
173 }
174
175 .gbm-block-list.loading .loader {
176 opacity: 0.5;
177 visibility: visible;
178 }
179
180 .gbm-block-list .loader {
181 position: absolute;
182 left: 0;
183 top: 0;
184 width: 100%;
185 height: 100%;
186 background-color: #fff;
187 z-index: 9999;
188 -webkit-transition: all 0.15s ease;
189 -o-transition: all 0.15s ease;
190 transition: all 0.15s ease;
191 visibility: hidden;
192 opacity: 0;
193 cursor: default;
194 }
195
196 .gbm-block-list .item {
197 padding: 15px 15px 45px;
198 border: 1px solid #ccd0d4;
199 background-color: #f7f7f7;
200 background-position: 96% 93%;
201 -webkit-border-radius: 3px;
202 border-radius: 3px;
203 cursor: pointer;
204 position: relative;
205 -webkit-transition: all 0.15s ease;
206 -o-transition: all 0.15s ease;
207 transition: all 0.15s ease;
208 text-shadow: 0 1px 1px #fff;
209 width: 100%;
210 margin: 0 0 10px;
211 display: -webkit-box;
212 display: -webkit-flex;
213 display: -ms-flexbox;
214 display: flex;
215 -webkit-box-align: start;
216 -webkit-align-items: flex-start;
217 -ms-flex-align: start;
218 align-items: flex-start;
219 -webkit-box-orient: vertical;
220 -webkit-box-direction: normal;
221 -webkit-flex-direction: column;
222 -ms-flex-direction: column;
223 flex-direction: column;
224 position: relative;
225 }
226
227 @media screen and (min-width: 600px) {
228 .gbm-block-list .item {
229 width: 100%;
230 margin: 0 0 10px;
231 }
232 }
233
234 @media screen and (min-width: 800px) {
235 .gbm-block-list .item {
236 margin: 0 5px 10px;
237 width: calc(50% - 10px);
238 }
239 }
240
241 @media screen and (min-width: 1024px) {
242 .gbm-block-list .item {
243 width: calc(33.333% - 10px);
244 }
245 }
246
247 @media screen and (min-width: 1300px) {
248 .gbm-block-list .item {
249 width: calc(25% - 10px);
250 }
251 }
252
253 @media screen and (min-width: 1700px) {
254 .gbm-block-list .item {
255 width: calc(20% - 10px);
256 }
257 }
258
259 .gbm-block-list .item:hover, .gbm-block-list .item:focus {
260 border-color: #999;
261 }
262
263 .gbm-block-list .item:hover.disabled .gbm-block-switch--wrap, .gbm-block-list .item:focus.disabled .gbm-block-switch--wrap {
264 background-color: #999;
265 }
266
267 .gbm-block-list .item:hover .block-info--title, .gbm-block-list .item:focus .block-info--title {
268 text-decoration: underline;
269 }
270
271 .gbm-block-list .item.disabled {
272 background-color: rgba(255, 255, 255, 0.25);
273 border-color: #e1e1e1;
274 }
275
276 .gbm-block-list .item.disabled .gbm-block-switch--wrap {
277 background-color: #ccc;
278 }
279
280 .gbm-block-list .item.disabled .gbm-block-switch span {
281 margin-left: 2px;
282 }
283
284 .gbm-block-list .item.disabled .icon {
285 opacity: 0.35;
286 }
287
288 .gbm-block-list .item.disabled:hover, .gbm-block-list .item.disabled:focus {
289 border-color: #999;
290 }
291
292 .gbm-block-list .item.loading {
293 background: #fff url(../img/ajax-loader.gif) no-repeat 96% 93%;
294 }
295
296 .gbm-block-list .item.loading > .gbm-block-group {
297 opacity: 0.65;
298 }
299
300 .gbm-block-list .item--wrap {
301 display: -webkit-box;
302 display: -webkit-flex;
303 display: -ms-flexbox;
304 display: flex;
305 -webkit-box-align: start;
306 -webkit-align-items: flex-start;
307 -ms-flex-align: start;
308 align-items: flex-start;
309 -webkit-box-orient: vertical;
310 -webkit-box-direction: normal;
311 -webkit-flex-direction: column;
312 -ms-flex-direction: column;
313 flex-direction: column;
314 -webkit-flex-wrap: nowrap;
315 -ms-flex-wrap: nowrap;
316 flex-wrap: nowrap;
317 width: 100%;
318 position: relative;
319 padding-left: 40px;
320 }
321
322 .gbm-block-list .item--wrap .block-info {
323 display: block;
324 width: 100%;
325 height: auto;
326 line-height: 1.4;
327 }
328
329 .gbm-block-list .item--wrap .block-info--wrap {
330 -webkit-box-flex: 1;
331 -webkit-flex: 1;
332 -ms-flex: 1;
333 flex: 1;
334 text-align: left;
335 }
336
337 .gbm-block-list .item--wrap .block-info--title {
338 font-weight: 600;
339 margin-bottom: 10px;
340 font-size: 15px;
341 line-height: 18px;
342 text-transform: capitalize;
343 }
344
345 .gbm-block-list .item--wrap .block-info--desc {
346 opacity: 0.6;
347 }
348
349 .gbm-block-list .item[data-category="woocommerce"] div.icon {
350 color: #96588a;
351 opacity: 1;
352 }
353
354 .gbm-block-list .item[data-category="woocommerce"] div.icon svg {
355 fill: currentColor;
356 }
357
358 .gbm-block-list .item span.dashicons {
359 font-size: 23px;
360 }
361
362 .gbm-block-list .item div.icon {
363 width: 24px;
364 opacity: 0.65;
365 display: block;
366 margin: 0 0 8px;
367 text-align: left;
368 position: absolute;
369 left: 0;
370 top: 0;
371 -webkit-transition: all 0.15s ease;
372 -o-transition: all 0.15s ease;
373 transition: all 0.15s ease;
374 }
375
376 .gbm-block-list .gbm-block-switch {
377 position: absolute;
378 left: 13px;
379 bottom: 15px;
380 }
381
382 .gbm-block-list-controls {
383 display: -webkit-box;
384 display: -webkit-flex;
385 display: -ms-flexbox;
386 display: flex;
387 width: 100%;
388 -webkit-box-align: center;
389 -webkit-align-items: center;
390 -ms-flex-align: center;
391 align-items: center;
392 -webkit-flex-wrap: nowrap;
393 -ms-flex-wrap: nowrap;
394 flex-wrap: nowrap;
395 margin: 0;
396 padding: 8px 10px 8px 11px;
397 border-bottom: 1px solid #ccd0d4;
398 }
399
400 .gbm-block-list-controls h3 {
401 -webkit-box-flex: 1;
402 -webkit-flex: 1;
403 -ms-flex: 1;
404 flex: 1;
405 text-transform: capitalize;
406 padding: 0;
407 margin: 0;
408 font-size: 14px;
409 font-weight: 700;
410 }
411
412 .gbm-block-list-controls h3 span {
413 font-weight: 400;
414 opacity: 0.5;
415 font-size: 12px;
416 position: relative;
417 left: 2px;
418 }
419
420 .gbm-block-list-controls .gbm-block-switch {
421 position: relative;
422 top: -1px;
423 width: 30px;
424 height: 30px;
425 }
426
427 .gbm-block-switch {
428 cursor: pointer;
429 height: 9px;
430 width: 22px;
431 padding: 0;
432 margin: 0;
433 -webkit-box-shadow: none;
434 box-shadow: none;
435 border: none;
436 background-color: transparent;
437 }
438
439 .gbm-block-switch--wrap {
440 position: relative;
441 height: 13px;
442 width: 26px;
443 background-color: #56c338;
444 -webkit-border-radius: 100px;
445 border-radius: 100px;
446 -webkit-transition: all 0.15s ease;
447 -o-transition: all 0.15s ease;
448 transition: all 0.15s ease;
449 }
450
451 .gbm-block-switch span {
452 -webkit-border-radius: 100px;
453 border-radius: 100px;
454 width: 9px;
455 height: 9px;
456 background-color: #fff;
457 display: block;
458 -webkit-transition: all 0.15s ease;
459 -o-transition: all 0.15s ease;
460 transition: all 0.15s ease;
461 margin-left: 15px;
462 position: relative;
463 top: 2px;
464 }
465
466 .gbm-block-switch.disabled .gbm-block-switch--wrap {
467 background-color: #ccc;
468 }
469
470 .gbm-block-switch.disabled span {
471 margin-left: 2px;
472 }
473
474 .gbm .offscreen {
475 position: absolute !important;
476 top: -9999px !important;
477 left: -9999px !important;
478 }
479
480 .gbm-page-wrap--header {
481 background: #fff url(../img/icon.png) no-repeat 20px 20px;
482 -webkit-background-size: 48px 48px;
483 background-size: 48px 48px;
484 padding: 23px 20px 20px 78px;
485 border-bottom: 1px solid #ccd0d4;
486 position: relative;
487 }
488
489 @media screen and (min-width: 768px) {
490 .gbm-page-wrap--header {
491 padding-right: 200px;
492 }
493 }
494
495 .gbm-page-wrap--header h2 {
496 margin: 0 0 3px;
497 padding: 0;
498 }
499
500 .gbm-page-wrap--header h2 span {
501 font-size: 12px;
502 position: relative;
503 top: -1px;
504 left: 1px;
505 }
506
507 .gbm-page-wrap--header p {
508 padding: 0;
509 margin: 0;
510 }
511
512 .gbm-page-wrap--header p span.block-total {
513 display: inline-block;
514 background: #f7f7f7;
515 padding: 1px 4px;
516 -webkit-border-radius: 3px;
517 border-radius: 3px;
518 border: 1px solid #efefef;
519 font-weight: 600;
520 }
521
522 .gbm-page-wrap--header button.button {
523 margin-top: 10px;
524 display: -webkit-box;
525 display: -webkit-flex;
526 display: -ms-flexbox;
527 display: flex;
528 -webkit-box-align: center;
529 -webkit-align-items: center;
530 -ms-flex-align: center;
531 align-items: center;
532 }
533
534 @media screen and (min-width: 768px) {
535 .gbm-page-wrap--header button.button {
536 margin-top: 0;
537 position: absolute;
538 right: 20px;
539 top: 50%;
540 -webkit-transform: translateY(-50%);
541 -ms-transform: translateY(-50%);
542 transform: translateY(-50%);
543 }
544 }
545
546 .gbm-page-wrap--header button.button span {
547 position: relative;
548 left: -2px;
549 }
550
551 #gbm-sticky.attached {
552 position: fixed;
553 width: auto;
554 top: 70px;
555 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
556 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
557 }
558
559 .settings_page_gutenberg-block-manager #wpcontent {
560 padding-left: 0;
561 }
562
563 .settings_page_gutenberg-block-manager #gbm-container {
564 padding: 0;
565 position: relative;
566 }
567
568 #gbm-other-plugins {
569 background: #f7f7f7;
570 padding: 20px 20px 0;
571 border-bottom: 1px solid #ccd0d4;
572 display: none;
573 }
574
575 #gbm-other-plugins h2 {
576 padding: 0 !important;
577 margin: 0 0 20px;
578 }
579
580 #gbm-other-plugins section {
581 max-width: 1800px;
582 position: relative;
583 }
584
585 #gbm-other-plugins section > button {
586 position: absolute;
587 right: 0;
588 top: -8px;
589 }
590
591 /*# sourceMappingURL=style.css.map*/