PluginProbe
Groups – Memberships and Access Control / 4.7.1
Groups – Memberships and Access Control v4.7.1
4.7.1 4.7.0 4.6.0 4.5.0 4.4.0 4.3.0 trunk 1.0.0-beta-1 1.0.0-beta-2 1.0.0-beta-3 1.0.0-beta-3b 1.0.0-beta-3c 1.0.0-beta-3d 1.1.4 1.1.5 1.10.0 1.10.1 1.10.2 1.10.3 1.11.0 1.11.1 1.11.2 1.11.3 1.12.0 1.13.0 All 131 releases
← All changes | css/groups_admin.css +384 -57 1.10.24.7.1 View file →
@@ -29,10 +29,12 @@
29 29 border: 1px solid #ddd;
30 30 }
31 31 .filters fieldset,
32 32 .manage fieldset {
33 - display: inline-block;
34 - clear: both;
33 + display: flex;
34 + justify-content: start;
35 + gap: 8px 12px;
36 + flex-wrap: wrap;
35 37 }
36 38 .filters legend {
37 39 padding: 0 0 2px 0;
38 40 }
@@ -37,9 +39,8 @@
37 39 padding: 0 0 2px 0;
38 40 }
39 41 .filters form label {
40 42 white-space: nowrap;
41 - margin-bottom: 0.62em;
42 43 }
43 44 .manage a.add {
44 45 text-decoration: none;
45 46 cursor: pointer;
@@ -84,21 +85,8 @@
84 85 div.group.remove input[type="submit"],
85 86 div.capability.remove input[type="submit"] {
86 87 margin-right: 1em;
87 88 }
88 -label.group-id-filter,
89 -label.group-name-filter,
90 -label.capability-id-filter,
91 -label.capability-filter,
92 -label.field-label {
93 - padding-right: 0.62em;
94 -}
95 -input.group-id-filter,
96 -input.group-name-filter,
97 -input.capability-id-filter,
98 -input.capability-filter {
99 - margin-right: 0.31em;
100 -}
101 89
102 90 div.group.new label,
103 91 div.group.edit label,
104 92 div.capability.new label,
@@ -105,15 +93,12 @@
105 93 div.capability.edit label {
106 94 display: block;
107 95 }
108 96
109 -
110 97 .groups-overview .page-options,
111 98 .capabilities-overview .page-options {
112 99 float: left;
113 100 display: inline;
114 - /*width: 250px;*/
115 - padding-bottom: 1em;
116 101 }
117 102 .groups-overview .page-options.right,
118 103 .capabilities-overview .page-options.right {
119 104 float: right;
@@ -128,16 +113,11 @@
128 113 vertical-align: middle;
129 114 }
130 115 .groups-overview .page-options input[type="text"],
131 116 .capabilities-overview .page-options input[type="text"] {
132 - width: 2.8em;
133 117 text-align: center;
134 118 }
135 -.groups-overview .tablenav.top,
136 -.capabilities-overview .tablenav.top {
137 - display: inline;
138 - width: 250px;
139 -}
119 +
140 120 .groups-overview th.check-column,
141 121 .capabilities-overview th.check-column {
142 122 padding: 10px 0 0 3px;
143 123 }
@@ -146,10 +126,13 @@
146 126 .groups-overview th.remove,
147 127 .capabilities-overview th.capability_id,
148 128 .capabilities-overview th.edit,
149 129 .capabilities-overview th.remove {
150 - width:10%;
130 + width: 10%;
151 131 }
132 +.groups-overview th.members {
133 + width: 10%;
134 +}
152 135
153 136 .groups-overview td.capabilities,
154 137 .capabilities-overview td.capability {
155 138 text-overflow: ellipsis;
@@ -204,44 +187,247 @@
204 187 position: relative;
205 188 float: right;
206 189 padding: 1em;
207 190 margin: 1em;
208 - background-color: #eee;
191 + background-color: #fff;
209 192 border-radius: 4px;
210 - color: #333;
211 - border: 1px solid #ddd;
193 + color: #111;
194 + border: 1px solid #999;
212 195 width: 256px;
213 196 }
197 +#groups-extensions-box h3 {
198 + margin: 0.62em 0;
199 +}
200 +#groups-extensions-box h3::after {
201 + content: "\f487";
202 + background: transparent;
203 + color: #f33;
204 + display: inline-block;
205 + font: normal 18px dashicons;
206 + vertical-align: middle;
207 + text-align: center;
208 + transform: rotate(21deg);
209 + position: relative;
210 + top: -4px;
211 + left: 4px;
212 +}
213 +#groups-extensions-box p {
214 + margin: 0.31em 0;
215 +}
214 216 #groups-extensions-box a.close {
215 - color: #ccc;
217 + color: #999;
216 218 line-height: 18px;
217 219 position: absolute;
218 - right: 6px;
220 + right: 4px;
219 221 text-decoration: none;
220 - top: 6px;
222 + top: 4px;
221 223 font-family: sans;
222 - font-size: 11px;
224 + font-size: 12px;
223 225 }
226 +#groups-extensions-box a.close::before {
227 + background: transparent;
228 + color: #ddd;
229 + content: "\f153";
230 + display: inline-block;
231 + font: normal 16px/20px dashicons;
232 + height: 20px;
233 + text-align: center;
234 + width: 20px;
235 + position: relative;
236 + top: 4px;
237 + right: 4px;
238 + transition: all .62s ease-in-out;
239 +}
240 +#groups-extensions-box a.close:hover::before {
241 + color: #f00;
242 +}
224 243
244 +.groups-bitcoin-box {
245 + padding: 1em;
246 + margin: 1em;
247 + background-color: #fff;
248 + border-radius: 4px;
249 + color: #111;
250 + border: 1px solid #999;
251 + width: 256px;
252 +}
253 +.groups-bitcoin-box.options {
254 + position: relative;
255 + float: right;
256 +}
257 +.groups-bitcoin-box-inside {
258 + display: flex;
259 + flex-direction: column;
260 + text-align: center;
261 +}
262 +
263 +.groups-bitcoin-box span {
264 + margin: 0.31em 0;
265 + flex-grow: 1;
266 + text-align: center;
267 +}
268 +.groups-bitcoin-box .groups-bitcoin-cta {
269 + font-weight: bold;
270 + padding-bottom: 16px;
271 +}
272 +.groups-bitcoin-box .groups-bitcoin-image img {
273 + width: 100%;
274 +}
275 +.groups-bitcoin-box.small .groups-bitcoin-image img {
276 + width: 128px;
277 +}
278 +.groups-bitcoin-box .groups-bitcoin-description {
279 + padding-top: 12px;
280 +}
281 +.groups-bitcoin-box .groups-bitcoin-description .groups-bitcoin-address {
282 + word-wrap: anywhere;
283 + vertical-align: middle;
284 + font-weight: bold;
285 +}
286 +.groups-bitcoin-box .groups-bitcoin-description .dashicons.dashicons-admin-page {
287 + opacity: 0.42;
288 + vertical-align: middle;
289 +}
290 +
291 +.groups-bitcoin-box.horizontal {
292 + flex: auto;
293 + max-width: 384px;
294 + min-width: 256px;
295 + width: auto;
296 + padding: 8px;
297 + margin: 8px;
298 +}
299 +.groups-bitcoin-box.horizontal .groups-bitcoin-box-inside {
300 + display: grid;
301 + grid-template-rows: 25% 75%;
302 + grid-template-columns: 35% 65%;
303 +}
304 +.groups-bitcoin-box.horizontal .groups-bitcoin-cta {
305 + grid-column-start: 2;
306 + grid-row-start: 1;
307 + padding: 4px;
308 +}
309 +.groups-bitcoin-box.horizontal .groups-bitcoin-image {
310 + grid-row-start: 1;
311 + grid-column-start: 1;
312 + grid-row-end: span 2;
313 +}
314 +.groups-bitcoin-box.horizontal .groups-bitcoin-image img {
315 + width: 128px;
316 +}
317 +.groups-bitcoin-box.horizontal .groups-bitcoin-description {
318 + grid-row-start: 2;
319 + grid-column-start: 2;
320 + padding: 4px;
321 +}
322 +
323 +.groups-bitcoin-box a.close {
324 + color: #999;
325 + line-height: 18px;
326 + position: absolute;
327 + right: 4px;
328 + text-decoration: none;
329 + top: 4px;
330 + font-family: sans;
331 + font-size: 12px;
332 +}
333 +.groups-bitcoin-box a.close::before {
334 + background: transparent;
335 + color: #ddd;
336 + content: "\f153";
337 + display: inline-block;
338 + font: normal 16px/20px dashicons;
339 + height: 20px;
340 + text-align: center;
341 + width: 20px;
342 + position: relative;
343 + top: 4px;
344 + right: 4px;
345 + transition: all .62s ease-in-out;
346 +}
347 +.groups-bitcoin-box a.close:hover::before {
348 + color: #f00;
349 +}
350 +
351 +#groups-extensions-support {
352 + padding: 1em;
353 + margin: 0 0 24px 0;
354 + background-color: #fff;
355 + border-radius: 4px;
356 + color: #111;
357 + border: 2px solid #7494d1;
358 + display: flex;
359 + flex-direction: row;
360 + flex-wrap: wrap;
361 + justify-content: space-around;
362 +}
363 +#groups-extensions-support p {
364 + font-size: 14px;
365 + color: #333;
366 +}
367 +#groups-extensions-support h2::after {
368 + content: "\f487";
369 + background: transparent;
370 + color: #f33;
371 + display: inline-block;
372 + font: normal 18px dashicons;
373 + vertical-align: middle;
374 + text-align: center;
375 + transform: rotate(21deg);
376 + position: relative;
377 + top: -4px;
378 + left: 4px;
379 +}
380 +#groups-extensions-support-inside {
381 + flex: 1;
382 + min-width: 256px;
383 +}
225 384 .groups-bulk-container {
226 - padding-bottom: 1em;
385 + display: flex;
386 + flex-wrap: wrap;
387 + gap: 8px;
388 + justify-content: start;
227 389 }
228 -.groups-bulk-container,
229 -.capabilities-bulk-container,
390 +
391 +.tablenav {
392 + clear: unset;
393 + display: flex;
394 + flex-direction: row;
395 + flex-wrap: wrap;
396 + justify-content: space-between;
397 + vertical-align: unset;
398 + height: unset;
399 + gap: 4px;
400 +}
401 +.tablenav.bottom {
402 + justify-content: center;
403 +}
230 404 .tablenav .tablenav-pages {
231 - line-height: 24px;
405 + display: flex;
406 + flex-direction: row;
407 + justify-content: center;
408 + flex-wrap: wrap;
409 + align-items: center;
410 + gap: 4px;
411 + margin: 0;
412 + float: unset;
232 413 }
233 -.groups-bulk-container .capabilities-select-container {
234 - width: 25%;
235 - float: left;
236 - vertical-align: middle;
414 +.tablenav .tablenav-pages .paging-input {
415 + display: flex;
416 + flex-direction: row;
417 + align-items: center;
418 + gap: 2px;
237 419 }
238 -.groups-bulk-container .selectize-control,
239 -.groups-bulk-container select.bulk-action,
240 -.capabilities-bulk-container select.bulk-action {
241 - margin-right: 4px;
242 - vertical-align: middle;
420 +
421 +.groups-bulk-container .groups-ts-wrapper {
422 + height: 100%;
423 + width: 100%;
243 424 }
425 +.groups-bulk-container .groups-ts-wrapper .groups-ts-control,
426 +.groups-bulk-container .groups-ts-wrapper .groups-ts-control input[type="text"] {
427 + height: 100%;
428 +}
429 +
244 430 .groups-bulk-container .selectize-input {
245 431 font-size: inherit;
246 432 line-height: 18px;
247 433 padding: 0 4px;
@@ -246,17 +432,23 @@
246 432 line-height: 18px;
247 433 padding: 0 4px;
248 434 vertical-align: middle;
249 435 }
250 -.groups-bulk-container .selectize-input input[type="text"] {
436 +.groups-bulk-container .selectize-input input[type="text"],
437 +.groups-bulk-container .selectize-input input[type="select-multiple"],
438 +.groups-groups-container .selectize-input input[type="select-multiple"] {
251 439 font-size: inherit;
252 440 vertical-align: middle;
253 441 height: 28px;
254 442 line-height: 28px;
255 443 }
444 +.groups-bulk-container select.bulk-action {
445 + margin-right: unset;
446 +}
256 447 .groups-bulk-container .button,
257 448 .capabilities-bulk-container .button {
258 449 vertical-align: middle;
450 + margin: 0;
259 451 }
260 452
261 453 .group.new .selectize-control,
262 454 .group.edit .selectize-control,
@@ -288,35 +480,86 @@
288 480 font-size: 16px;
289 481 }
290 482 }
291 483
292 -.groups-admin-add-ons ul {
484 +@media screen and (max-width: 782px) {
485 + /* do not force oversized margins */
486 + .groups-overview .tablenav.top,
487 + .capabilities-overview .tablenav.top,
488 + .groups-overview .tablenav .tablenav-pages,
489 + .capabilities-overview .tablenav .tablenav-pages {
490 + margin: 0 0 4px 0;
491 + }
492 + /* do not force width */
493 + .groups-overview .tablenav .tablenav-pages,
494 + .capabilities-overview .tablenav .tablenav-pages {
495 + width: auto;
496 + }
497 + /* do not hide actions */
498 + .groups-bulk-container .tablenav .view-switch, .tablenav.top .actions,
499 + .capabilities-bulk-container .tablenav .view-switch, .tablenav.top .actions {
500 + display: unset;
501 + }
502 + /* do not skew */
503 + .groups-overview .tablenav.top .page-options > *,
504 + .capabilities-overview .tablenav.top .page-options > * {
505 + margin-bottom: unset;
506 + }
507 +}
508 +
509 +.groups-admin-add-ons {
510 + margin: 24px 24px 0 2px;
511 +}
512 +.groups-admin-add-ons ul.add-ons {
293 513 list-style: none;
294 - display: block;
514 + display: flex;
515 + flex-wrap: wrap;
295 516 padding: 0;
296 517 overflow: hidden;
297 518 }
298 -.groups-admin-add-ons li {
299 - float: left;
519 +.groups-admin-add-ons ul.add-ons li.add-on {
300 520 margin: 0 1em 1em 0;
301 - padding: 8px;
521 + padding: 16px;
302 522 vertical-align: top;
303 523 width: 256px;
304 - height: 158px;
524 + min-height: 158px;
305 525 background-color: #fff;
306 526 border: 1px solid #ccc;
527 + border-radius: 3px;
528 + flex: 1 1 22%;
529 + max-width: 384px;
307 530 }
531 +.groups-admin-add-ons ul.woocommerce.add-ons li.add-on p {
532 + font-size: 15px;
533 +}
534 +.groups-admin-add-ons ul.woocommerce.add-ons li.add-on h3 {
535 + font-size: 18px;
536 + font-weight: 600;
537 +}
538 +.groups-admin-add-ons ul.groups.add-ons li.add-on,
539 +.groups-admin-add-ons ul.other.add-ons li.add-on {
540 + max-width: 256px;
541 + min-height: 128px;
542 +}
308 543 .groups-admin-add-ons .add-ons h3 {
309 544 margin: 0;
310 - display: block;
311 - clear: both;
545 + display: flex;
546 + align-items: center;
547 + justify-content: left;
312 548 }
549 +.groups-admin-add-ons h3.woocommerce {
550 + font-size: 18px;
551 +}
313 552 .groups-admin-add-ons .add-ons h3 img {
314 553 vertical-align: middle;
554 + height: 36px;
315 555 margin: 0 8px 0 0;
316 - display: block;
317 - float: left;
556 + border-radius: 3px;
318 557 }
558 +.groups-admin-add-ons .woocommerce.add-ons h3 img {
559 + width: 48px;
560 + height: auto;
561 +}
319 562 .groups-admin-add-ons .add-ons a {
320 563 text-decoration: none;
321 564 display: block;
322 565 overflow: hidden;
@@ -326,5 +569,89 @@
326 569 padding-top: 8px;
327 570 clear: both;
328 571 display: block;
329 572 color: #333;
573 + font-size: 14px;
574 +}
575 +
576 +.groups-admin-add-ons .woocommerce-marketplace {
577 + margin: 0 0 2em 0;
578 + padding: 8px;
579 + background-color: #fff;
580 + border: 1px solid #ccc;
581 + display: inline-block;
582 +}
583 +
584 +.groups-welcome-panel {
585 + position: relative;
586 + overflow: auto;
587 + margin: 1em;
588 + padding: 1em;
589 + border: 1px solid #e5e5e5;
590 + -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
591 + box-shadow: 0 1px 1px rgba(0,0,0,0.04);
592 + background: #fff;
593 + font-size: 14px;
594 + line-height: 2.1em;
595 +}
596 +.groups-welcome-panel h2 {
597 + margin: 1.62em 0 0 0;
598 + font-size: 21px;
599 + font-weight: 600;
600 + line-height: 1.2;
601 +}
602 +.groups-welcome-panel h3 {
603 + margin: 1.33em 0 0;
604 + font-weight: 500;
605 + font-size: 17px;
606 +}
607 +.groups-welcome-panel li {
608 + font-size: 14px;
609 +}
610 +.groups-welcome-panel p {
611 + color: #72777c;
612 + font-size: 15px;
613 + line-height: 1.6em;
614 + margin: 1em 0;
615 +}
616 +.groups-welcome-panel-description p {
617 + font-size: 16px;
618 +}
619 +.groups-welcome-panel a {
620 + text-decoration: none;
621 +}
622 +.groups-welcome-panel .headline {
623 + font-size: 17px;
624 + margin: 1em 0 1.62em 0;
625 +}
626 +
627 +.groups-welcome-panel-content {
628 + margin-left: 13px;
629 + max-width: 1500px;
630 +}
631 +.groups-welcome-icon {
632 + float: right;
633 + margin: 0 0.62em 0.62em 0.62em;
634 +}
635 +.groups-welcome-panel .important {
636 + border: 1px solid #e5e5e5;
637 + border-left: 2px solid #ffcc00;
638 + padding: 1em;
639 + -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
640 + box-shadow: 0 1px 1px rgba(0,0,0,0.04);
641 +}
642 +.groups-welcome-panel .indent {
643 + border: 1px solid #e5e5e5;
644 + padding: 0 0.62em;
645 +}
646 +
647 +ul.groups-group-bulk-remove,
648 +ul.groups-capability-bulk-remove {
649 + list-style: disc inside;
650 +}
651 +
652 +ul.groups-tree {
653 + list-style: inside;
654 +}
655 +li.groups-tree-node {
656 + padding-left: 1em;
330 657 }