PluginProbe
Groups – Memberships and Access Control / 3.9.0
Groups – Memberships and Access Control v3.9.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 1.13.1 1.2.0 All 129 releases
groups / css / groups_admin.css

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

619 lines 12.6 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: inline-block;
34 clear: both;
35 }
36 .filters legend {
37 padding: 0 0 2px 0;
38 }
39 .filters form label {
40 white-space: nowrap;
41 margin-bottom: 0.62em;
42 }
43 .manage a.add {
44 text-decoration: none;
45 cursor: pointer;
46 }
47 .manage a.add .icon {
48 vertical-align: middle;
49 padding-right: 4px;
50 }
51 .manage-groups a.add.page-title-action img.icon,
52 .manage-groups a.refresh.page-title-action img.icon,
53 .manage-groups .row-actions span.edit img,
54 .manage-groups .row-actions span.remove img,
55 .manage-capabilities a.add.page-title-action img.icon,
56 .manage-capabilities a.refresh.page-title-action img.icon,
57 .manage-capabilities .row-actions span.edit img,
58 .manage-capabilities .row-actions span.remove img {
59 vertical-align: sub;
60 }
61 .manage a.add .label {
62 height: 20px;
63 vertical-align: middle;
64 }
65 .manage a.refresh {
66 text-decoration: none;
67 cursor: pointer;
68 float: right;
69 }
70 .manage a.refresh .icon {
71 vertical-align: middle;
72 }
73 .manage a.refresh .label {
74 height: 20px;
75 vertical-align: middle;
76 }
77 div.field {
78 padding-bottom: 0.62em;
79 }
80 div.field a.cancel {
81 vertical-align: middle;
82 }
83 div.field input[type="submit"],
84 div.group.remove input[type="submit"],
85 div.capability.remove input[type="submit"] {
86 margin-right: 1em;
87 }
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
102 div.group.new label,
103 div.group.edit label,
104 div.capability.new label,
105 div.capability.edit label {
106 display: block;
107 }
108
109
110 .groups-overview .page-options,
111 .capabilities-overview .page-options {
112 float: left;
113 display: inline;
114 /*width: 250px;*/
115 padding-bottom: 1em;
116 }
117 .groups-overview .page-options.right,
118 .capabilities-overview .page-options.right {
119 float: right;
120 }
121 .groups-overview .page-options label,
122 .groups-overview .page-options input[type="text"],
123 .groups-overview .page-options .button,
124 .capabilities-overview .page-options label,
125 .capabilities-overview .page-options input[type="text"],
126 .capabilities-overview .page-options .button {
127 margin-right: 4px;
128 vertical-align: middle;
129 }
130 .groups-overview .page-options input[type="text"],
131 .capabilities-overview .page-options input[type="text"] {
132 width: 2.8em;
133 text-align: center;
134 }
135 .groups-overview .tablenav.top,
136 .capabilities-overview .tablenav.top {
137 display: inline;
138 width: 250px;
139 }
140 .groups-overview th.check-column,
141 .capabilities-overview th.check-column {
142 padding: 10px 0 0 3px;
143 }
144 .groups-overview th.edit,
145 .groups-overview th.group_id,
146 .groups-overview th.remove,
147 .capabilities-overview th.capability_id,
148 .capabilities-overview th.edit,
149 .capabilities-overview th.remove {
150 width:10%;
151 }
152
153 .groups-overview td.capabilities,
154 .capabilities-overview td.capability {
155 text-overflow: ellipsis;
156 }
157
158 .groups-overview td.capabilities ul {
159 margin: 0;
160 }
161
162 .groups-overview td.capabilities span.inherited {
163 font-style: italic;
164 }
165
166 .manage-groups .required,
167 .manage-capabilities .required {
168 background: url(../images/required.png) transparent no-repeat left center;
169 padding-left: 16px ! important;
170 }
171 .groups-footer {
172 padding-top: 16px;
173 color: #999;
174 }
175 .groups-footer a {
176 color: #777;
177 text-decoration: none;
178 font-weight: bold;
179 }
180 .groups-footer form {
181 display: inline;
182 }
183
184 .groups-options input[type="checkbox"] {
185 margin-right: 4px;
186 }
187 .groups-options .groups-permissions thead td {
188 padding: 0 4px;
189 font-weight: bold;
190 margin: 0;
191 }
192 .groups-options .groups-permissions td.checkbox {
193 text-align: center;
194 }
195 .info {
196 background-color: #eec;
197 border: 1px solid #cca;
198 border-radius: 4px;
199 margin: 1em;
200 padding: 1em;
201 }
202
203 #groups-extensions-box {
204 position: relative;
205 float: right;
206 padding: 1em;
207 margin: 1em;
208 background-color: #fff;
209 border-radius: 4px;
210 color: #111;
211 border: 1px solid #999;
212 width: 256px;
213 }
214 #groups-extensions-box h3 {
215 margin: 0.62em 0;
216 }
217 #groups-extensions-box h3::after {
218 content: "\f487";
219 background: transparent;
220 color: #f33;
221 display: inline-block;
222 font: normal 18px dashicons;
223 vertical-align: middle;
224 text-align: center;
225 transform: rotate(21deg);
226 position: relative;
227 top: -4px;
228 left: 4px;
229 }
230 #groups-extensions-box p {
231 margin: 0.31em 0;
232 }
233 #groups-extensions-box a.close {
234 color: #999;
235 line-height: 18px;
236 position: absolute;
237 right: 4px;
238 text-decoration: none;
239 top: 4px;
240 font-family: sans;
241 font-size: 12px;
242 }
243 #groups-extensions-box a.close::before {
244 background: transparent;
245 color: #ddd;
246 content: "\f153";
247 display: inline-block;
248 font: normal 16px/20px dashicons;
249 height: 20px;
250 text-align: center;
251 width: 20px;
252 position: relative;
253 top: 4px;
254 right: 4px;
255 transition: all .62s ease-in-out;
256 }
257 #groups-extensions-box a.close:hover::before {
258 color: #f00;
259 }
260
261 .groups-bitcoin-box {
262 padding: 1em;
263 margin: 1em;
264 background-color: #fff;
265 border-radius: 4px;
266 color: #111;
267 border: 1px solid #999;
268 width: 256px;
269 }
270 .groups-bitcoin-box.options {
271 position: relative;
272 float: right;
273 }
274 .groups-bitcoin-box-inside {
275 display: flex;
276 flex-direction: column;
277 text-align: center;
278 }
279
280 .groups-bitcoin-box span {
281 margin: 0.31em 0;
282 flex-grow: 1;
283 text-align: center;
284 }
285 .groups-bitcoin-box .groups-bitcoin-cta {
286 font-weight: bold;
287 padding-bottom: 16px;
288 }
289 .groups-bitcoin-box .groups-bitcoin-image img {
290 width: 100%;
291 }
292 .groups-bitcoin-box.small .groups-bitcoin-image img {
293 width: 128px;
294 }
295 .groups-bitcoin-box .groups-bitcoin-description {
296 padding-top: 12px;
297 }
298 .groups-bitcoin-box .groups-bitcoin-description .groups-bitcoin-address {
299 word-wrap: anywhere;
300 vertical-align: middle;
301 font-weight: bold;
302 }
303 .groups-bitcoin-box .groups-bitcoin-description .dashicons.dashicons-admin-page {
304 opacity: 0.42;
305 vertical-align: middle;
306 }
307
308 .groups-bitcoin-box.horizontal {
309 flex: auto;
310 max-width: 384px;
311 min-width: 256px;
312 width: auto;
313 padding: 8px;
314 margin: 8px;
315 }
316 .groups-bitcoin-box.horizontal .groups-bitcoin-box-inside {
317 display: grid;
318 grid-template-rows: 25% 75%;
319 grid-template-columns: 35% 65%;
320 }
321 .groups-bitcoin-box.horizontal .groups-bitcoin-cta {
322 grid-column-start: 2;
323 grid-row-start: 1;
324 padding: 4px;
325 }
326 .groups-bitcoin-box.horizontal .groups-bitcoin-image {
327 grid-row-start: 1;
328 grid-column-start: 1;
329 grid-row-end: span 2;
330 }
331 .groups-bitcoin-box.horizontal .groups-bitcoin-image img {
332 width: 128px;
333 }
334 .groups-bitcoin-box.horizontal .groups-bitcoin-description {
335 grid-row-start: 2;
336 grid-column-start: 2;
337 padding: 4px;
338 }
339
340 .groups-bitcoin-box a.close {
341 color: #999;
342 line-height: 18px;
343 position: absolute;
344 right: 4px;
345 text-decoration: none;
346 top: 4px;
347 font-family: sans;
348 font-size: 12px;
349 }
350 .groups-bitcoin-box a.close::before {
351 background: transparent;
352 color: #ddd;
353 content: "\f153";
354 display: inline-block;
355 font: normal 16px/20px dashicons;
356 height: 20px;
357 text-align: center;
358 width: 20px;
359 position: relative;
360 top: 4px;
361 right: 4px;
362 transition: all .62s ease-in-out;
363 }
364 .groups-bitcoin-box a.close:hover::before {
365 color: #f00;
366 }
367
368 #groups-extensions-support {
369 padding: 1em;
370 margin: 0 0 24px 0;
371 background-color: #fff;
372 border-radius: 4px;
373 color: #111;
374 border: 2px solid #7494d1;
375 display: flex;
376 flex-direction: row;
377 flex-wrap: wrap;
378 justify-content: space-around;
379 }
380 #groups-extensions-support p {
381 font-size: 14px;
382 color: #333;
383 }
384 #groups-extensions-support h2::after {
385 content: "\f487";
386 background: transparent;
387 color: #f33;
388 display: inline-block;
389 font: normal 18px dashicons;
390 vertical-align: middle;
391 text-align: center;
392 transform: rotate(21deg);
393 position: relative;
394 top: -4px;
395 left: 4px;
396 }
397 #groups-extensions-support-inside {
398 flex: 1;
399 min-width: 256px;
400 }
401 .groups-bulk-container {
402 padding-bottom: 1em;
403 }
404 .groups-bulk-container,
405 .capabilities-bulk-container,
406 .tablenav .tablenav-pages {
407 line-height: 24px;
408 }
409 .groups-bulk-container .capabilities-select-container {
410 width: 25%;
411 float: left;
412 vertical-align: middle;
413 }
414 .groups-bulk-container .selectize-control,
415 .groups-bulk-container select.bulk-action,
416 .capabilities-bulk-container select.bulk-action {
417 margin-right: 4px;
418 vertical-align: middle;
419 }
420 .groups-bulk-container .selectize-input {
421 font-size: inherit;
422 line-height: 18px;
423 padding: 0 4px;
424 vertical-align: middle;
425 }
426 .groups-bulk-container .selectize-input input[type="text"],
427 .groups-bulk-container .selectize-input input[type="select-multiple"],
428 .groups-groups-container .selectize-input input[type="select-multiple"] {
429 font-size: inherit;
430 vertical-align: middle;
431 height: 28px;
432 line-height: 28px;
433 }
434 .groups-bulk-container .button,
435 .capabilities-bulk-container .button {
436 vertical-align: middle;
437 }
438
439 .group.new .selectize-control,
440 .group.edit .selectize-control,
441 .groups-options .selectize-control {
442 padding: 2px;
443 }
444 .group.new .selectize-input,
445 .group.edit .selectize-input,
446 .groups-options .selectize-input {
447 font-size: inherit;
448 line-height: 18px;
449 padding: 2px;
450 }
451
452 .groups.messages {
453 padding: 1em 0;
454 }
455
456 @media screen and ( max-width: 782px ) {
457 .groups-bulk-container .selectize-input {
458 padding: 2px;
459 }
460 .groups-bulk-container .selectize-input .item,
461 .groups-bulk-container .selectize-dropdown-content .option {
462 font-size: 16px;
463 }
464 .groups-bulk-container .selectize-input input[type="text"] {
465 height: 32px;
466 font-size: 16px;
467 }
468 }
469
470 .groups-admin-add-ons {
471 margin: 24px 24px 0 2px;
472 }
473 .groups-admin-add-ons ul.add-ons {
474 list-style: none;
475 display: flex;
476 flex-wrap: wrap;
477 padding: 0;
478 overflow: hidden;
479 }
480 .groups-admin-add-ons ul.add-ons li.add-on {
481 margin: 0 1em 1em 0;
482 padding: 16px;
483 vertical-align: top;
484 width: 256px;
485 min-height: 158px;
486 background-color: #fff;
487 border: 1px solid #ccc;
488 border-radius: 3px;
489 flex: 1 1 22%;
490 max-width: 384px;
491 }
492 .groups-admin-add-ons ul.woocommerce.add-ons li.add-on p {
493 font-size: 15px;
494 }
495 .groups-admin-add-ons ul.woocommerce.add-ons li.add-on h3 {
496 font-size: 18px;
497 font-weight: 600;
498 }
499 .groups-admin-add-ons ul.groups.add-ons li.add-on,
500 .groups-admin-add-ons ul.other.add-ons li.add-on {
501 max-width: 256px;
502 min-height: 128px;
503 }
504 .groups-admin-add-ons .add-ons h3 {
505 margin: 0;
506 display: flex;
507 align-items: center;
508 justify-content: left;
509 }
510 .groups-admin-add-ons h3.woocommerce {
511 font-size: 18px;
512 }
513 .groups-admin-add-ons .add-ons h3 img {
514 vertical-align: middle;
515 height: 36px;
516 margin: 0 8px 0 0;
517 border-radius: 3px;
518 }
519 .groups-admin-add-ons .woocommerce.add-ons h3 img {
520 width: 48px;
521 height: auto;
522 }
523 .groups-admin-add-ons .add-ons a {
524 text-decoration: none;
525 display: block;
526 overflow: hidden;
527 }
528 .groups-admin-add-ons .add-ons p {
529 margin: 0;
530 padding-top: 8px;
531 clear: both;
532 display: block;
533 color: #333;
534 font-size: 14px;
535 }
536
537 .groups-admin-add-ons .woocommerce-marketplace {
538 margin: 0 0 2em 0;
539 padding: 8px;
540 background-color: #fff;
541 border: 1px solid #ccc;
542 display: inline-block;
543 }
544
545 .groups-welcome-panel {
546 position: relative;
547 overflow: auto;
548 margin: 1em;
549 padding: 1em;
550 border: 1px solid #e5e5e5;
551 -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
552 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
553 background: #fff;
554 font-size: 14px;
555 line-height: 2.1em;
556 }
557 .groups-welcome-panel h2 {
558 margin: 1.62em 0 0 0;
559 font-size: 21px;
560 font-weight: 600;
561 line-height: 1.2;
562 }
563 .groups-welcome-panel h3 {
564 margin: 1.33em 0 0;
565 font-weight: 500;
566 font-size: 17px;
567 }
568 .groups-welcome-panel li {
569 font-size: 14px;
570 }
571 .groups-welcome-panel p {
572 color: #72777c;
573 font-size: 15px;
574 line-height: 1.6em;
575 margin: 1em 0;
576 }
577 .groups-welcome-panel-description p {
578 font-size: 16px;
579 }
580 .groups-welcome-panel a {
581 text-decoration: none;
582 }
583 .groups-welcome-panel .headline {
584 font-size: 17px;
585 margin: 1em 0 1.62em 0;
586 }
587
588 .groups-welcome-panel-content {
589 margin-left: 13px;
590 max-width: 1500px;
591 }
592 .groups-welcome-icon {
593 float: right;
594 margin: 0 0.62em 0.62em 0.62em;
595 }
596 .groups-welcome-panel .important {
597 border: 1px solid #e5e5e5;
598 border-left: 2px solid #ffcc00;
599 padding: 1em;
600 -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
601 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
602 }
603 .groups-welcome-panel .indent {
604 border: 1px solid #e5e5e5;
605 padding: 0 0.62em;
606 }
607
608 ul.groups-group-bulk-remove,
609 ul.groups-capability-bulk-remove {
610 list-style: disc inside;
611 }
612
613 ul.groups-tree {
614 list-style: inside;
615 }
616 li.groups-tree-node {
617 padding-left: 1em;
618 }
619