PluginProbe
WPJAM Basic / trunk
WPJAM Basic vtrunk
wpjam-basic / static / style.css

style.css in WPJAM Basic trunk, at static/style.css

1,759 lines 25.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 body{
2 -webkit-font-smoothing:antialiased;
3 -moz-osx-font-smoothing:grayscale;
4
5 --line-height:40px;
6 --border-radius:2px;
7
8 &.version-6-9, &.version-6-8, &.version-6-7, &.version-6-6{
9 --line-height:30px;
10 --border-radius:4px;
11 }
12 }
13
14 .hidden{
15 display:none;
16 }
17
18 .green{
19 color:green;
20 }
21
22 .red{
23 color:red;
24 }
25
26 .direction-column{
27 display:inline-flex;
28 flex-direction:column;
29 gap:6px;
30
31 &.hidden{
32 display:none;
33 }
34 }
35
36 .direction-row{
37 display:inline-flex;
38 flex-wrap:wrap;
39 align-items:center;
40 gap:6px 10px;
41 line-height:var(--line-height);
42
43 &.hidden{
44 display:none;
45 }
46 }
47
48 .wrap-text,
49 .widefat tbody tr > *{
50 overflow-wrap:break-word;
51 word-break:break-all;
52 hyphens:auto;
53 }
54
55 .truncate-text,
56 table.nowrap tbody tr > *,
57 table tbody tr > .nowrap{
58 white-space:nowrap;
59 overflow:hidden;
60 text-overflow:ellipsis;
61
62 .query-label &{
63 background:#e5e5e5;
64 }
65
66 &:is(.truncate-text){
67 display:inline-block;
68 width:100%;
69 }
70
71 &:hover{
72 white-space:wrap;
73 transition:all 0.4s ease;
74 overflow:visible;
75 width:max-content;
76 max-width:fit-content;
77
78 .query-label &, &:is(td), &:is(th){
79 white-space:nowrap;
80 }
81 }
82 }
83
84 [data-highlight="add"]:nth-child(odd){
85 background-color: #ffffeecc !important;
86 }
87
88 [data-highlight="add"]:nth-child(even){
89 background-color: #ffffddcc !important;
90 }
91
92 [data-highlight="update"]{
93 background-color: #ffffeecc !important;
94 }
95
96 [data-highlight="move"]{
97 background-color: #eeffeecc !important;
98 }
99
100 [data-highlight="delete"]{
101 background-color: #ff0000cc !important;
102 }
103
104 .wp-menu-image[class*=" ri-"]:before{
105 display:inline-block;
106 line-height:1;
107 font-size:20px;
108 }
109
110 .wrap{
111 .wp-heading-inline{
112 display:inline-block;
113 margin-right:5px;
114 }
115
116 form#wpjam_option{
117 > h3:only-of-type, > h2:only-of-type{display: none;}
118 }
119
120 .nav-tab-wrapper:has(> a:only-child){
121 &, & + h2{display: none;}
122 }
123 }
124
125 .notice p a{
126 text-decoration:none;
127
128 .dashicons{
129 height:16px;
130 font-size:16px;
131 line-height:18px;
132 }
133 }
134
135 p.submit{
136 .spinner{
137 float:none;
138 margin:0 10px 0 -10px;
139 }
140
141 .button{
142 margin-right:20px;
143
144 &:last-child{
145 margin-right:0;
146 }
147 }
148 }
149
150 a.wpjam-button{
151 text-decoration:none;
152 }
153
154 div.summary{
155 margin:1em 0;
156 }
157
158 [data-tooltip],
159 [data-description]{
160 cursor:pointer;
161 vertical-align:text-bottom;
162
163 &:has([popover]){
164 anchor-name:--tooltip-anchor;
165
166 [popover]{
167 position-anchor:--tooltip-anchor;
168 position-area:bottom span-all;
169 position-try-fallbacks:flip-block, flip-inline;
170 cursor:initial;
171 font-size:13px;
172 color:#fff;
173 background-color:#333;
174 margin:10px;
175 padding:6px 12px 8px;
176 border-radius:6px;
177 border:none;
178 max-width:min(80vw, 300px);
179 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
180
181 p{
182 color:#fff;
183 margin-bottom:4px;
184 white-space:wrap;
185 }
186 }
187 }
188 }
189
190 .wpjam-lightbox{
191 border:none;
192 overflow:visible;
193 background:#fff;
194 padding:0;
195 background:transparent;
196
197 &::backdrop{background:rgba(0,0,0,0.8);}
198
199 &:has(div){
200 display:flex;
201 align-items:center;
202 gap:10px;
203 }
204
205 div{
206 position:relative;
207 }
208
209 a{
210 width:32px;
211 height:32px;
212 font-size:32px;
213 color:#FFFFFF;
214 opacity:0.5;
215 }
216
217 img{
218 padding:20px;
219 background:#FFFFFF;
220 zoom:0.5;
221 max-width:160vw;
222 max-height:160vh;
223 object-fit:contain;
224 }
225 }
226
227 .wpjam-dialog{
228 padding:0;
229 border:none;
230 overflow:visible;
231
232 &::backdrop{background:rgba(0,0,0,0.7);}
233
234 .title{
235 display:flex;
236 justify-content:space-between;
237 border-bottom:1px solid #ddd;
238
239 h2{
240 line-height:40px;
241 margin:0;
242 padding:0 20px;
243 }
244
245 button{
246 all:unset;
247 margin:0 -32px 0 0;
248
249 @media (max-width:782px){margin:-70px 0 0 0;}
250
251 &:before{
252 font:normal 20px / 29px dashicons;
253 content:"\f335";
254 font-size:32px;
255 cursor:pointer;
256 color:#fff;
257 }
258 }
259 }
260
261 .content{
262 background:#f1f1f1;
263 padding:5px 25px;
264 max-height:80vh;
265 overflow-y:auto;
266
267 .notice{margin:5px 0 2px;}
268
269 table.form-table > tbody > tr{
270 > th{
271 width:110px;
272 min-width:80px;
273
274 @media (max-width:782px){width:inherit;}
275 }
276
277 > td{
278 min-width:240px;
279
280 .after, .description{padding:0;}
281 }
282 }
283 }
284 }
285
286 .wpjam-loading{
287 position: fixed;
288 top: 50%;
289 left: 50%;
290 background-color: #E8E8E8;
291 border: 1px solid #555;
292 margin: -40px 0 0 -125px;
293 padding: 35px 25px 25px;
294 z-index: 9999;
295
296 img{
297 width:208px;
298 height:13px;
299 }
300 }
301
302 .components-wpjam-media-control{
303 &:has(img){
304 position: relative;
305
306 &:hover{
307 .components-flex{
308 opacity:1;
309 }
310 }
311
312 .components-flex{
313 gap:0;
314 justify-content:space-evenly;
315 position:absolute;
316 bottom:10px;
317 opacity:0;
318 transition:opacity 0.4s;
319
320 button{
321 backdrop-filter:blur(16px) saturate(180%);
322 background:#ffffffbf !important;
323 }
324 }
325 }
326 }
327
328 button.components-button.del-img{
329 min-width:20px !important;
330 width:20px;
331 height:20px;
332 box-shadow:none;
333 color:#fff !important;
334 }
335
336 .components-wpjam-select-control{
337 max-width:100%;
338
339 .components-dropdown{
340 max-width:100%;
341
342 button{
343 color:#1e1e1e;
344 border:1px solid #949494;
345 font-weight:normal;
346 max-width:100%;
347 overflow:hidden;
348 text-overflow:ellipsis;
349 white-space:nowrap;
350 }
351
352 button:hover{
353 color:#1e1e1e;
354 }
355
356 button:focus:not(:active){
357 box-shadow:none;
358 }
359 }
360 }
361
362 .components-wpjam-select-popover{
363 .components-popover__content > .components-flex{
364 min-width:240px;
365 padding:8px 4px;
366 }
367 }
368
369 .components-wpjam-color-control{
370 .components-dropdown .components-button{
371 box-shadow:none;
372 gap:4px;
373 }
374 }
375
376 .components-modal__content fieldset [class*="-control__label"]{
377 font-size: revert;
378 font-weight: revert;
379 }
380
381 .components-modal__content [class*="-control__label"]{
382 font-size: 14px;
383 font-weight: 500;
384 }
385
386 .wide-text{
387 width:40em;
388
389 @media (max-width:782px){
390 width:99%;
391 }
392 }
393
394 span.all-options{
395 width:250px;
396 }
397
398 span.large-text{
399 width:99%;
400 }
401
402 span.small-text{
403 width:50px;
404 }
405
406 span.tiny-text{
407 width:35px;
408 }
409
410 input.medium-text{
411 width:105px;
412 }
413
414 input.compact-text{
415 width:85px;
416 }
417
418 input[type=number]{
419 padding-right:0;
420 }
421
422 input[type=checkbox]:indeterminate{
423 display:inline-grid;
424 place-items:center;
425
426 &:before{
427 content:'';
428 border:1px solid grey;
429 width:55%;
430 }
431 }
432
433 .button.switch,
434 input[type=checkbox].switch{
435 display:inline-flex;
436 cursor:pointer;
437 width:32px;
438 height:16px;
439 border:0;
440 border-radius:8px;
441 background-color:#a7aaad;
442
443 &:is(input[type=checkbox]){
444 appearance:none;
445 box-shadow:none;
446 }
447
448 &.button{
449 min-height:initial;
450 padding:initial;
451 }
452
453 &:checked, &.checked{
454 justify-content:flex-end;
455 background-color:#2271b1;
456 }
457
458 &:before{
459 content:'';
460 width:12px;
461 height:12px;
462 margin:2px;
463 border-radius:50%;
464 background-color:#ffffff;
465 }
466 }
467
468 .expandable{
469 field-sizing:content;
470
471 &:is(input){
472 min-width:36px;
473 width:unset !important;
474
475 &.regular-text{min-width:25em;}
476 &.small-text{min-width:50px;}
477 }
478
479 &:is(textarea){
480 min-height:6em;
481 max-height:24em;
482 }
483 }
484
485 .expandable-container{
486 display:flex;
487 flex-direction:column-reverse;
488 align-items:flex-start;
489
490 input[type=checkbox]{
491 box-shadow:none;
492 width:auto;
493 padding:0px 10px !important;
494
495 &:before{
496 font-family:remixicon;
497 content:"展开\f2e0";
498 }
499
500 + .inner{
501 max-height:12em;
502 margin-bottom:1em;
503 overflow:hidden;
504
505 .row-actions{display:none;}
506 }
507
508 &:checked{
509 &:before{
510 width:auto;
511 margin:initial;
512 content:"æ”¶èµ·\f2ea";
513 }
514
515 + .inner{
516 max-height:none;
517 margin-bottom:0;
518
519 .row-actions{display:initial;}
520 }
521 }
522 }
523 }
524
525 .wp-picker-container{
526 .wp-picker-clear{min-height:30px;}
527
528 .wp-color-result-text{color:inherit;}
529
530 .wp-color-picker{
531 margin:0 2px;
532
533 &[data-alpha-enabled]{
534 width:5rem;
535
536 @media (max-width:782px){width:6.4rem;}
537 }
538 }
539
540 &:has([data-alpha-enabled]){
541 --bg:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==);
542
543 .iris-picker{
544 .iris-picker-inner{
545 display:flex;
546 justify-content:space-between;
547 }
548
549 .iris-square{
550 margin-right:1.5%;
551 }
552
553 .iris-slider:last-child{
554 background:linear-gradient(to bottom, rgb(from var(--color) r g b / 100%), rgb(from var(--color) r g b / 0%)), var(--bg) !important;
555 }
556 }
557
558 button{
559 background:linear-gradient(var(--color), var(--color)), var(--bg) !important;
560 }
561 }
562
563 .form-table & > label{
564 line-height:30px !important;
565 margin:0 !important;
566 }
567 }
568
569 form.chart-form{
570 margin:1em 0;
571 display:flex;
572 align-items:center;
573 flex-wrap:wrap;
574 gap:10px;
575 }
576
577 div.donut-chart-wrap{
578 display:flex;
579 gap:40px;
580 margin-bottom:20px;
581
582 table{
583 width:initial;
584 border:none;
585 background:none;
586
587 thead > tr > *{border:none;}
588 }
589 }
590
591 .sub-field{
592 margin-bottom:0.8em;
593 line-height:var(--line-height);
594
595 .sub-field{margin-bottom:0;}
596
597 > label{
598 min-width:76px;
599 padding-right:4px;
600 font-weight:500;
601 display:table-cell;
602 vertical-align:top;
603 }
604
605 > :nth-child(2){
606 max-width:calc(100% - 80px);
607 display:table-cell;
608
609 label{line-height:1;}
610 }
611 }
612
613 .field-group{
614 display:flex;
615 flex-wrap:wrap;
616 align-items:flex-start;
617 gap:6px;
618
619 .sub-field:not(:first-child) > label{min-width:initial;}
620 }
621
622 fieldset{
623 > .field-group,
624 > .inline{
625 margin:0 0 .5em !important;
626
627 &.hidden{display:none;}
628 }
629
630 > .field-group{
631 display:inline-flex;
632 }
633
634 > .field-group:has(> label) > *,
635 > .field-group > .inline:not(:has(> label)){
636 margin:.35em 0 .5em !important;
637 }
638
639 > .field-group, &.mu-item.field-group{
640 > label{line-height:30px !important;}
641
642 &:is(.mu-item) > *{margin:0 !important;}
643 }
644
645 > .inline{
646 display:inline-block;
647 line-height:1.4;
648
649 > label{margin-top:0 !important;}
650 }
651
652 details{
653 summary{cursor:pointer;}
654
655 &[open] summary{margin-bottom:20px;}
656 }
657 }
658
659 span.query-label,
660 span.tag-label{
661 display:inline-flex;
662 align-items:center;
663 vertical-align:middle;
664 box-sizing:border-box;
665 background:#e5e5e5;
666 padding:0 8px;
667 border-radius:var(--border-radius);
668 line-height:var(--line-height);
669 }
670
671 span.query-label{
672 span.dashicons{
673 margin-right:4px;
674 font-weight:100;
675 cursor:pointer;
676 color:#0073aa;
677
678 &:before{content:"\f153";}
679 }
680
681 + input, ~ .description{display:none !important;}
682 }
683
684 span.tag-label{
685 padding:0 4px 0 8px;
686 cursor:move;
687
688 .del-item{margin-left:4px;}
689
690 ~ *{display:none;}
691 }
692
693 label.image-radio{
694 display:inline-flex !important;
695 flex-direction:column;
696 input{
697 &, + img + img{display:none;}
698
699 ~ img{
700 max-width:120px !important;
701 cursor:pointer;
702 opacity:75%;
703 }
704
705 &:checked{
706 + img{
707 display:none;
708 box-shadow:0 0 10px;
709 }
710
711 + img:last-of-type{
712 display:initial;
713 opacity:100%;
714 }
715 }
716 }
717
718 [popover]{
719 left:var(--wpjam-left);
720 top:var(--wpjam-top);
721 border:0;
722 margin:0;
723 padding:0;
724 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
725
726 img{zoom:0.5;}
727 }
728 }
729
730 .wpjam-cascade{
731 display:inline-flex;
732 gap:6px;
733 }
734
735 .wpjam-uploader{
736 display:inline-flex;
737 justify-content:flex-start;
738 align-items:center;
739
740 .button{
741 margin-right:6px;
742 }
743
744 &:has(div.progress) .button{
745 display:none;
746 }
747
748 div.progress{
749 margin:0 6px;
750 }
751
752 &.drag-drop{
753 border:4px dashed #c3c4c7;
754 height:200px;
755 width:98%;
756 display:grid;
757 align-content:center;
758 text-align:center;
759 justify-content:stretch;
760 gap:10px;
761
762 .media-item{
763 display:inline-block;
764 }
765
766 .drag-drop-info{
767 font-size:20px;
768 }
769 }
770 }
771
772 .wpjam-file,
773 .wpjam-image{
774 display:inline-flex;
775 gap:4px;
776 }
777
778 .wpjam-img{
779 position:relative;
780 cursor:pointer;
781 text-decoration:none;
782 width:fit-content;
783
784 img{
785 max-width:240px !important;
786 max-height:240px !important;
787 object-fit:cover;
788 }
789
790 img ~ .add-media,
791 &:has(img) ~ .description{display:none;}
792 }
793
794 .wpjam-file,
795 .wpjam-image,
796 .wpjam-img{
797 .add-media{
798 display:inline-flex;
799 align-items:center;
800 gap:4px;
801 }
802
803 .button.add-media{
804 span, span:before{line-height:1;}
805 }
806 }
807
808 .mu-img .del-item,
809 .del-img,
810 .del-img:hover,
811 .del-icon{
812 position:absolute;
813 outline:none;
814 padding:0;
815 border:0;
816 line-height:1;
817 top:-10px;
818 right:-10px;
819 border-radius:10px;
820 color:#ffffff;
821 background:#cc3333;
822 text-decoration:none;
823 opacity:0.8 !important;
824 cursor:pointer;
825 }
826
827 .readonly, .disabled{
828 .mu-item:last-child, .button, .dashicons{display:none !important;}
829 }
830
831 .mu-item{
832 > .button{
833 margin:0 6px;
834
835 &.del-item:before{content:"删除";}
836 }
837
838 > .new-item ~ .del-item{display:none;}
839
840 .direction-row > &{
841 > .move-item{
842 font-size:20px;
843 width:20px;
844 height:20px;
845 margin-right:2px;
846 }
847
848 .del-item:before{cursor:pointer;}
849 }
850
851 &.drag-from{
852 opacity:0.7;
853 background: #eee;
854 }
855
856 &.drag-to{
857 opacity:0.5;
858 background: #eee;
859 }
860
861 > .move-item,
862 > .components-flex > .components-flex > .move-item{
863 opacity:0.2;
864 cursor:move;
865 width:30px;
866 height:30px;
867 font-size:30px;
868 }
869
870 &:hover > .move-item,
871 &:hover > .components-flex > .components-flex > .move-item{
872 opacity:0.8 !important;
873 }
874
875 &:has(> .new-item) > .move-item{display:none;}
876
877 div.mu-text > &,
878 div.mu-image > &,
879 div.mu-file > &{
880 display:flex;
881 align-items:center;
882 }
883
884 div.mu-text > &.mu-item.components-flex{
885 cursor:move;
886 background: #ddd;
887 padding: 4px 8px;
888 }
889 }
890
891 div.mix-tag-editor{
892 min-width:20em;
893 line-height:calc(var(--line-height) - 12px);
894 width:fit-content;
895 display:inline-block;
896 padding:5px;
897 border-radius:var(--border-radius);
898 box-shadow:0 0 0 transparent;
899 border:1px solid #8c8f94;
900 background-color:#fff;
901 vertical-align: middle;
902
903 &:hover{
904 border-color:#2271b1;
905 box-shadow:0 0 0 1px #2271b1;
906 outline:2px solid transparent;
907 }
908
909 span.query-label{
910 margin:0 5px;
911 display:inline-block;
912 line-height:calc(var(--line-height) - 8px);
913
914 &:first-child{
915 margin-left:2px;
916 }
917 }
918 }
919
920 .mix-tag-autocomplete{
921 max-height:300px;
922 overflow-y:auto;
923 }
924
925 div.mu-text{
926 &[data-rest="0"]:not(:has(.tag-input)) > .mu-item:last-child{
927 input, select{display:none;}
928
929 .button{margin-left:0px;}
930 }
931
932 &.direction-row{
933 gap:8px 4px;
934 min-width:400px;
935 max-width:700px;
936
937 > .mu-item{
938 &:last-child input{display:none;}
939
940 input{
941 padding-right:20px !important;
942
943 + .del-item{
944 padding:0;
945 border:0;
946 margin-left:-24px;
947 margin-right:4px;
948 }
949
950 + .button{margin-left:0px;}
951 }
952 }
953 }
954
955 &:has(.tag-input){
956 display:inline-flex;
957 flex-wrap:wrap;
958 align-items:center;
959 gap:4px;
960 padding:0 4px;
961 border-radius:var(--border-radius);
962 box-shadow:0 0 0 transparent;
963 border:1px solid #8c8f94;
964 background-color:#fff;
965 color:#2c3338;
966
967 &:hover{
968 border-color:#2271b1;
969 box-shadow:0 0 0 1px #2271b1;
970 outline:2px solid transparent;
971 }
972
973 span.query-label{
974 flex-direction:row-reverse;
975 line-height:calc(var(--line-height) - 10px);
976 padding:0 4px 0 8px;
977 border-radius:1px;
978
979 span.dashicons{
980 margin-right:0;
981 margin-left:2px;
982
983 &:before{content:"\f335";}
984 }
985 }
986 }
987
988 input.tag-input{
989 &, &:focus{
990 border:0;
991 box-shadow:none;
992 padding:0;
993 outline:0;
994 min-height:calc(var(--line-height) - 2px);
995 }
996 }
997
998 span.query-label{
999 cursor:move;
1000
1001 ~ *{display:none;}
1002 }
1003 }
1004
1005 div.mu-fields{
1006 > .mu-item > .button{
1007 margin-left:80px;
1008
1009 &.new-item,
1010 fieldset.mu-item > &,
1011 .field-group.mu-item &{margin:0;}
1012 }
1013
1014 &[data-tag_label] > .mu-item{
1015 > .del-item, > .move-item, &:last-child{display:none;}
1016 }
1017
1018 &.direction-column > .mu-item{
1019 padding-bottom:6px;
1020
1021 &:not(.field-group){border-bottom:1px solid #E5E5E5;}
1022
1023 &:last-child{border-bottom:none;}
1024 }
1025 }
1026
1027 div.mu-img{
1028 max-width:720px;
1029
1030 > .mu-item{
1031 width:100px;
1032 height:100px;
1033 margin:10px 10px 10px 0;
1034 position:relative;
1035 cursor:move;
1036
1037 img{
1038 width:100px;
1039 height:100px !important;
1040 object-fit:cover;
1041 }
1042 }
1043
1044 .new-item{
1045 width:100px;
1046 height:100px;
1047 margin:0;
1048 color:#ccc;
1049 border:2px solid #ccc;
1050 border-radius:8px;
1051 position:relative;
1052
1053 &:before{
1054 content:"\f543";
1055 display:block;
1056 line-height:100px;
1057 font-family:dashicons;
1058 font-size:32px;
1059 text-align:center;
1060 }
1061
1062 button{
1063 position:absolute;
1064 top:2px;
1065 right:2px;
1066 min-width:0;
1067 padding:0;
1068 color:#ccc;
1069
1070 &:hover{color:#0073aa;}
1071 }
1072 }
1073 }
1074
1075 div.mu-select{
1076 display:inline-block;
1077
1078 fieldset{
1079 position-area: bottom span-left;
1080 position-try-fallbacks: flip-block;
1081 overflow-y:scroll;
1082 background-color:#f0f0f0;
1083 border:1px solid #ccc;
1084 box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);
1085 border-radius:6px;
1086 max-height:min(calc(100vh - 100px), 300px);
1087 padding:4px;
1088 gap:0;
1089
1090 &:not(:popover-open){display:none;}
1091
1092 label{
1093 white-space:nowrap;
1094 padding:4px 10px;
1095
1096 &:hover{
1097 border-radius:3px;
1098 background:#4488FF;
1099 color:#FFFFFF;
1100 }
1101 }
1102 }
1103
1104 button{
1105 cursor:pointer;
1106 text-align:left;
1107 color:#2c3338;
1108 border:1px solid #8c8f94;
1109 border-radius:3px;
1110 padding:0 12px;
1111 min-height:var(--line-height);
1112 background:#fff;
1113
1114 &:after{
1115 content:"\f347";
1116 display:inline-block;
1117 width:16px;
1118 height:16px;
1119 margin-left:10px;
1120 font-size:16px;
1121 font-family:dashicons;
1122 vertical-align:middle;
1123 }
1124
1125 &:focus, &:hover{
1126 border-color:#2271b1;
1127 color:#0a4b78;
1128 box-shadow:0 0 0 1px #2271b1;
1129 }
1130 }
1131 }
1132
1133 form table.form-table{
1134 tr > :only-child{
1135 padding:15px 10px 15px 0;
1136 }
1137
1138 a{
1139 text-decoration:none;
1140 }
1141
1142 .before{
1143 margin:0px;
1144
1145 p&{
1146 margin:0 0 4px 0;
1147 }
1148
1149 span&{
1150 margin:0 4px 0 0;
1151 }
1152 }
1153
1154 .after{
1155 margin:0px;
1156
1157 p&{
1158 margin:4px 0 0 0;
1159 }
1160
1161 span&{
1162 margin:0 0 0 4px;
1163 }
1164 }
1165
1166 .description{font-size:13px;}
1167
1168 fieldset{
1169 label.hidden{display:none}
1170
1171 .after, .description{margin-bottom:0.5em;}
1172 }
1173
1174 select{field-sizing:content;}
1175
1176 label:has(input:not([type=hidden]):not(.regular-text):not([type=checkbox])) + .description,
1177 input:not([type=hidden]):not(.regular-text) + .description{
1178 display:inline-block;
1179 margin-left:6px;
1180 }
1181 }
1182
1183 table.wp-list-table{
1184 thead th,
1185 tfoot th{
1186 white-space:nowrap;
1187 a{display:inline-flex;}
1188
1189 &.sortable,
1190 &.sorted{
1191 &:has(i){
1192 a{padding-right:0px;}
1193 i{padding-right:4px;}
1194 }
1195 }
1196 }
1197
1198
1199
1200 tbody tr{
1201 &:nth-child(1 of tr:has(span.move)) span.up,
1202 &:nth-last-child(1 of tr:has(span.move)) span.down,
1203 &:nth-child(1 of tr:has(span.move)):nth-last-child(1 of tr:has(span.move)) span.move,
1204 &:first-of-type span.up,
1205 &:last-of-type span.down,
1206 &:only-of-type span.move{
1207 display:none;
1208 }
1209
1210 &.pending > *{
1211 background-color:#f0f6fc;
1212 }
1213
1214 &.unapproved > *{
1215 background-color:#fcf9e8;
1216 }
1217
1218 table.striped &:nth-child(even){
1219 background-color:#ffffff;
1220 }
1221
1222 pre{
1223 white-space:pre-wrap;
1224 max-width:800px;
1225 margin-top:0;
1226 }
1227
1228 img.alignleft{
1229 margin-right:10px;
1230 margin-top:1px;
1231 }
1232
1233 .check-column{
1234 .dashicons{
1235 margin-left:6px;
1236 color:#999;
1237 font-size:16px;
1238 width:16px;
1239 height:16px;
1240 }
1241
1242 .spinner{
1243 margin:4px 0 0 0;
1244
1245 + input{display:none;}
1246 }
1247
1248 .pending &{
1249 border-left:4px solid #0073aa;
1250
1251 input{margin-left:4px;}
1252 }
1253
1254 .unapproved &{
1255 border-left:4px solid #d63638;
1256
1257 input{margin-left:4px;}
1258 }
1259
1260 .rejected &{
1261 border-left:4px solid #aa0000;
1262
1263 input{margin-left:4px;}
1264 }
1265 }
1266
1267 .approve,
1268 .audit,
1269 .publish{
1270 a{
1271 color:#007017;
1272 }
1273 }
1274
1275 .unapprove,
1276 .unpublish{
1277 a{
1278 color:#996800;
1279 }
1280 }
1281
1282 .ui-sortable-handle{
1283 cursor:move;
1284 }
1285
1286 .ui-sortable-helper{
1287 background-color:#eeffffcc;
1288 }
1289
1290 .wpjam-thumbnail-wrap{
1291 position:relative;
1292
1293 &:focus{
1294 outline:0;
1295 box-shadow:none;
1296 }
1297
1298 img, .no-thumbnail{
1299 float:left;
1300 margin:0px 10px 10px 0;
1301 border-radius:4px;
1302 border:1px solid #eee;
1303 }
1304
1305 .no-thumbnail{
1306 display:inline-block;
1307 text-align:center;
1308 font-size:12px;
1309 font-weight:100;
1310 width:50px;
1311 height:50px;
1312 line-height:50px;
1313 background:#eee;
1314 color:#555;
1315 }
1316
1317 &[data-action]:hover:after{
1318 content:"\f464";
1319 font-size:16px;
1320 font-family:dashicons;
1321 padding:2px;
1322 line-height:1;
1323 top:-4px;
1324 right:6px;
1325 position:absolute;
1326 border-radius:10px;
1327 color:#fff;
1328 background:#2271b1;
1329 opacity:0.8;
1330 }
1331 }
1332
1333 th:has(.wpjam-thumbnail-wrap) a{
1334 display:inline;
1335 }
1336
1337 div.items{
1338 .item{display:flex;}
1339
1340 .row-actions > span:not(:last-child){margin:0 3px;}
1341
1342 &.image-list{
1343 display:grid;
1344 grid-template-columns:repeat(var(--per-row, 4), auto);
1345 justify-content:start;
1346
1347 .item{
1348 width:var(--width, 100px);
1349 flex-direction:column;
1350 margin:10px 30px 20px 0;
1351 position:relative;
1352 text-align:center;
1353 font-size:smaller;
1354 }
1355
1356 .add-item{
1357 height:var(--height, 100px);
1358 margin:10px 0px 20px 0;
1359 background:#f9f9f966;
1360 border-radius:4px;
1361 border:1px solid #ccc;
1362 box-sizing:border-box;
1363 display:grid;
1364 place-items:center;
1365
1366 > .dashicons-plus-alt2{
1367 font-size:24px;
1368 width:24px;
1369 height:24px;
1370 color:#ccc;
1371 }
1372
1373 .striped > tbody > :nth-child(odd) &{background:#ffffff66;}
1374 }
1375 }
1376
1377 &.text-list .item{
1378 margin-bottom:10px;
1379 max-width:400px;
1380
1381 > a{
1382 display:inline-block;
1383 width:150px;
1384 margin-right:10px;
1385 vertical-align:middle;
1386 }
1387
1388 a.del-icon{
1389 top:inherit;
1390 right:inherit;
1391 }
1392 }
1393 }
1394
1395 div.news-items{
1396 width:360px;
1397 box-shadow:1px 1px 10px #CCC;
1398 border-radius:4px;
1399 margin-bottom:10px;
1400
1401 div.news-item:first-child:nth-last-child(1){
1402 position:inherit;
1403 padding-bottom:12px;
1404
1405 span.news-item-title{
1406 color:inherit;
1407 background:inherit;
1408 position:inherit;
1409 display:block;
1410 }
1411 }
1412
1413 div.big{
1414 position:relative;
1415
1416 span.news-item-title{
1417 font-size:16px;
1418 color:#fff;
1419 padding:12px;
1420 box-sizing:border-box;
1421 width:100%;
1422 bottom:0;
1423 left:0;
1424 background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));
1425 position:absolute;
1426 }
1427
1428 span.news-item-excerpt{
1429 display:block;
1430 box-sizing:border-box;
1431 width:100%;
1432 padding:12px;
1433 }
1434
1435 span.item-thumb{
1436 width:360px;
1437 height:150px;
1438 overflow:hidden;
1439
1440 img{border-radius:4px;}
1441 }
1442 }
1443
1444 div.small{
1445 padding:12px 12px 0 12px;
1446 display:flex;
1447 flex-direction:row-reverse;
1448 justify-content:space-between;
1449 width:100%;
1450 box-sizing:border-box;
1451
1452 span.news-item-title{
1453 width:260px;
1454 height:60px;
1455 display:flex;
1456 align-items:center;
1457 padding-bottom:12px;
1458 font-size:14px;
1459 border-bottom:1px solid #DDD;
1460
1461 div.small:last-child &{border-bottom:0;}
1462 }
1463
1464 span.item-thumb{
1465 width:60px;
1466 height:60px;
1467 overflow:hidden;
1468 }
1469 }
1470 }
1471
1472 @media(min-width:783px){
1473 .row-action{
1474 display:none;
1475
1476 tr:hover &{
1477 display:initial;
1478 }
1479 }
1480 }
1481 }
1482
1483 .dashicons, .dashicons-before:before, [class*=" ri-"], [class^=ri-]{
1484 width:16px;
1485 height:16px;
1486 font-size:16px;
1487 }
1488
1489 .column-no{width:42px;}
1490
1491 &.sticky-columns{
1492 display:block;
1493 max-height:min(var(--left-height, calc(100vh - 160px)), calc(100vh - 160px));
1494 overflow:scroll;
1495
1496 .sticky-column{
1497 position:sticky;
1498 z-index:2;
1499 background-color:inherit;
1500 }
1501
1502 thead, tfoot{
1503 position:sticky;
1504 z-index:3;
1505 top:0;
1506
1507 tr{background:#ffffff;}
1508 }
1509
1510 tfoot{bottom:0px;}
1511
1512 tr.summary-row{
1513 position:sticky;
1514 z-index:3;
1515 top:36px;
1516 }
1517 }
1518 }
1519
1520 .tablenav{
1521 &.top:has(.actions){
1522 height:auto;
1523 margin:0;
1524 }
1525
1526 .actions{
1527 > *{
1528 float:left;
1529 margin:0 6px 8px 0;
1530 }
1531
1532 > .overall-action{margin:0 10px 8px 0px;}
1533
1534 &:not(.alignleft) > #filter_action{margin-right:16px;}
1535
1536 .direction-row{
1537 gap:6px;
1538
1539 select{
1540 float:none;
1541 margin-right:0;
1542 }
1543 }
1544 }
1545
1546 .prev-day, .next-day{
1547 font-size:16px;
1548 line-height:1.625;
1549 color:initial;
1550 border-color:#8c8f94;
1551 }
1552 }
1553
1554 input.current-page{
1555 padding:0 8px;
1556
1557 &::-webkit-outer-spin-button,
1558 &::-webkit-inner-spin-button{
1559 -webkit-appearance:none;
1560 margin:0;
1561 }
1562 }
1563
1564 .layout-calendar{
1565 .tablenav.top{
1566 text-align:center;
1567 }
1568
1569 .tablenav-pages a.current-month{
1570 padding-left:20px;
1571 padding-right:20px;
1572 }
1573
1574 h2{
1575 font-size:2em;
1576 display:inline-block;
1577 margin:0 0 10px 0;
1578 line-height:30px;
1579 }
1580
1581 table{
1582 width:100%;
1583 margin:20px 0;
1584
1585 &.striped > tbody > tr{
1586 background-color:#ffffff;
1587 }
1588
1589 tr > *{
1590 border-right:1px solid #c3c4c7;
1591 border-bottom:1px solid #c3c4c7;
1592
1593 &:last-child{
1594 border-right:none;
1595 }
1596
1597 &.column-day0,
1598 &.column-day6{
1599 background:#f6f7f7;
1600 }
1601
1602 a{
1603 text-decoration:none;
1604 }
1605
1606 thead &,
1607 tfoot &{
1608 font-size:larger;
1609 font-weight:bold;
1610 }
1611
1612 tfoot &{
1613 border-bottom:none;
1614 }
1615
1616 tbody &{
1617 span.day{
1618 display:inline-block;
1619 width:20px;
1620 height:20px;
1621 line-height:20px;
1622 text-align:center;
1623
1624 &.today{
1625 color:#fff;
1626 border-radius:10px;
1627 background:red;
1628 }
1629 }
1630
1631 .date-meta{
1632 min-height:24px;
1633 }
1634
1635 a.list-table-action{
1636 display:none;
1637 }
1638
1639 &:hover a.list-table-action{
1640 display:inline-block;
1641 }
1642 }
1643 }
1644 }
1645 }
1646
1647 div#col-left{
1648 .tablenav .tablenav-pages{
1649 float:none;
1650 }
1651
1652 .left-item{
1653 cursor:pointer;
1654
1655 &.left-current{
1656 background-color:#f0f6fc;
1657 color:#3c434a;
1658 }
1659 }
1660
1661 span.left-pagination-links{
1662 display:flex;
1663 gap:4px;
1664 align-items:center;
1665 }
1666
1667 td{
1668 padding-left:14px;
1669 padding-right:20px;
1670
1671 a:focus{box-shadow:inherit;}
1672
1673 span.time{font-size:smaller;}
1674
1675 span.count{
1676 font-size:smaller;
1677 float:right;
1678 padding:2px 4px;
1679 margin-left:4px;
1680 }
1681 }
1682
1683 @media(min-width:783px){
1684 &:has(table){width:25%;}
1685
1686 &:has(table) ~ #col-right{width:75%}
1687 }
1688 }
1689
1690 div.tabs .nav-tab-wrapper{
1691 ul, li{margin:0;}
1692
1693 li > a:focus{box-shadow:none;}
1694
1695 li.ui-tabs-active > a{
1696 border-bottom:1px solid #f0f0f1;
1697 box-shadow:none;
1698 margin-bottom:-1px;
1699 background:none !important;
1700 color:#000;
1701 }
1702
1703 li.ui-state-hover > a{
1704 background-color:#fff;
1705 color:#3c434a;
1706 }
1707 }
1708
1709 div#poststuff{
1710 #normal-sortables{min-height:0;}
1711
1712 div#postexcerpt div.inside p{display:none;}
1713
1714 div.postbox{
1715 table.form-table{
1716 th{
1717 padding:12px 10px 12px 0;
1718 width:120px;
1719 }
1720
1721 td{padding:6px;}
1722 }
1723
1724 &.tabs table.form-table th{width:100px;}
1725 }
1726 }
1727
1728 .welcome-panel.wpjam-welcome-panel{
1729 background:#fff;
1730
1731 h2{font-size:32px;}
1732 }
1733
1734 @media screen and (max-width:782px){
1735 input.hidden{display:none !important;}
1736 }
1737
1738 @media screen and (min-width:783px){
1739 #adminmenu{
1740 .awaiting-mod, .update-plugins{
1741 line-height:18px;
1742 transform:scale(0.92);
1743 }
1744 }
1745
1746 .post-com-count-pending{
1747 line-height:20px !important;
1748 height:20px !important;
1749 left:-6px !important;
1750 border-radius:12px !important;
1751 min-width:10px !important;
1752 transform:scale(0.833333);
1753 }
1754
1755 div.wrap:has(p.search-box) ul.subsubsub{
1756 max-width:calc(100% - 280px);
1757 }
1758 }
1759