PluginProbe
Groups – Memberships and Access Control / 4.7.0
Groups – Memberships and Access Control v4.7.0
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
groups / css / groups_admin.css

groups_admin.css in Groups – Memberships and Access Control 4.7.0, at css/groups_admin.css

658 lines 13.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * groups_admin.css
3 *
4 * Copyright (c) "kento" Karim Rahimpur www.itthinx.com
5 *
6 * This code is released under the GNU General Public License.
7 * See COPYRIGHT.txt and LICENSE.txt.
8 *
9 * This code is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details.
13 *
14 * This header and all notices must be kept intact.
15 *
16 * @author Karim Rahimpur
17 * @package groups
18 * @since groups 1.0.0
19 */
20 .manage-groups,
21 .manage-capabilities {
22 margin-right: 1em;
23 }
24 .filters,
25 .manage {
26 background-color: #fff;
27 padding: 0.62em;
28 margin-bottom: 0.62em;
29 border: 1px solid #ddd;
30 }
31 .filters fieldset,
32 .manage fieldset {
33 display: flex;
34 justify-content: start;
35 gap: 8px 12px;
36 flex-wrap: wrap;
37 }
38 .filters legend {
39 padding: 0 0 2px 0;
40 }
41 .filters form label {
42 white-space: nowrap;
43 }
44 .manage a.add {
45 text-decoration: none;
46 cursor: pointer;
47 }
48 .manage a.add .icon {
49 vertical-align: middle;
50 padding-right: 4px;
51 }
52 .manage-groups a.add.page-title-action img.icon,
53 .manage-groups a.refresh.page-title-action img.icon,
54 .manage-groups .row-actions span.edit img,
55 .manage-groups .row-actions span.remove img,
56 .manage-capabilities a.add.page-title-action img.icon,
57 .manage-capabilities a.refresh.page-title-action img.icon,
58 .manage-capabilities .row-actions span.edit img,
59 .manage-capabilities .row-actions span.remove img {
60 vertical-align: sub;
61 }
62 .manage a.add .label {
63 height: 20px;
64 vertical-align: middle;
65 }
66 .manage a.refresh {
67 text-decoration: none;
68 cursor: pointer;
69 float: right;
70 }
71 .manage a.refresh .icon {
72 vertical-align: middle;
73 }
74 .manage a.refresh .label {
75 height: 20px;
76 vertical-align: middle;
77 }
78 div.field {
79 padding-bottom: 0.62em;
80 }
81 div.field a.cancel {
82 vertical-align: middle;
83 }
84 div.field input[type="submit"],
85 div.group.remove input[type="submit"],
86 div.capability.remove input[type="submit"] {
87 margin-right: 1em;
88 }
89
90 div.group.new label,
91 div.group.edit label,
92 div.capability.new label,
93 div.capability.edit label {
94 display: block;
95 }
96
97 .groups-overview .page-options,
98 .capabilities-overview .page-options {
99 float: left;
100 display: inline;
101 }
102 .groups-overview .page-options.right,
103 .capabilities-overview .page-options.right {
104 float: right;
105 }
106 .groups-overview .page-options label,
107 .groups-overview .page-options input[type="text"],
108 .groups-overview .page-options .button,
109 .capabilities-overview .page-options label,
110 .capabilities-overview .page-options input[type="text"],
111 .capabilities-overview .page-options .button {
112 margin-right: 4px;
113 vertical-align: middle;
114 }
115 .groups-overview .page-options input[type="text"],
116 .capabilities-overview .page-options input[type="text"] {
117 text-align: center;
118 }
119
120 .groups-overview th.check-column,
121 .capabilities-overview th.check-column {
122 padding: 10px 0 0 3px;
123 }
124 .groups-overview th.edit,
125 .groups-overview th.group_id,
126 .groups-overview th.remove,
127 .capabilities-overview th.capability_id,
128 .capabilities-overview th.edit,
129 .capabilities-overview th.remove {
130 width: 10%;
131 }
132 .groups-overview th.members {
133 width: 10%;
134 }
135
136 .groups-overview td.capabilities,
137 .capabilities-overview td.capability {
138 text-overflow: ellipsis;
139 }
140
141 .groups-overview td.capabilities ul {
142 margin: 0;
143 }
144
145 .groups-overview td.capabilities span.inherited {
146 font-style: italic;
147 }
148
149 .manage-groups .required,
150 .manage-capabilities .required {
151 background: url(../images/required.png) transparent no-repeat left center;
152 padding-left: 16px ! important;
153 }
154 .groups-footer {
155 padding-top: 16px;
156 color: #999;
157 }
158 .groups-footer a {
159 color: #777;
160 text-decoration: none;
161 font-weight: bold;
162 }
163 .groups-footer form {
164 display: inline;
165 }
166
167 .groups-options input[type="checkbox"] {
168 margin-right: 4px;
169 }
170 .groups-options .groups-permissions thead td {
171 padding: 0 4px;
172 font-weight: bold;
173 margin: 0;
174 }
175 .groups-options .groups-permissions td.checkbox {
176 text-align: center;
177 }
178 .info {
179 background-color: #eec;
180 border: 1px solid #cca;
181 border-radius: 4px;
182 margin: 1em;
183 padding: 1em;
184 }
185
186 #groups-extensions-box {
187 position: relative;
188 float: right;
189 padding: 1em;
190 margin: 1em;
191 background-color: #fff;
192 border-radius: 4px;
193 color: #111;
194 border: 1px solid #999;
195 width: 256px;
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 }
216 #groups-extensions-box a.close {
217 color: #999;
218 line-height: 18px;
219 position: absolute;
220 right: 4px;
221 text-decoration: none;
222 top: 4px;
223 font-family: sans;
224 font-size: 12px;
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 }
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 }
384 .groups-bulk-container {
385 display: flex;
386 flex-wrap: wrap;
387 gap: 8px;
388 justify-content: start;
389 }
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 }
404 .tablenav .tablenav-pages {
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;
413 }
414 .tablenav .tablenav-pages .paging-input {
415 display: flex;
416 flex-direction: row;
417 align-items: center;
418 gap: 2px;
419 }
420
421 .groups-bulk-container .groups-ts-wrapper {
422 height: 100%;
423 width: 100%;
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
430 .groups-bulk-container .selectize-input {
431 font-size: inherit;
432 line-height: 18px;
433 padding: 0 4px;
434 vertical-align: middle;
435 }
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"] {
439 font-size: inherit;
440 vertical-align: middle;
441 height: 28px;
442 line-height: 28px;
443 }
444 .groups-bulk-container select.bulk-action {
445 margin-right: unset;
446 }
447 .groups-bulk-container .button,
448 .capabilities-bulk-container .button {
449 vertical-align: middle;
450 margin: 0;
451 }
452
453 .group.new .selectize-control,
454 .group.edit .selectize-control,
455 .groups-options .selectize-control {
456 padding: 2px;
457 }
458 .group.new .selectize-input,
459 .group.edit .selectize-input,
460 .groups-options .selectize-input {
461 font-size: inherit;
462 line-height: 18px;
463 padding: 2px;
464 }
465
466 .groups.messages {
467 padding: 1em 0;
468 }
469
470 @media screen and ( max-width: 782px ) {
471 .groups-bulk-container .selectize-input {
472 padding: 2px;
473 }
474 .groups-bulk-container .selectize-input .item,
475 .groups-bulk-container .selectize-dropdown-content .option {
476 font-size: 16px;
477 }
478 .groups-bulk-container .selectize-input input[type="text"] {
479 height: 32px;
480 font-size: 16px;
481 }
482 }
483
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 {
513 list-style: none;
514 display: flex;
515 flex-wrap: wrap;
516 padding: 0;
517 overflow: hidden;
518 }
519 .groups-admin-add-ons ul.add-ons li.add-on {
520 margin: 0 1em 1em 0;
521 padding: 16px;
522 vertical-align: top;
523 width: 256px;
524 min-height: 158px;
525 background-color: #fff;
526 border: 1px solid #ccc;
527 border-radius: 3px;
528 flex: 1 1 22%;
529 max-width: 384px;
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 }
543 .groups-admin-add-ons .add-ons h3 {
544 margin: 0;
545 display: flex;
546 align-items: center;
547 justify-content: left;
548 }
549 .groups-admin-add-ons h3.woocommerce {
550 font-size: 18px;
551 }
552 .groups-admin-add-ons .add-ons h3 img {
553 vertical-align: middle;
554 height: 36px;
555 margin: 0 8px 0 0;
556 border-radius: 3px;
557 }
558 .groups-admin-add-ons .woocommerce.add-ons h3 img {
559 width: 48px;
560 height: auto;
561 }
562 .groups-admin-add-ons .add-ons a {
563 text-decoration: none;
564 display: block;
565 overflow: hidden;
566 }
567 .groups-admin-add-ons .add-ons p {
568 margin: 0;
569 padding-top: 8px;
570 clear: both;
571 display: block;
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;
657 }
658