1/* 2 column liquid layout */
2#wpwrap {
3 height: auto;
4 min-height: 100%;
5 width: 100%;
6 position: relative;
7 -webkit-font-smoothing: subpixel-antialiased;
8}
9
10#wpcontent {
11 height: 100%;
12 padding-left: 20px;
13}
14
15#wpcontent,
16#wpfooter {
17 margin-left: 160px;
18}
19
20.folded #wpcontent,
21.folded #wpfooter {
22 margin-left: 36px;
23}
24
25#wpbody-content {
26 padding-bottom: 65px;
27 float: left;
28 width: 100%;
29 overflow: visible;
30}
31
32/* inner 2 column liquid layout */
33
34.inner-sidebar {
35 float: right;
36 clear: right;
37 display: none;
38 width: 281px;
39 position: relative;
40}
41
42.columns-2 .inner-sidebar {
43 margin-right: auto;
44 width: 286px;
45 display: block;
46}
47
48.inner-sidebar #side-sortables,
49.columns-2 .inner-sidebar #side-sortables {
50 min-height: 300px;
51 width: 280px;
52 padding: 0;
53}
54
55.has-right-sidebar .inner-sidebar {
56 display: block;
57}
58
59.has-right-sidebar #post-body {
60 float: left;
61 clear: left;
62 width: 100%;
63 margin-right: -2000px;
64}
65
66.has-right-sidebar #post-body-content {
67 margin-right: 300px;
68 float: none;
69 width: auto;
70}
71
72/* 2 columns main area */
73
74#col-left {
75 float: left;
76 width: 35%;
77}
78
79#col-right {
80 float: right;
81 width: 65%;
82}
83
84#col-left .col-wrap {
85 padding: 0 6px 0 0;
86}
87
88#col-right .col-wrap {
89 padding: 0 0 0 6px;
90}
91
92/* utility classes */
93.alignleft {
94 float: left;
95}
96
97.alignright {
98 float: right;
99}
100
101.textleft {
102 text-align: left;
103}
104
105.textright {
106 text-align: right;
107}
108
109.clear {
110 clear: both;
111}
112
113/* modern clearfix */
114.wp-clearfix:after {
115 content: "";
116 display: table;
117 clear: both;
118}
119
120/* Hide visually but not from screen readers */
121.screen-reader-text,
122.screen-reader-text span,
123.ui-helper-hidden-accessible {
124 border: 0;
125 clip-path: inset(50%);
126 height: 1px;
127 margin: -1px;
128 overflow: hidden;
129 padding: 0;
130 position: absolute;
131 width: 1px;
132 word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
133}
134
135.button .screen-reader-text {
136 height: auto; /* Fixes a Safari+VoiceOver bug, see ticket #42006 */
137}
138
139.screen-reader-text + .dashicons-external {
140 margin-top: -1px;
141 margin-left: 2px;
142}
143
144.screen-reader-shortcut {
145 position: absolute;
146 top: -1000em;
147 left: 6px;
148 height: auto;
149 width: auto;
150 display: block;
151 font-size: 14px;
152 font-weight: 600;
153 padding: 15px 23px 14px;
154 /* Background and color set to prevent false positives in automated accessibility tests. */
155 background: #f0f0f1;
156 color: #2271b1;
157 z-index: 100000;
158 line-height: normal;
159}
160
161.screen-reader-shortcut:focus {
162 top: -25px;
163 /* Overrides a:focus in the admin. See ticket #56789. */
164 color: #2271b1;
165 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
166 text-decoration: none;
167 /* Only visible in Windows High Contrast mode */
168 outline: 2px solid transparent;
169 outline-offset: -2px;
170}
171
172.hidden,
173.js .closed .inside,
174.js .hide-if-js,
175.no-js .hide-if-no-js,
176.js.wp-core-ui .hide-if-js,
177.js .wp-core-ui .hide-if-js,
178.no-js.wp-core-ui .hide-if-no-js,
179.no-js .wp-core-ui .hide-if-no-js {
180 display: none;
181}
182
183/* @todo: Take a second look. Large chunks of shared color, from the colors.css merge */
184.widget-top,
185.menu-item-handle,
186.widget-inside,
187#menu-settings-column .accordion-container,
188#menu-management .menu-edit,
189.manage-menus,
190table.widefat,
191.stuffbox,
192p.popular-tags,
193.widgets-holder-wrap,
194.wp-editor-container,
195.popular-tags,
196.feature-filter,
197.comment-ays {
198 border: 1px solid #c3c4c7;
199 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
200}
201
202table.widefat,
203.wp-editor-container,
204.stuffbox,
205p.popular-tags,
206.widgets-holder-wrap,
207.popular-tags,
208.feature-filter,
209.comment-ays {
210 background: #fff;
211}
212
213/* general */
214html,
215body {
216 height: 100%;
217 margin: 0;
218 padding: 0;
219}
220
221body {
222 background: #f0f0f1;
223 color: #3c434a;
224 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
225 font-size: 13px;
226 line-height: 1.4em;
227 min-width: 600px;
228}
229
230body.iframe {
231 min-width: 0;
232 padding-top: 1px;
233}
234
235body.modal-open {
236 overflow: hidden;
237}
238
239body.mobile.modal-open #wpwrap {
240 overflow: hidden;
241 position: fixed;
242 height: 100%;
243}
244
245iframe,
246img {
247 border: 0;
248}
249
250td {
251 font-family: inherit;
252 font-size: inherit;
253 font-weight: inherit;
254 line-height: inherit;
255}
256
257/* Any change to the default link style must be applied to button-link too. */
258a {
259 color: #2271b1;
260 transition-property: border, background, color;
261 transition-duration: .05s;
262 transition-timing-function: ease-in-out;
263}
264
265a,
266div {
267 outline: 0;
268}
269
270a:hover,
271a:active {
272 color: #135e96;
273}
274
275a:focus,
276a:focus .media-icon img,
277a:focus .plugin-icon,
278.wp-person a:focus .gravatar {
279 color: #043959;
280 box-shadow: 0 0 0 2px #2271b1;
281 /* Only visible in Windows High Contrast mode */
282 outline: 2px solid transparent;
283}
284
285#adminmenu a:focus {
286 box-shadow: none;
287 /* Only visible in Windows High Contrast mode */
288 outline: 1px solid transparent;
289 outline-offset: -1px;
290}
291
292.screen-reader-text:focus {
293 box-shadow: none;
294 outline: none;
295}
296
297blockquote,
298q {
299 quotes: none;
300}
301
302blockquote:before,
303blockquote:after,
304q:before,
305q:after {
306 content: "";
307 content: none;
308}
309
310p,
311.wp-die-message {
312 font-size: 13px;
313 line-height: 1.5;
314 margin: 1em 0;
315}
316
317blockquote {
318 margin: 1em;
319}
320
321li,
322dd {
323 margin-bottom: 6px;
324}
325
326h1,
327h2,
328h3,
329h4,
330h5,
331h6 {
332 display: block;
333 font-weight: 600;
334}
335
336h1 {
337 color: #1d2327;
338 font-size: 2em;
339 margin: .67em 0;
340}
341
342h2,
343h3 {
344 color: #1d2327;
345 font-size: 1.3em;
346 margin: 1em 0;
347}
348
349.update-core-php h2 {
350 margin-top: 4em;
351}
352
353.update-php h2,
354.update-messages h2,
355h4 {
356 font-size: 1em;
357 margin: 1.33em 0;
358}
359
360h5 {
361 font-size: 0.83em;
362 margin: 1.67em 0;
363}
364
365h6 {
366 font-size: 0.67em;
367 margin: 2.33em 0;
368}
369
370ul,
371ol {
372 padding: 0;
373}
374
375ul {
376 list-style: none;
377}
378
379ol {
380 list-style-type: decimal;
381 margin-left: 2em;
382}
383
384ul.ul-disc {
385 list-style: disc outside;
386}
387
388ul.ul-square {
389 list-style: square outside;
390}
391
392ol.ol-decimal {
393 list-style: decimal outside;
394}
395
396ul.ul-disc,
397ul.ul-square,
398ol.ol-decimal {
399 margin-left: 1.8em;
400}
401
402ul.ul-disc > li,
403ul.ul-square > li,
404ol.ol-decimal > li {
405 margin: 0 0 0.5em;
406}
407
408/* rtl:ignore */
409.ltr {
410 direction: ltr;
411}
412
413/* rtl:ignore */
414.code,
415code {
416 font-family: Consolas, Monaco, monospace;
417 direction: ltr;
418 unicode-bidi: embed;
419}
420
421kbd,
422code {
423 padding: 3px 5px 2px;
424 margin: 0 1px;
425 background: #f0f0f1;
426 background: rgba(0, 0, 0, 0.07);
427 font-size: 13px;
428}
429
430.subsubsub {
431 list-style: none;
432 margin: 8px 0 0;
433 padding: 0;
434 font-size: 13px;
435 float: left;
436 color: #646970;
437}
438
439.subsubsub a {
440 line-height: 2;
441 padding: .2em;
442 text-decoration: none;
443}
444
445.subsubsub a .count,
446.subsubsub a.current .count {
447 color: #50575e; /* #f1f1f1 background */
448 font-weight: 400;
449}
450
451.subsubsub a.current {
452 font-weight: 600;
453 border: none;
454}
455
456.subsubsub li {
457 display: inline-block;
458 margin: 0;
459 padding: 0;
460 white-space: nowrap;
461}
462
463/* .widefat - main style for tables */
464.widefat {
465 border-spacing: 0;
466 width: 100%;
467 clear: both;
468 margin: 0;
469}
470
471.widefat * {
472 word-wrap: break-word;
473}
474
475.widefat a,
476.widefat button.button-link {
477 text-decoration: none;
478}
479
480.widefat td,
481.widefat th {
482 padding: 8px 10px;
483}
484
485.widefat thead th,
486.widefat thead td {
487 border-bottom: 1px solid #c3c4c7;
488}
489
490.widefat tfoot th,
491.widefat tfoot td {
492 border-top: 1px solid #c3c4c7;
493 border-bottom: none;
494}
495
496.widefat .no-items td {
497 border-bottom-width: 0;
498}
499
500.widefat td {
501 vertical-align: top;
502}
503
504.widefat td,
505.widefat td p,
506.widefat td ol,
507.widefat td ul {
508 font-size: 13px;
509 line-height: 1.5em;
510}
511
512.widefat th,
513.widefat thead td,
514.widefat tfoot td {
515 text-align: left;
516 line-height: 1.3em;
517 font-size: 14px;
518}
519
520.widefat th input,
521.updates-table td input,
522.widefat thead td input,
523.widefat tfoot td input {
524 margin: 0 0 0 8px;
525 padding: 0;
526 vertical-align: text-top;
527}
528
529.widefat .check-column {
530 width: 2.2em;
531 padding: 6px 0 25px;
532 vertical-align: top;
533}
534
535.widefat tbody th.check-column {
536 padding: 9px 0 22px;
537}
538
539.widefat thead td.check-column,
540.widefat tbody th.check-column,
541.updates-table tbody td.check-column,
542.widefat tfoot td.check-column {
543 padding: 11px 0 0 3px;
544}
545
546.widefat thead td.check-column,
547.widefat tfoot td.check-column {
548 padding-top: 4px;
549 vertical-align: middle;
550}
551
552.update-php div.updated,
553.update-php div.error {
554 margin-left: 0;
555}
556
557.js-update-details-toggle .dashicons {
558 text-decoration: none;
559}
560
561.js-update-details-toggle[aria-expanded="true"] .dashicons::before {
562 content: "\f142";
563 content: "\f142" / '';
564}
565
566.no-js .widefat thead .check-column input,
567.no-js .widefat tfoot .check-column input {
568 display: none;
569}
570
571.widefat .num,
572.column-comments,
573.column-links,
574.column-posts {
575 text-align: center;
576}
577
578.widefat th#comments {
579 vertical-align: middle;
580}
581
582.wrap {
583 margin: 10px 20px 0 2px;
584}
585
586.wrap > h2:first-child, /* Back-compat for pre-4.4 */
587.wrap [class$="icon32"] + h2, /* Back-compat for pre-4.4 */
588.postbox .inside h2, /* Back-compat for pre-4.4 */
589.wrap h1 {
590 font-size: 23px;
591 font-weight: 400;
592 margin: 0;
593 padding: 9px 0 4px;
594 line-height: 1.3;
595}
596
597.wrap h1.wp-heading-inline {
598 display: inline-block;
599 margin-right: 5px;
600}
601
602.wp-header-end {
603 visibility: hidden;
604 margin: -2px 0 0;
605}
606
607.subtitle {
608 margin: 0;
609 padding-left: 25px;
610 color: #50575e;
611 font-size: 14px;
612 font-weight: 400;
613 line-height: 1;
614}
615
616.subtitle strong {
617 word-break: break-all;
618}
619
620.wrap .add-new-h2, /* deprecated */
621.wrap .add-new-h2:active, /* deprecated */
622.wrap .page-title-action,
623.wrap .page-title-action:active {
624 display: inline-block;
625 position: relative;
626 box-sizing: border-box;
627 cursor: pointer;
628 white-space: nowrap;
629 text-decoration: none;
630 text-shadow: none;
631 top: -3px;
632 margin-left: 4px;
633 border: 1px solid #2271b1;
634 border-radius: 3px;
635 background: #f6f7f7;
636 font-size: 13px;
637 font-weight: 400;
638 line-height: 2.15384615;
639 color: #2271b1; /* use the standard color used for buttons */
640 padding: 0 10px;
641 min-height: 30px;
642 -webkit-appearance: none;
643
644}
645
646.wrap .wp-heading-inline + .page-title-action {
647 margin-left: 0;
648}
649
650.wrap .add-new-h2:hover, /* deprecated */
651.wrap .page-title-action:hover {
652 background: #f0f0f1;
653 border-color: #0a4b78;
654 color: #0a4b78;
655}
656
657/* lower specificity: color needs to be overridden by :hover and :active */
658.page-title-action:focus {
659 color: #0a4b78;
660}
661
662/* Dashicon for language options on General Settings and Profile screens */
663.form-table th label[for="locale"] .dashicons,
664.form-table th label[for="WPLANG"] .dashicons {
665 margin-left: 5px;
666}
667
668.wrap .page-title-action:focus {
669 border-color: #3582c4;
670 box-shadow: 0 0 0 1px #3582c4;
671 /* Only visible in Windows High Contrast mode */
672 outline: 2px solid transparent;
673}
674
675.wrap h1.long-header {
676 padding-right: 0;
677}
678
679.wp-dialog {
680 background-color: #fff;
681}
682
683.widgets-chooser ul,
684#widgets-left .widget-in-question .widget-top,
685#available-widgets .widget-top:hover,
686div#widgets-right .widget-top:hover,
687#widgets-left .widget-top:hover {
688 border-color: #8c8f94;
689 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
690}
691
692.sorthelper {
693 background-color: #c5d9ed;
694}
695
696.ac_match,
697.subsubsub a.current {
698 color: #000;
699}
700
701.striped > tbody > :nth-child(odd),
702ul.striped > :nth-child(odd),
703.alternate {
704 background-color: #f6f7f7;
705}
706
707.bar {
708 background-color: #f0f0f1;
709 border-right-color: #4f94d4;
710}
711
712/* Helper classes for plugins to leverage the active WordPress color scheme */
713
714.highlight {
715 background-color: #f0f6fc;
716 color: #3c434a;
717}
718
719.wp-ui-primary {
720 color: #fff;
721 background-color: #2c3338;
722}
723.wp-ui-text-primary {
724 color: #2c3338;
725}
726
727.wp-ui-highlight {
728 color: #fff;
729 background-color: #2271b1;
730}
731.wp-ui-text-highlight {
732 color: #2271b1;
733}
734
735.wp-ui-notification {
736 color: #fff;
737 background-color: #d63638;
738}
739.wp-ui-text-notification {
740 color: #d63638;
741}
742
743.wp-ui-text-icon {
744 color: #8c8f94; /* same as new icons */
745}
746
747/* For emoji replacement images */
748img.emoji {
749 display: inline !important;
750 border: none !important;
751 height: 1em !important;
752 width: 1em !important;
753 margin: 0 .07em !important;
754 vertical-align: -0.1em !important;
755 background: none !important;
756 padding: 0 !important;
757 box-shadow: none !important;
758}
759
760/*------------------------------------------------------------------------------
761 1.0 - Text Styles
762------------------------------------------------------------------------------*/
763
764.widget .widget-top,
765.postbox .hndle,
766.stuffbox .hndle,
767.control-section .accordion-section-title,
768.sidebar-name,
769#nav-menu-header,
770#nav-menu-footer,
771.menu-item-handle,
772.checkbox,
773.side-info,
774#your-profile #rich_editing,
775.widefat thead th,
776.widefat thead td,
777.widefat tfoot th,
778.widefat tfoot td {
779 line-height: 1.4em;
780}
781
782.widget .widget-top,
783.menu-item-handle {
784 background: #f6f7f7;
785 color: #1d2327;
786}
787
788.stuffbox .hndle {
789 border-bottom: 1px solid #c3c4c7;
790}
791
792.quicktags {
793 background-color: #c3c4c7;
794 color: #000;
795 font-size: 12px;
796}
797
798.icon32 {
799 display: none;
800}
801
802/* @todo can we combine these into a class or use an existing dashicon one? */
803.welcome-panel .welcome-panel-close:before,
804.tagchecklist .ntdelbutton .remove-tag-icon:before,
805#bulk-titles .ntdelbutton:before,
806.notice-dismiss:before {
807 background: none;
808 color: #787c82;
809 content: "\f153";
810 content: "\f153" / '';
811 display: block;
812 font: normal 16px/20px dashicons;
813 height: 20px;
814 text-align: center;
815 width: 20px;
816 -webkit-font-smoothing: antialiased;
817 -moz-osx-font-smoothing: grayscale;
818}
819
820.welcome-panel .welcome-panel-close:before {
821 margin: 0;
822}
823
824.tagchecklist .ntdelbutton .remove-tag-icon:before {
825 margin-left: 2px;
826 border-radius: 50%;
827 color: #2271b1;
828 /* vertically center the icon cross browsers */
829 line-height: 1.28;
830}
831
832.tagchecklist .ntdelbutton:focus {
833 outline: 0;
834}
835
836.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
837.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
838#bulk-titles .ntdelbutton:hover:before,
839#bulk-titles .ntdelbutton:focus:before {
840 color: #d63638;
841}
842
843.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
844 box-shadow: 0 0 0 2px #2271b1;
845 /* Only visible in Windows High Contrast mode */
846 outline: 2px solid transparent;
847}
848
849.key-labels label {
850 line-height: 24px;
851}
852
853strong, b {
854 font-weight: 600;
855}
856
857.pre {
858 /* https://developer.mozilla.org/en-US/docs/CSS/white-space */
859 white-space: pre-wrap; /* css-3 */
860 word-wrap: break-word; /* IE 5.5 - 7 */
861}
862
863.howto {
864 color: #646970;
865 display: block;
866}
867
868p.install-help {
869 margin: 8px 0;
870 font-style: italic;
871}
872
873.no-break {
874 white-space: nowrap;
875}
876
877hr {
878 border: 0;
879 border-top: 1px solid #dcdcde;
880 border-bottom: 1px solid #f6f7f7;
881}
882
883.row-actions span.delete a,
884.row-actions span.trash a,
885.row-actions span.spam a,
886.plugins a.delete,
887#all-plugins-table .plugins a.delete,
888#search-plugins-table .plugins a.delete,
889.submitbox .submitdelete,
890#media-items a.delete,
891#media-items a.delete-permanently,
892#nav-menu-footer .menu-delete,
893#delete-link a.delete,
894a#remove-post-thumbnail,
895.privacy_requests .remove-personal-data .remove-personal-data-handle {
896 color: #b32d2e;
897}
898
899abbr.required,
900span.required,
901.file-error,
902.row-actions .delete a:hover,
903.row-actions .trash a:hover,
904.row-actions .spam a:hover,
905.plugins a.delete:hover,
906#all-plugins-table .plugins a.delete:hover,
907#search-plugins-table .plugins a.delete:hover,
908.submitbox .submitdelete:hover,
909#media-items a.delete:hover,
910#media-items a.delete-permanently:hover,
911#nav-menu-footer .menu-delete:hover,
912#delete-link a.delete:hover,
913a#remove-post-thumbnail:hover,
914.privacy_requests .remove-personal-data .remove-personal-data-handle:hover {
915 color: #b32d2e;
916 border: none;
917}
918
919.application-password-display .success {
920 color: #007017;
921 margin-left: 0.5rem;
922}
923
924/*------------------------------------------------------------------------------
925 3.0 - Actions
926------------------------------------------------------------------------------*/
927
928#major-publishing-actions {
929 padding: 10px;
930 clear: both;
931 border-top: 1px solid #dcdcde;
932 background: #f6f7f7;
933}
934
935#delete-action {
936 float: left;
937 line-height: 2.30769231; /* 30px */
938}
939
940#delete-link {
941 line-height: 2.30769231; /* 30px */
942 vertical-align: middle;
943 text-align: left;
944 margin-left: 8px;
945}
946
947#delete-link a {
948 text-decoration: none;
949}
950
951#publishing-action {
952 text-align: right;
953 float: right;
954 line-height: 1.9;
955}
956
957#publishing-action .spinner {
958 float: none;
959 margin-top: 5px;
960}
961
962#misc-publishing-actions {
963 padding: 6px 0 0;
964}
965
966.misc-pub-section {
967 padding: 6px 10px 8px;
968}
969
970.word-wrap-break-word,
971.misc-pub-filename {
972 word-wrap: break-word;
973}
974
975#minor-publishing-actions {
976 padding: 10px 10px 0;
977 text-align: right;
978}
979
980#save-post {
981 float: left;
982}
983
984.preview {
985 float: right;
986}
987
988#sticky-span {
989 margin-left: 18px;
990}
991
992.approve,
993.unapproved .unapprove {
994 display: none;
995}
996
997.unapproved .approve,
998.spam .approve,
999.trash .approve {
1000 display: inline;
1001}
1002
1003td.action-links,
1004th.action-links {
1005 text-align: right;
1006}
1007
1008#misc-publishing-actions .notice {
1009 margin-left: 10px;
1010 margin-right: 10px;
1011}
1012
1013/* Filter bar */
1014.wp-filter {
1015 display: inline-block;
1016 position: relative;
1017 box-sizing: border-box;
1018 margin: 12px 0 25px;
1019 padding: 0 10px;
1020 width: 100%;
1021 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1022 border: 1px solid #c3c4c7;
1023 background: #fff;
1024 color: #50575e;
1025 font-size: 13px;
1026}
1027
1028.wp-filter a {
1029 text-decoration: none;
1030}
1031
1032.filter-count {
1033 display: inline-block;
1034 vertical-align: middle;
1035 min-width: 4em;
1036}
1037
1038.title-count,
1039.filter-count .count {
1040 display: inline-block;
1041 position: relative;
1042 top: -1px;
1043 padding: 4px 10px;
1044 border-radius: 30px;
1045 background: #646970;
1046 color: #fff;
1047 font-size: 14px;
1048 font-weight: 600;
1049}
1050
1051/* not a part of filter bar, but derived from it, so here for now */
1052.title-count {
1053 display: inline;
1054 top: -3px;
1055 margin-left: 5px;
1056 margin-right: 20px;
1057}
1058
1059.filter-items {
1060 float: left;
1061}
1062
1063.filter-links {
1064 display: inline-block;
1065 margin: 0;
1066}
1067
1068.filter-links li {
1069 display: inline-block;
1070 margin: 0;
1071}
1072
1073.filter-links li > a {
1074 display: inline-block;
1075 margin: 0 10px;
1076 padding: 15px 0;
1077 border-bottom: 4px solid #fff;
1078 color: #646970;
1079 cursor: pointer;
1080}
1081
1082.filter-links .current {
1083 box-shadow: none;
1084 border-bottom: 4px solid #646970;
1085 color: #1d2327;
1086}
1087
1088.filter-links li > a:hover,
1089.filter-links li > a:focus,
1090.show-filters .filter-links a.current:hover,
1091.show-filters .filter-links a.current:focus {
1092 color: #135e96;
1093}
1094
1095.wp-filter .search-form {
1096 float: right;
1097 display: flex;
1098 align-items: center;
1099 column-gap: .5rem;
1100}
1101
1102.wp-filter .search-form input[type="search"] {
1103 width: 280px;
1104 max-width: 100%;
1105}
1106
1107.wp-filter .search-form select {
1108 margin: 0;
1109}
1110
1111/* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */
1112.plugin-install-php .wp-filter {
1113 display: flex;
1114 flex-wrap: wrap;
1115 justify-content: space-between;
1116 align-items: center;
1117}
1118
1119.wp-filter .search-form.search-plugins select,
1120.wp-filter .search-form.search-plugins .wp-filter-search,
1121.no-js .wp-filter .search-form.search-plugins .button {
1122 display: inline-block;
1123 vertical-align: top;
1124}
1125
1126.wp-filter .button.drawer-toggle {
1127 margin: 10px 9px 0;
1128 padding: 0 10px 0 6px;
1129 border-color: transparent;
1130 background-color: transparent;
1131 color: #646970;
1132 vertical-align: baseline;
1133 box-shadow: none;
1134}
1135
1136.wp-filter .drawer-toggle:before {
1137 content: "\f111";
1138 content: "\f111" / '';
1139 margin: 0 5px 0 0;
1140 color: #646970;
1141 font: normal 16px/1 dashicons;
1142 vertical-align: text-bottom;
1143 -webkit-font-smoothing: antialiased;
1144 -moz-osx-font-smoothing: grayscale;
1145}
1146
1147.wp-filter .button.drawer-toggle:hover,
1148.wp-filter .drawer-toggle:hover:before,
1149.wp-filter .button.drawer-toggle:focus,
1150.wp-filter .drawer-toggle:focus:before {
1151 background-color: transparent;
1152 color: #135e96;
1153}
1154
1155.wp-filter .button.drawer-toggle:hover,
1156.wp-filter .button.drawer-toggle:focus:active {
1157 border-color: transparent;
1158}
1159
1160.wp-filter .button.drawer-toggle:focus {
1161 border-color: #4f94d4;
1162}
1163
1164.wp-filter .button.drawer-toggle:active {
1165 background: transparent;
1166 box-shadow: none;
1167 transform: none;
1168}
1169
1170.wp-filter .drawer-toggle.current:before {
1171 color: #fff;
1172}
1173
1174.filter-drawer,
1175.wp-filter .favorites-form {
1176 display: none;
1177 margin: 0 -10px 0 -20px;
1178 padding: 20px;
1179 border-top: 1px solid #f0f0f1;
1180 background: #f6f7f7;
1181 overflow: hidden;
1182}
1183
1184.wp-filter .favorites-form .favorites-username {
1185 display: flex;
1186 align-items: center;
1187 flex-wrap: wrap;
1188 gap: 0.5rem;
1189}
1190
1191.wp-filter .favorites-form .favorites-username input {
1192 margin: 0;
1193}
1194
1195.show-filters .filter-drawer,
1196.show-favorites-form .favorites-form {
1197 display: block;
1198}
1199
1200.show-filters .filter-links a.current {
1201 border-bottom: none;
1202}
1203
1204.show-filters .wp-filter .button.drawer-toggle {
1205 border-radius: 2px;
1206 background: #646970;
1207 color: #fff;
1208}
1209
1210.show-filters .wp-filter .drawer-toggle:hover,
1211.show-filters .wp-filter .drawer-toggle:focus {
1212 background: #2271b1;
1213}
1214
1215.show-filters .wp-filter .drawer-toggle:before {
1216 color: #fff;
1217}
1218
1219.filter-group {
1220 box-sizing: border-box;
1221 position: relative;
1222 float: left;
1223 margin: 0 1% 0 0;
1224 padding: 20px 10px 10px;
1225 width: 24%;
1226 background: #fff;
1227 border: 1px solid #dcdcde;
1228 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1229}
1230
1231.filter-group legend {
1232 position: absolute;
1233 top: 10px;
1234 display: block;
1235 margin: 0;
1236 padding: 0;
1237 font-size: 1em;
1238 font-weight: 600;
1239}
1240
1241.filter-drawer .filter-group-feature {
1242 margin: 28px 0 0;
1243 list-style-type: none;
1244 font-size: 12px;
1245}
1246
1247.filter-drawer .filter-group-feature input,
1248.filter-drawer .filter-group-feature label {
1249 line-height: 1.4;
1250}
1251
1252.filter-drawer .filter-group-feature input {
1253 position: absolute;
1254 margin: 0;
1255}
1256
1257.filter-group .filter-group-feature label {
1258 display: block;
1259 margin: 14px 0 14px 23px;
1260}
1261
1262.filter-drawer .buttons {
1263 clear: both;
1264 margin-bottom: 20px;
1265}
1266
1267.filter-drawer .filter-group + .buttons {
1268 margin-bottom: 0;
1269 padding-top: 20px;
1270}
1271
1272.filter-drawer .buttons .button span {
1273 display: inline-block;
1274 opacity: 0.8;
1275 font-size: 12px;
1276 text-indent: 10px;
1277}
1278
1279.wp-filter .button.clear-filters {
1280 display: none;
1281 margin-left: 10px;
1282}
1283
1284.wp-filter .button-link.edit-filters {
1285 padding: 0 5px;
1286 line-height: 2.2;
1287}
1288
1289.filtered-by {
1290 display: none;
1291 margin: 0;
1292}
1293
1294.filtered-by > span {
1295 font-weight: 600;
1296}
1297
1298.filtered-by a {
1299 margin-left: 10px;
1300}
1301
1302.filtered-by .tags {
1303 display: flex;
1304 align-items: flex-start;
1305 flex-wrap: wrap;
1306 gap: 8px;
1307}
1308
1309.filtered-by .tag {
1310 padding: 4px 8px;
1311 border: 1px solid #dcdcde;
1312 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1313 background: #fff;
1314 font-size: 11px;
1315}
1316
1317.filters-applied .filter-group,
1318.filters-applied .filter-drawer .buttons,
1319.filters-applied .filter-drawer br {
1320 display: none;
1321}
1322
1323.filters-applied .filtered-by {
1324 display: flex;
1325 align-items: center;
1326 flex-wrap: wrap;
1327 gap: 10px;
1328}
1329
1330.filters-applied .filter-drawer {
1331 padding: 20px;
1332}
1333
1334.show-filters .favorites-form,
1335.show-filters .content-filterable,
1336.show-filters.filters-applied.loading-content .content-filterable,
1337.loading-content .content-filterable,
1338.error .content-filterable {
1339 display: none;
1340}
1341
1342.show-filters.filters-applied .content-filterable {
1343 display: block;
1344}
1345
1346.loading-content .spinner {
1347 display: block;
1348 margin: 40px auto 0;
1349 float: none;
1350}
1351
1352@media only screen and (max-width: 1138px) {
1353 .wp-filter .search-form {
1354 margin: 11px 0;
1355 }
1356}
1357
1358@media only screen and (max-width: 1120px) {
1359 .filter-drawer {
1360 border-bottom: 1px solid #f0f0f1;
1361 }
1362
1363 .filter-group {
1364 margin-bottom: 0;
1365 margin-top: 5px;
1366 width: 100%;
1367 }
1368
1369 .filter-group li {
1370 margin: 10px 0;
1371 }
1372}
1373
1374@media only screen and (max-width: 1000px) {
1375 .filter-items {
1376 float: none;
1377 }
1378
1379 .wp-filter .media-toolbar-primary,
1380 .wp-filter .media-toolbar-secondary,
1381 .wp-filter .search-form {
1382 float: none; /* Remove float from media-views.css */
1383 position: relative;
1384 max-width: 100%;
1385 }
1386 .wp-filter .search-form {
1387 margin: 11px 0;
1388 flex-wrap: wrap;
1389 row-gap: 10px;
1390 }
1391}
1392
1393@media only screen and (max-width: 782px) {
1394 .filter-group li {
1395 padding: 0;
1396 width: 50%;
1397 }
1398}
1399
1400@media only screen and (max-width: 320px) {
1401 .filter-count {
1402 display: none;
1403 }
1404
1405 .wp-filter .drawer-toggle {
1406 margin: 10px 0;
1407 }
1408
1409 .filter-group li,
1410 .wp-filter .search-form input[type="search"] {
1411 width: 100%;
1412 }
1413}
1414
1415/*------------------------------------------------------------------------------
1416 4.0 - Notifications
1417------------------------------------------------------------------------------*/
1418
1419.notice,
1420div.updated,
1421div.error {
1422 background: #fff;
1423 border: 1px solid #c3c4c7;
1424 border-left-width: 4px;
1425 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1426 margin: 5px 15px 2px;
1427 padding: 1px 12px;
1428}
1429
1430div[class="update-message"] { /* back-compat for pre-4.6 */
1431 padding: 0.5em 12px 0.5em 0;
1432}
1433
1434.notice p,
1435.notice-title,
1436div.updated p,
1437div.error p,
1438.form-table td .notice p {
1439 margin: 0.5em 0;
1440 padding: 2px;
1441}
1442
1443.error a {
1444 text-decoration: underline;
1445}
1446
1447.updated a {
1448 padding-bottom: 2px;
1449}
1450
1451.notice-alt {
1452 box-shadow: none;
1453}
1454
1455.notice-large {
1456 padding: 10px 20px;
1457}
1458
1459.notice-title {
1460 display: inline-block;
1461 color: #1d2327;
1462 font-size: 18px;
1463}
1464
1465.wp-core-ui .notice.is-dismissible {
1466 padding-right: 38px;
1467 position: relative;
1468}
1469
1470.notice-dismiss {
1471 position: absolute;
1472 top: 0;
1473 right: 1px;
1474 border: none;
1475 margin: 0;
1476 padding: 9px;
1477 background: none;
1478 color: #787c82;
1479 cursor: pointer;
1480}
1481
1482.notice-dismiss:hover:before,
1483.notice-dismiss:active:before,
1484.notice-dismiss:focus:before {
1485 color: #d63638;
1486}
1487
1488.notice-dismiss:focus {
1489 box-shadow: 0 0 0 2px #2271b1;
1490 /* Only visible in Windows High Contrast mode */
1491 outline: 2px solid transparent;
1492}
1493
1494.notice-success,
1495div.updated {
1496 border-left-color: #00a32a;
1497}
1498
1499.notice-success.notice-alt {
1500 background-color: #edfaef;
1501}
1502
1503.notice-warning {
1504 border-left-color: #dba617;
1505}
1506
1507.notice-warning.notice-alt {
1508 background-color: #fcf9e8;
1509}
1510
1511.notice-error,
1512div.error {
1513 border-left-color: #d63638;
1514}
1515
1516.notice-error.notice-alt {
1517 background-color: #fcf0f1;
1518}
1519
1520.notice-info {
1521 border-left-color: #72aee6;
1522}
1523
1524.notice-info.notice-alt {
1525 background-color: #f0f6fc;
1526}
1527
1528#plugin-information-footer .update-now:not(.button-disabled):before {
1529 color: #d63638;
1530 content: "\f463";
1531 content: "\f463" / '';
1532 display: inline-block;
1533 font: normal 20px/1 dashicons;
1534 margin: -3px 5px 0 -2px;
1535 -webkit-font-smoothing: antialiased;
1536 -moz-osx-font-smoothing: grayscale;
1537 vertical-align: middle;
1538}
1539
1540#plugin-information-footer .notice {
1541 margin-top: -5px;
1542}
1543
1544.update-message p:before,
1545.updating-message p:before,
1546.updated-message p:before,
1547.import-php .updating-message:before,
1548.button.updating-message:before,
1549.button.updated-message:before,
1550.button.installed:before,
1551.button.installing:before,
1552.button.activating-message:before,
1553.button.activated-message:before {
1554 display: inline-block;
1555 font: normal 20px/1 'dashicons';
1556 -webkit-font-smoothing: antialiased;
1557 -moz-osx-font-smoothing: grayscale;
1558 vertical-align: top;
1559}
1560
1561.wrap .notice,
1562.wrap div.updated,
1563.wrap div.error,
1564.media-upload-form .notice,
1565.media-upload-form div.error {
1566 margin: 5px 0 15px;
1567}
1568
1569.wrap #templateside .notice {
1570 display: block;
1571 margin: 0;
1572 padding: 5px 8px;
1573 font-weight: 600;
1574 text-decoration: none;
1575}
1576
1577.wrap #templateside span.notice {
1578 margin-left: -12px;
1579}
1580
1581#templateside li.notice a {
1582 padding: 0;
1583}
1584
1585/* Update icon. */
1586.update-message p:before,
1587.updating-message p:before,
1588.import-php .updating-message:before,
1589.button.updating-message:before,
1590.button.installing:before,
1591.button.activating-message:before {
1592 color: #d63638;
1593 content: "\f463";
1594 content: "\f463" / '';
1595}
1596
1597/* Spins the update icon. */
1598.updating-message p:before,
1599.import-php .updating-message:before,
1600.button.updating-message:before,
1601.button.installing:before,
1602.button.activating-message:before,
1603.plugins .column-auto-updates .dashicons-update.spin,
1604.theme-overlay .theme-autoupdate .dashicons-update.spin {
1605 animation: rotation 2s infinite linear;
1606}
1607
1608@media (prefers-reduced-motion: reduce) {
1609 .updating-message p:before,
1610 .import-php .updating-message:before,
1611 .button.updating-message:before,
1612 .button.installing:before,
1613 .button.activating-message:before,
1614 .plugins .column-auto-updates .dashicons-update.spin,
1615 .theme-overlay .theme-autoupdate .dashicons-update.spin {
1616 animation: none;
1617 }
1618}
1619
1620.theme-overlay .theme-autoupdate .dashicons-update.spin {
1621 margin-right: 3px;
1622}
1623
1624/* Updated icon (check mark). */
1625.updated-message p:before,
1626.installed p:before,
1627.button.updated-message:before,
1628.button.activated-message:before {
1629 color: #68de7c;
1630 content: "\f147";
1631 content: "\f147" / '';
1632}
1633
1634/* Error icon. */
1635.update-message.notice-error p:before {
1636 color: #d63638;
1637 content: "\f534";
1638 content: "\f534" / '';
1639}
1640
1641.wrap .notice p:before,
1642.import-php .updating-message:before {
1643 margin-right: 6px;
1644}
1645
1646.import-php .updating-message:before {
1647 vertical-align: bottom;
1648}
1649
1650#update-nag,
1651.update-nag {
1652 display: inline-block;
1653 line-height: 1.4;
1654 padding: 11px 15px;
1655 font-size: 14px;
1656 margin: 25px 20px 0 2px;
1657}
1658
1659ul#dismissed-updates {
1660 display: none;
1661}
1662
1663#dismissed-updates li > p {
1664 margin-top: 0;
1665}
1666
1667#dismiss,
1668#undismiss {
1669 margin-left: 0.5em;
1670}
1671
1672form.upgrade {
1673 margin-top: 8px;
1674}
1675
1676form.upgrade .hint {
1677 font-style: italic;
1678 font-size: 85%;
1679 margin: -0.5em 0 2em;
1680}
1681
1682.update-php .spinner {
1683 float: none;
1684 margin: -4px 0;
1685}
1686
1687h2.wp-current-version {
1688 margin-bottom: .3em;
1689}
1690
1691p.update-last-checked {
1692 margin-top: 0;
1693}
1694
1695p.auto-update-status {
1696 margin-top: 2em;
1697 line-height: 1.8;
1698}
1699
1700#ajax-loading,
1701.ajax-loading,
1702.ajax-feedback,
1703.imgedit-wait-spin,
1704.list-ajax-loading { /* deprecated */
1705 visibility: hidden;
1706}
1707
1708#ajax-response.alignleft {
1709 margin-left: 2em;
1710}
1711
1712.button.updating-message:before,
1713.button.updated-message:before,
1714.button.installed:before,
1715.button.installing:before,
1716.button.activated-message:before,
1717.button.activating-message:before {
1718 margin: 3px 5px 0 -2px;
1719}
1720
1721#plugin-information-footer .button {
1722 padding: 0 14px;
1723 line-height: 2.71428571; /* 38px */
1724 font-size: 14px;
1725 vertical-align: middle;
1726 min-height: 40px;
1727 margin-bottom: 4px;
1728}
1729
1730#plugin-information-footer .button.installed:before,
1731#plugin-information-footer .button.installing:before,
1732#plugin-information-footer .button.updating-message:before,
1733#plugin-information-footer .button.updated-message:before,
1734#plugin-information-footer .button.activated-message:before,
1735#plugin-information-footer .button.activating-message:before {
1736 margin: 9px 5px 0 -2px;
1737}
1738
1739#plugin-information-footer .button.update-now.updating-message:before {
1740 margin: -3px 5px 0 -2px;
1741}
1742
1743.button-primary.updating-message:before,
1744.button-primary.activating-message:before {
1745 color: #fff;
1746}
1747
1748.button-primary.updated-message:before,
1749.button-primary.activated-message:before {
1750 color: #9ec2e6;
1751}
1752
1753.button.updated-message,
1754.button.activated-message {
1755 transition-property: border, background, color;
1756 transition-duration: .05s;
1757 transition-timing-function: ease-in-out;
1758}
1759
1760
1761/* @todo: this does not need its own section anymore */
1762/*------------------------------------------------------------------------------
1763 6.0 - Admin Header
1764------------------------------------------------------------------------------*/
1765#adminmenu a,
1766#taglist a,
1767#catlist a {
1768 text-decoration: none;
1769}
1770
1771/*------------------------------------------------------------------------------
1772 6.1 - Screen Options Tabs
1773------------------------------------------------------------------------------*/
1774
1775#screen-options-wrap,
1776#contextual-help-wrap {
1777 margin: 0;
1778 padding: 8px 20px 12px;
1779 position: relative;
1780}
1781
1782#contextual-help-wrap {
1783 overflow: auto;
1784 margin-left: 0;
1785}
1786
1787#screen-meta-links {
1788 float: right;
1789 margin: 0 20px 0 0;
1790}
1791
1792/* screen options and help tabs revert */
1793#screen-meta {
1794 display: none;
1795 margin: 0 20px -1px 0;
1796 position: relative;
1797 background-color: #fff;
1798 border: 1px solid #c3c4c7;
1799 border-top: none;
1800 box-shadow: 0 0 0 transparent;
1801}
1802
1803#screen-options-link-wrap,
1804#contextual-help-link-wrap {
1805 float: left;
1806 margin: 0 0 0 6px;
1807}
1808
1809#screen-meta-links .screen-meta-toggle {
1810 position: relative;
1811 top: 0;
1812}
1813
1814#screen-meta-links .show-settings {
1815 border: 1px solid #c3c4c7;
1816 border-top: none;
1817 height: auto;
1818 margin-bottom: 0;
1819 padding: 3px 6px 3px 16px;
1820 background: #fff;
1821 border-radius: 0 0 4px 4px;
1822 color: #646970;
1823 line-height: 1.7;
1824 box-shadow: 0 0 0 transparent;
1825 transition: box-shadow 0.1s linear;
1826}
1827
1828#screen-meta-links .show-settings:hover,
1829#screen-meta-links .show-settings:active,
1830#screen-meta-links .show-settings:focus {
1831 color: #2c3338;
1832}
1833
1834#screen-meta-links .show-settings:focus {
1835 border-color: #2271b1;
1836 box-shadow: 0 0 0 1px #2271b1;
1837 /* Only visible in Windows High Contrast mode */
1838 outline: 2px solid transparent;
1839}
1840
1841#screen-meta-links .show-settings:active {
1842 transform: none;
1843}
1844
1845#screen-meta-links .show-settings:after {
1846 right: 0;
1847 content: "\f140";
1848 content: "\f140" / '';
1849 font: normal 20px/1 dashicons;
1850 display: inline-block;
1851 padding: 0 5px 0 0;
1852 bottom: 2px;
1853 position: relative;
1854 vertical-align: bottom;
1855 -webkit-font-smoothing: antialiased;
1856 -moz-osx-font-smoothing: grayscale;
1857 text-decoration: none;
1858}
1859
1860#screen-meta-links .screen-meta-active:after {
1861 content: "\f142";
1862 content: "\f142" / '';
1863}
1864
1865/* end screen options and help tabs */
1866
1867.toggle-arrow {
1868 background-repeat: no-repeat;
1869 background-position: top left;
1870 background-color: transparent;
1871 height: 22px;
1872 line-height: 22px;
1873 display: block;
1874}
1875
1876.toggle-arrow-active {
1877 background-position: bottom left;
1878}
1879
1880#screen-options-wrap h5, /* Back-compat for old plugins */
1881#screen-options-wrap legend,
1882#contextual-help-wrap h5 {
1883 margin: 0;
1884 padding: 8px 0;
1885 font-size: 13px;
1886 font-weight: 600;
1887}
1888
1889.metabox-prefs label {
1890 display: inline-block;
1891 padding-right: 15px;
1892 line-height: 2.35;
1893}
1894
1895#number-of-columns {
1896 display: inline-block;
1897 vertical-align: middle;
1898 line-height: 30px;
1899}
1900
1901.metabox-prefs input[type=checkbox] {
1902 margin-top: 0;
1903 margin-right: 6px;
1904}
1905
1906.metabox-prefs label input,
1907.metabox-prefs label input[type=checkbox] {
1908 margin: -4px 5px 0 0;
1909}
1910
1911.metabox-prefs .columns-prefs label input {
1912 margin: -1px 2px 0 0;
1913}
1914
1915.metabox-prefs label a {
1916 display: none;
1917}
1918
1919.metabox-prefs .screen-options input,
1920.metabox-prefs .screen-options label {
1921 margin-top: 0;
1922 margin-bottom: 0;
1923 vertical-align: middle;
1924}
1925
1926.metabox-prefs .screen-options .screen-per-page {
1927 margin-right: 15px;
1928 padding-right: 0;
1929}
1930
1931.metabox-prefs .screen-options label {
1932 line-height: 2.2;
1933 padding-right: 0;
1934}
1935
1936.screen-options + .screen-options {
1937 margin-top: 10px;
1938}
1939
1940.metabox-prefs .submit {
1941 margin-top: 1em;
1942 padding: 0;
1943}
1944
1945/*------------------------------------------------------------------------------
1946 6.2 - Help Menu
1947------------------------------------------------------------------------------*/
1948
1949#contextual-help-wrap {
1950 padding: 0;
1951}
1952
1953#contextual-help-columns {
1954 position: relative;
1955}
1956
1957#contextual-help-back {
1958 position: absolute;
1959 top: 0;
1960 bottom: 0;
1961 left: 150px;
1962 right: 170px;
1963 border: 1px solid #c3c4c7;
1964 border-top: none;
1965 border-bottom: none;
1966 background: #f0f6fc;
1967}
1968
1969#contextual-help-wrap.no-sidebar #contextual-help-back {
1970 right: 0;
1971 border-right-width: 0;
1972 border-bottom-right-radius: 2px;
1973}
1974
1975.contextual-help-tabs {
1976 float: left;
1977 width: 150px;
1978 margin: 0;
1979}
1980
1981.contextual-help-tabs ul {
1982 margin: 1em 0;
1983}
1984
1985.contextual-help-tabs li {
1986 margin-bottom: 0;
1987 list-style-type: none;
1988 border-style: solid;
1989 border-width: 0 0 0 2px;
1990 border-color: transparent;
1991}
1992
1993.contextual-help-tabs a {
1994 display: block;
1995 padding: 5px 5px 5px 12px;
1996 line-height: 1.4;
1997 text-decoration: none;
1998 border: 1px solid transparent;
1999 border-right: none;
2000 border-left: none;
2001}
2002
2003.contextual-help-tabs a:hover {
2004 color: #2c3338;
2005}
2006
2007.contextual-help-tabs .active {
2008 padding: 0;
2009 margin: 0 -1px 0 0;
2010 border-left: 2px solid #72aee6;
2011 background: #f0f6fc;
2012 box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 1px 0 rgba(0, 0, 0, 0.02);
2013}
2014
2015.contextual-help-tabs .active a {
2016 border-color: #c3c4c7;
2017 color: #2c3338;
2018}
2019
2020.contextual-help-tabs-wrap {
2021 padding: 0 20px;
2022 overflow: auto;
2023}
2024
2025.help-tab-content {
2026 display: none;
2027 margin: 0 22px 12px 0;
2028 line-height: 1.6;
2029}
2030
2031.help-tab-content.active {
2032 display: block;
2033}
2034
2035.help-tab-content ul li {
2036 list-style-type: disc;
2037 margin-left: 18px;
2038}
2039
2040.contextual-help-sidebar {
2041 width: 150px;
2042 float: right;
2043 padding: 0 8px 0 12px;
2044 overflow: auto;
2045}
2046
2047/*------------------------------------------------------------------------------
2048 8.0 - Layout Blocks
2049------------------------------------------------------------------------------*/
2050
2051html.wp-toolbar {
2052 padding-top: var(--wp-admin--admin-bar--height);
2053 box-sizing: border-box;
2054 -ms-overflow-style: scrollbar; /* See ticket #48545 */
2055}
2056
2057.widefat th,
2058.widefat td {
2059 color: #50575e;
2060}
2061
2062.widefat th,
2063.widefat thead td,
2064.widefat tfoot td {
2065 font-weight: 400;
2066}
2067
2068.widefat thead tr th,
2069.widefat thead tr td,
2070.widefat tfoot tr th,
2071.widefat tfoot tr td {
2072 color: #2c3338;
2073}
2074
2075.widefat td p {
2076 margin: 2px 0 0.8em;
2077}
2078
2079.widefat p,
2080.widefat ol,
2081.widefat ul {
2082 color: #2c3338;
2083}
2084
2085.widefat .column-comment p {
2086 margin: 0.6em 0;
2087}
2088
2089.widefat .column-comment ul {
2090 list-style: initial;
2091 margin-left: 2em;
2092}
2093
2094/* Screens with postboxes */
2095.postbox-container {
2096 float: left;
2097}
2098
2099.postbox-container .meta-box-sortables {
2100 box-sizing: border-box;
2101}
2102
2103#wpbody-content .metabox-holder {
2104 padding-top: 10px;
2105}
2106
2107.metabox-holder .postbox-container .meta-box-sortables {
2108 /* The jQuery UI Sortables need some initial height to work properly. */
2109 min-height: 1px;
2110 position: relative;
2111}
2112
2113#post-body-content {
2114 width: 100%;
2115 min-width: 463px;
2116 float: left;
2117}
2118
2119#post-body.columns-2 #postbox-container-1 {
2120 float: right;
2121 margin-right: -300px;
2122 width: 280px;
2123}
2124
2125#post-body.columns-2 #side-sortables {
2126 min-height: 250px;
2127}
2128
2129/* one column on the dash */
2130@media only screen and (max-width: 799px) {
2131 #wpbody-content .metabox-holder .postbox-container .empty-container {
2132 outline: none;
2133 height: 0;
2134 min-height: 0;
2135 }
2136}
2137
2138.js .widget .widget-top,
2139.js .postbox .hndle {
2140 cursor: move;
2141}
2142
2143.js .widget .widget-top.is-non-sortable,
2144.js .postbox .hndle.is-non-sortable {
2145 cursor: auto;
2146}
2147
2148/* Configurable dashboard widgets "Configure" edit-box link. */
2149.hndle a {
2150 font-size: 12px;
2151 font-weight: 400;
2152}
2153
2154.postbox-header {
2155 display: flex;
2156 align-items: center;
2157 justify-content: space-between;
2158 border-bottom: 1px solid #c3c4c7;
2159}
2160
2161.postbox-header .hndle {
2162 flex-grow: 1;
2163 /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */
2164 display: flex;
2165 justify-content: space-between;
2166 align-items: center;
2167}
2168
2169.postbox-header .handle-actions {
2170 flex-shrink: 0;
2171}
2172
2173/* Post box order and toggle buttons. */
2174.postbox .handle-order-higher,
2175.postbox .handle-order-lower,
2176.postbox .handlediv {
2177 width: 1.62rem;
2178 height: 1.62rem;
2179 margin: 0;
2180 padding: 0;
2181 border: 0;
2182 background: none;
2183 cursor: pointer;
2184}
2185
2186.postbox .handle-order-higher,
2187.postbox .handle-order-lower {
2188 color: #787c82;
2189 width: 1.62rem;
2190}
2191
2192/* Post box order buttons in the block editor meta boxes area. */
2193.edit-post-meta-boxes-area .postbox .handle-order-higher,
2194.edit-post-meta-boxes-area .postbox .handle-order-lower {
2195 width: 44px;
2196 height: 44px;
2197 color: #1d2327
2198}
2199
2200.postbox .handle-order-higher[aria-disabled="true"],
2201.postbox .handle-order-lower[aria-disabled="true"] {
2202 cursor: default;
2203 color: #a7aaad;
2204}
2205
2206.sortable-placeholder {
2207 border: 1px dashed #c3c4c7;
2208 margin-bottom: 20px;
2209}
2210
2211.postbox,
2212.stuffbox {
2213 margin-bottom: 20px;
2214 padding: 0;
2215 line-height: 1;
2216}
2217
2218.postbox.closed {
2219 border-bottom: 0;
2220}
2221
2222/* user-select is not a part of the CSS standard - may change behavior in the future */
2223.postbox .hndle,
2224.stuffbox .hndle {
2225 -webkit-user-select: none;
2226 user-select: none;
2227}
2228
2229.postbox .inside {
2230 padding: 0 12px 12px;
2231 line-height: 1.4;
2232 font-size: 13px;
2233}
2234
2235.stuffbox .inside {
2236 padding: 0;
2237 line-height: 1.4;
2238 font-size: 13px;
2239 margin-top: 0;
2240}
2241
2242.postbox .inside {
2243 margin: 11px 0;
2244 position: relative;
2245}
2246
2247.postbox .inside > p:last-child,
2248.rss-widget ul li:last-child {
2249 margin-bottom: 1px !important;
2250}
2251
2252.postbox.closed h3 {
2253 border: none;
2254 box-shadow: none;
2255}
2256
2257.postbox table.form-table {
2258 margin-bottom: 0;
2259}
2260
2261.postbox table.widefat {
2262 box-shadow: none;
2263}
2264
2265.temp-border {
2266 border: 1px dotted #c3c4c7;
2267}
2268
2269.columns-prefs label {
2270 padding: 0 10px 0 0;
2271}
2272
2273/* @todo: what is this doing here */
2274#dashboard_right_now .versions .b,
2275#post-status-display,
2276#post-visibility-display,
2277#adminmenu .wp-submenu li.current,
2278#adminmenu .wp-submenu li.current a,
2279#adminmenu .wp-submenu li.current a:hover,
2280.media-item .percent,
2281.plugins .name,
2282#pass-strength-result.strong,
2283#pass-strength-result.short,
2284#ed_reply_toolbar #ed_reply_strong,
2285.item-controls .item-order a,
2286.feature-filter .feature-name,
2287#comment-status-display {
2288 font-weight: 600;
2289}
2290
2291/*------------------------------------------------------------------------------
2292 21.0 - Admin Footer
2293------------------------------------------------------------------------------*/
2294
2295#wpfooter {
2296 position: absolute;
2297 bottom: 0;
2298 left: 0;
2299 right: 0;
2300 padding: 10px 20px;
2301 color: #50575e;
2302}
2303
2304#wpfooter p {
2305 font-size: 13px;
2306 margin: 0;
2307 line-height: 1.55;
2308}
2309
2310#footer-thankyou {
2311 font-style: italic;
2312}
2313
2314/*------------------------------------------------------------------------------
2315 25.0 - Tabbed Admin Screen Interface (Experimental)
2316------------------------------------------------------------------------------*/
2317
2318.nav-tab {
2319 float: left;
2320 border: 1px solid #c3c4c7;
2321 border-bottom: none;
2322 margin-left: 0.5em; /* half the font size so set the font size properly */
2323 padding: 5px 10px;
2324 font-size: 14px;
2325 line-height: 1.71428571;
2326 font-weight: 600;
2327 background: #dcdcde;
2328 color: #50575e;
2329 text-decoration: none;
2330 white-space: nowrap;
2331}
2332
2333h3 .nav-tab, /* Back-compat for pre-4.4 */
2334.nav-tab-small .nav-tab {
2335 padding: 5px 14px;
2336 font-size: 12px;
2337 line-height: 1.33;
2338}
2339
2340.nav-tab:hover,
2341.nav-tab:focus {
2342 background-color: #fff;
2343 color: #3c434a;
2344}
2345
2346.nav-tab-active,
2347.nav-tab:focus:active {
2348 box-shadow: none;
2349}
2350
2351.nav-tab-active {
2352 margin-bottom: -1px;
2353 color: #3c434a;
2354}
2355
2356.nav-tab-active,
2357.nav-tab-active:hover,
2358.nav-tab-active:focus,
2359.nav-tab-active:focus:active {
2360 border-bottom: 1px solid #f0f0f1;
2361 background: #f0f0f1;
2362 color: #000;
2363}
2364
2365h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
2366.wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */
2367.nav-tab-wrapper {
2368 border-bottom: 1px solid #c3c4c7;
2369 margin: 0;
2370 padding-top: 9px;
2371 padding-bottom: 0;
2372 line-height: inherit;
2373}
2374
2375/* Back-compat for plugins. Deprecated. Use .wp-clearfix instead. */
2376.nav-tab-wrapper:not(.wp-clearfix):after {
2377 content: "";
2378 display: table;
2379 clear: both;
2380}
2381
2382/*------------------------------------------------------------------------------
2383 26.0 - Misc
2384------------------------------------------------------------------------------*/
2385
2386.spinner {
2387 background: url(../images/spinner.gif) no-repeat;
2388 background-size: 20px 20px;
2389 display: inline-block;
2390 visibility: hidden;
2391 float: right;
2392 vertical-align: middle;
2393 opacity: 0.7;
2394 filter: alpha(opacity=70);
2395 width: 20px;
2396 height: 20px;
2397 margin: 4px 10px 0;
2398}
2399
2400.spinner.is-active,
2401.loading-content .spinner {
2402 visibility: visible;
2403}
2404
2405#template > div {
2406 margin-right: 16em;
2407}
2408#template .notice {
2409 margin-top: 1em;
2410 margin-right: 3%;
2411}
2412#template .notice p {
2413 width: auto;
2414}
2415#template .submit .spinner {
2416 float: none;
2417}
2418
2419.metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */
2420.metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */
2421.metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
2422.metabox-holder h2.hndle {
2423 font-size: 14px;
2424 padding: 8px 12px;
2425 margin: 0;
2426 line-height: 1.4;
2427}
2428
2429/* Back-compat for nav-menus screen */
2430.nav-menus-php .metabox-holder h3 {
2431 padding: 0;
2432}
2433
2434.accordion-container h3.accordion-section-title {
2435 padding: 0 !important;
2436}
2437
2438.accordion-section-title button.accordion-trigger,
2439.nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger {
2440 background: inherit;
2441 color: #1d2327;
2442 display: block;
2443 position: relative;
2444 text-align: left;
2445 width: 100%;
2446 outline: none;
2447 border: 0;
2448 padding: 10px 10px 11px 14px;
2449 line-height: 1.5;
2450 cursor: pointer;
2451}
2452
2453.accordion-section-title button.accordion-trigger:focus,
2454.nav-menus-php .metabox-holder .accordion-section-title button.accordion-trigger:focus {
2455 box-shadow: 0 0 0 2px #2271b1;
2456 outline: 2px solid transparent;
2457}
2458
2459.accordion-section-title span.dashicons.dashicons-arrow-down,
2460.nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down {
2461 position: absolute;
2462 right: 10px;
2463 left: auto;
2464 color: #787c82;
2465 border-radius: 50px;
2466 top: 50%;
2467 transform: translateY(-50%);
2468}
2469
2470.accordion-section-title:hover span.dashicons.dashicons-arrow-down,
2471.nav-menus-php .metabox-holder .accordion-section-title:hover span.dashicons.dashicons-arrow-down {
2472 color: #1d2327;
2473}
2474
2475.accordion-section-title span.dashicons.dashicons-arrow-down::before,
2476.nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
2477 position: relative;
2478 left: -1px;
2479}
2480
2481.accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down,
2482.nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down {
2483 transform: rotate(180deg) translate(0, 50%);
2484}
2485
2486#templateside ul li a {
2487 text-decoration: none;
2488}
2489
2490.plugin-install #description,
2491.plugin-install-network #description {
2492 width: 60%;
2493}
2494
2495table .vers,
2496table .column-visible,
2497table .column-rating {
2498 text-align: left;
2499}
2500
2501.attention,
2502.error-message {
2503 color: #d63638;
2504 font-weight: 600;
2505}
2506
2507/* Scrollbar fix for bulk upgrade iframe */
2508body.iframe {
2509 height: 98%;
2510}
2511
2512/* Upgrader styles, Specific to Language Packs */
2513.lp-show-latest p {
2514 display: none;
2515}
2516.lp-show-latest p:last-child,
2517.lp-show-latest .lp-error p {
2518 display: block;
2519}
2520
2521/* - Only used once or twice in all of WP - deprecate for global style
2522------------------------------------------------------------------------------*/
2523.media-icon {
2524 width: 62px; /* icon + border */
2525 text-align: center;
2526}
2527
2528.media-icon img {
2529 border: 1px solid #dcdcde;
2530 border: 1px solid rgba(0, 0, 0, 0.07);
2531}
2532
2533#howto {
2534 font-size: 11px;
2535 margin: 0 5px;
2536 display: block;
2537}
2538
2539.importers {
2540 font-size: 16px;
2541 width: auto;
2542}
2543
2544.importers td {
2545 padding-right: 14px;
2546 line-height: 1.4;
2547}
2548
2549.importers .import-system {
2550 max-width: 250px;
2551}
2552
2553.importers td.desc {
2554 max-width: 500px;
2555}
2556
2557.importer-title,
2558.importer-desc,
2559.importer-action {
2560 display: block;
2561}
2562
2563.importer-title {
2564 color: #000;
2565 font-size: 14px;
2566 font-weight: 400;
2567 margin-bottom: .2em;
2568}
2569
2570.importer-action {
2571 line-height: 1.55; /* Same as with .updating-message */
2572 color: #50575e;
2573 margin-bottom: 1em;
2574}
2575
2576#post-body #post-body-content #namediv h3, /* Back-compat for pre-4.4 */
2577#post-body #post-body-content #namediv h2 {
2578 margin-top: 0;
2579}
2580
2581.edit-comment-author {
2582 color: #1d2327;
2583 border-bottom: 1px solid #f0f0f1;
2584}
2585
2586#namediv h3 label, /* Back-compat for pre-4.4 */
2587#namediv h2 label {
2588 vertical-align: baseline;
2589}
2590
2591#namediv table {
2592 width: 100%;
2593}
2594
2595#namediv td.first {
2596 width: 10px;
2597 white-space: nowrap;
2598}
2599
2600#namediv input {
2601 width: 100%;
2602}
2603
2604#namediv p {
2605 margin: 10px 0;
2606}
2607
2608/* - Used - but could/should be deprecated with a CSS reset
2609------------------------------------------------------------------------------*/
2610.zerosize {
2611 height: 0;
2612 width: 0;
2613 margin: 0;
2614 border: 0;
2615 padding: 0;
2616 overflow: hidden;
2617 position: absolute;
2618}
2619
2620br.clear {
2621 height: 2px;
2622 line-height: 0.15;
2623}
2624
2625.checkbox {
2626 border: none;
2627 margin: 0;
2628 padding: 0;
2629}
2630
2631fieldset {
2632 border: 0;
2633 padding: 0;
2634 margin: 0;
2635}
2636
2637.post-categories {
2638 display: inline;
2639 margin: 0;
2640 padding: 0;
2641}
2642
2643.post-categories li {
2644 display: inline;
2645}
2646
2647/* Star Ratings - Back-compat for pre-3.8 */
2648div.star-holder {
2649 position: relative;
2650 height: 17px;
2651 width: 100px;
2652 background: url(../images/stars.png?ver=20121108) repeat-x bottom left;
2653}
2654
2655div.star-holder .star-rating {
2656 background: url(../images/stars.png?ver=20121108) repeat-x top left;
2657 height: 17px;
2658 float: left;
2659}
2660
2661/* Star Ratings */
2662.star-rating {
2663 white-space: nowrap;
2664}
2665.star-rating .star {
2666 display: inline-block;
2667 width: 20px;
2668 height: 20px;
2669 -webkit-font-smoothing: antialiased;
2670 font-size: 20px;
2671 line-height: 1;
2672 font-family: dashicons;
2673 text-decoration: inherit;
2674 font-weight: 400;
2675 font-style: normal;
2676 vertical-align: top;
2677 transition: color .1s ease-in;
2678 text-align: center;
2679 color: #dba617;
2680}
2681
2682.star-rating .star-full:before {
2683 content: "\f155";
2684 content: "\f155" / '';
2685}
2686
2687.star-rating .star-half:before {
2688 content: "\f459";
2689 content: "\f459" / '';
2690}
2691
2692.rtl .star-rating .star-half {
2693 transform: rotateY(180deg);
2694}
2695
2696.star-rating .star-empty:before {
2697 content: "\f154";
2698 content: "\f154" / '';
2699}
2700
2701div.action-links {
2702 font-weight: 400;
2703 margin: 6px 0 0;
2704}
2705
2706/* Plugin install thickbox */
2707#plugin-information {
2708 background: #fff;
2709 position: fixed;
2710 top: 0;
2711 right: 0;
2712 bottom: 0;
2713 left: 0;
2714 height: 100%;
2715 padding: 0;
2716}
2717
2718#plugin-information-scrollable {
2719 overflow: auto;
2720 -webkit-overflow-scrolling: touch;
2721 height: 100%;
2722}
2723
2724#plugin-information-title {
2725 padding: 0 26px;
2726 background: #f6f7f7;
2727 font-size: 22px;
2728 font-weight: 600;
2729 line-height: 2.4;
2730 position: relative;
2731 height: 56px;
2732}
2733
2734#plugin-information-title.with-banner {
2735 margin-right: 0;
2736 height: 250px;
2737 background-size: cover;
2738}
2739
2740#plugin-information-title h2 {
2741 font-size: 1em;
2742 font-weight: 600;
2743 padding: 0;
2744 margin: 0;
2745 overflow: hidden;
2746 text-overflow: ellipsis;
2747 white-space: nowrap;
2748}
2749
2750#plugin-information-title.with-banner h2 {
2751 position: relative;
2752 font-family: "Helvetica Neue", sans-serif;
2753 display: inline-block;
2754 font-size: 30px;
2755 line-height: 1.68;
2756 box-sizing: border-box;
2757 max-width: 100%;
2758 padding: 0 15px;
2759 margin-top: 174px;
2760 color: #fff;
2761 background: rgba(29, 35, 39, 0.9);
2762 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
2763 box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
2764 border-radius: 8px;
2765}
2766
2767#plugin-information-title div.vignette {
2768 display: none;
2769}
2770
2771#plugin-information-title.with-banner div.vignette {
2772 position: absolute;
2773 display: block;
2774 top: 0;
2775 left: 0;
2776 height: 250px;
2777 width: 100%;
2778 background: transparent;
2779 box-shadow: inset 0 0 50px 4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
2780}
2781
2782#plugin-information-tabs {
2783 padding: 0 16px;
2784 position: relative;
2785 right: 0;
2786 left: 0;
2787 min-height: 36px;
2788 font-size: 0;
2789 z-index: 1;
2790 border-bottom: 1px solid #dcdcde;
2791 background: #f6f7f7;
2792}
2793
2794#plugin-information-tabs a {
2795 position: relative;
2796 display: inline-block;
2797 padding: 9px 10px;
2798 margin: 0;
2799 height: 18px;
2800 line-height: 1.3;
2801 font-size: 14px;
2802 text-decoration: none;
2803 transition: none;
2804}
2805
2806#plugin-information-tabs a.current {
2807 margin: 0 -1px -1px;
2808 background: #fff;
2809 border: 1px solid #dcdcde;
2810 border-bottom-color: #fff;
2811 padding-top: 8px;
2812 color: #2c3338;
2813}
2814
2815#plugin-information-tabs.with-banner a.current {
2816 border-top: none;
2817 padding-top: 9px;
2818}
2819
2820#plugin-information-tabs a:active,
2821#plugin-information-tabs a:focus {
2822 outline: none;
2823}
2824
2825#plugin-information-content {
2826 overflow: hidden; /* equal height column trick */
2827 background: #fff;
2828 position: relative;
2829 top: 0;
2830 right: 0;
2831 left: 0;
2832 min-height: 100%;
2833 /* Height of title + tabs + install now */
2834 min-height: calc( 100% - 152px );
2835}
2836
2837#plugin-information-content.with-banner {
2838 /* Height of banner + tabs + install now */
2839 min-height: calc( 100% - 346px );
2840}
2841
2842#section-holder {
2843 position: relative;
2844 top: 0;
2845 right: 250px;
2846 bottom: 0;
2847 left: 0;
2848 margin-top: 10px;
2849 margin-right: 250px; /* FYI box */
2850 padding: 10px 26px 99999px; /* equal height column trick */
2851 margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
2852}
2853
2854#section-holder .notice {
2855 margin: 5px 0 15px;
2856}
2857
2858#section-holder .updated {
2859 margin: 16px 0;
2860}
2861
2862#plugin-information .fyi {
2863 float: right;
2864 position: relative;
2865 top: 0;
2866 right: 0;
2867 padding: 16px 16px 99999px; /* equal height column trick */
2868 margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
2869 width: 217px;
2870 border-left: 1px solid #dcdcde;
2871 background: #f6f7f7;
2872 color: #646970;
2873}
2874
2875#plugin-information .fyi strong {
2876 color: #3c434a;
2877}
2878
2879#plugin-information .fyi h3 {
2880 font-weight: 600;
2881 text-transform: uppercase;
2882 font-size: 12px;
2883 color: #646970;
2884 margin: 24px 0 8px;
2885}
2886
2887#plugin-information .fyi h2 {
2888 font-size: 0.9em;
2889 margin-bottom: 0;
2890 margin-right: 0;
2891}
2892
2893#plugin-information .fyi ul {
2894 padding: 0;
2895 margin: 0;
2896 list-style: none;
2897}
2898
2899#plugin-information .fyi li {
2900 margin: 0 0 10px;
2901}
2902
2903#plugin-information .fyi-description {
2904 margin-top: 0;
2905}
2906
2907#plugin-information .counter-container {
2908 margin: 3px 0;
2909}
2910
2911#plugin-information .counter-label {
2912 float: left;
2913 margin-right: 5px;
2914 min-width: 55px;
2915}
2916
2917#plugin-information .counter-back {
2918 height: 17px;
2919 width: 92px;
2920 background-color: #dcdcde;
2921 float: left;
2922}
2923
2924#plugin-information .counter-bar {
2925 height: 17px;
2926 background-color: #f0c33c; /* slightly lighter than stars due to larger expanse */
2927 float: left;
2928}
2929
2930#plugin-information .counter-count {
2931 margin-left: 5px;
2932}
2933
2934#plugin-information .fyi ul.contributors {
2935 margin-top: 10px;
2936}
2937
2938#plugin-information .fyi ul.contributors li {
2939 display: inline-block;
2940 margin-right: 8px;
2941 vertical-align: middle;
2942}
2943
2944#plugin-information .fyi ul.contributors li {
2945 display: inline-block;
2946 margin-right: 8px;
2947 vertical-align: middle;
2948}
2949
2950#plugin-information .fyi ul.contributors li img {
2951 vertical-align: middle;
2952 margin-right: 4px;
2953}
2954
2955#plugin-information-footer {
2956 padding: 13px 16px;
2957 position: absolute;
2958 right: 0;
2959 bottom: 0;
2960 left: 0;
2961 height: 40px; /* actual height: 40+13+13+1=67 */
2962 border-top: 1px solid #dcdcde;
2963 background: #f6f7f7;
2964}
2965
2966/* rtl:ignore */
2967#plugin-information .section {
2968 direction: ltr;
2969}
2970
2971/* rtl:ignore */
2972#plugin-information .section ul,
2973#plugin-information .section ol {
2974 list-style-type: disc;
2975 margin-left: 24px;
2976}
2977
2978#plugin-information .section,
2979#plugin-information .section p {
2980 font-size: 14px;
2981 line-height: 1.7;
2982}
2983
2984#plugin-information #section-screenshots ol {
2985 list-style: none;
2986 margin: 0;
2987}
2988
2989#plugin-information #section-screenshots li img {
2990 vertical-align: text-top;
2991 margin-top: 16px;
2992 max-width: 100%;
2993 width: auto;
2994 height: auto;
2995 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
2996}
2997
2998/* rtl:ignore */
2999#plugin-information #section-screenshots li p {
3000 font-style: italic;
3001 padding-left: 20px;
3002}
3003
3004#plugin-information pre {
3005 padding: 7px;
3006 overflow: auto;
3007 border: 1px solid #c3c4c7;
3008}
3009
3010#plugin-information blockquote {
3011 border-left: 2px solid #dcdcde;
3012 color: #646970;
3013 font-style: italic;
3014 margin: 1em 0;
3015 padding: 0 0 0 1em;
3016}
3017
3018/* rtl:ignore */
3019#plugin-information .review {
3020 overflow: hidden; /* clearfix */
3021 width: 100%;
3022 margin-bottom: 20px;
3023 border-bottom: 1px solid #dcdcde;
3024}
3025
3026#plugin-information .review-title-section {
3027 overflow: hidden; /* clearfix */
3028}
3029
3030/* rtl:ignore */
3031#plugin-information .review-title-section h4 {
3032 display: inline-block;
3033 float: left;
3034 margin: 0 6px 0 0;
3035}
3036
3037#plugin-information .reviewer-info p {
3038 clear: both;
3039 margin: 0;
3040 padding-top: 2px;
3041}
3042
3043/* rtl:ignore */
3044#plugin-information .reviewer-info .avatar {
3045 float: left;
3046 margin: 4px 6px 0 0;
3047}
3048
3049/* rtl:ignore */
3050#plugin-information .reviewer-info .star-rating {
3051 float: left;
3052}
3053
3054/* rtl:ignore */
3055#plugin-information .review-meta {
3056 float: left;
3057 margin-left: 0.75em;
3058}
3059
3060/* rtl:ignore */
3061#plugin-information .review-body {
3062 float: left;
3063 width: 100%;
3064}
3065
3066.plugin-version-author-uri {
3067 font-size: 13px;
3068}
3069
3070/* For non-js plugin installation screen ticket #36430. */
3071.update-php .button.button-primary {
3072 margin-right: 1em;
3073}
3074
3075@media screen and (max-width: 771px) {
3076 #plugin-information-title.with-banner {
3077 height: 100px;
3078 }
3079
3080 #plugin-information-title.with-banner h2 {
3081 margin-top: 30px;
3082 font-size: 20px;
3083 line-height: 2;
3084 max-width: 85%;
3085 }
3086
3087 #plugin-information-title.with-banner div.vignette {
3088 height: 100px;
3089 }
3090
3091 #plugin-information-tabs {
3092 overflow: hidden; /* clearfix */
3093 padding: 0;
3094 height: auto; /* let tabs wrap */
3095 }
3096
3097 #plugin-information-tabs a.current {
3098 margin-bottom: 0;
3099 border-bottom: none;
3100 }
3101
3102 #plugin-information .fyi {
3103 float: none;
3104 border: 1px solid #dcdcde;
3105 position: static;
3106 width: auto;
3107 margin: 26px 26px 0;
3108 padding-bottom: 0; /* reset from the two column height fix */
3109 }
3110
3111 #section-holder {
3112 position: static;
3113 margin: 0;
3114 padding-bottom: 70px; /* reset from the two column height fix, plus accommodate footer */
3115 }
3116
3117 #plugin-information .fyi h3,
3118 #plugin-information .fyi small {
3119 display: none;
3120 }
3121
3122 #plugin-information-footer {
3123 padding: 12px 16px 0;
3124 height: 46px;
3125 }
3126}
3127
3128/* Thickbox for the Plugin details modal. */
3129#TB_window.plugin-details-modal {
3130 background: #fff;
3131}
3132
3133#TB_window.plugin-details-modal.thickbox-loading:before {
3134 content: "";
3135 display: block;
3136 width: 20px;
3137 height: 20px;
3138 position: absolute;
3139 left: 50%;
3140 top: 50%;
3141 z-index: -1;
3142 margin: -10px 0 0 -10px;
3143 background: #fff url(../images/spinner.gif) no-repeat center;
3144 background-size: 20px 20px;
3145 transform: translateZ(0);
3146}
3147
3148@media print,
3149 (min-resolution: 120dpi) {
3150
3151 #TB_window.plugin-details-modal.thickbox-loading:before {
3152 background-image: url(../images/spinner-2x.gif);
3153 }
3154}
3155
3156.plugin-details-modal #TB_title {
3157 float: left;
3158 height: 1px;
3159}
3160
3161.plugin-details-modal #TB_ajaxWindowTitle {
3162 display: none;
3163}
3164
3165.plugin-details-modal #TB_closeWindowButton {
3166 left: auto;
3167 right: -30px;
3168 color: #f0f0f1;
3169}
3170
3171.plugin-details-modal #TB_closeWindowButton:hover,
3172.plugin-details-modal #TB_closeWindowButton:focus {
3173 outline: none;
3174 box-shadow: none;
3175}
3176
3177.plugin-details-modal #TB_closeWindowButton:hover::after,
3178.plugin-details-modal #TB_closeWindowButton:focus::after {
3179 outline: 2px solid;
3180 outline-offset: -4px;
3181 border-radius: 4px;
3182}
3183
3184.plugin-details-modal .tb-close-icon {
3185 display: none;
3186}
3187
3188.plugin-details-modal #TB_closeWindowButton:after {
3189 content: "\f335";
3190 content: "\f335" / '';
3191 font: normal 32px/29px 'dashicons';
3192 -webkit-font-smoothing: antialiased;
3193 -moz-osx-font-smoothing: grayscale;
3194}
3195
3196/* move plugin install close icon to top on narrow screens */
3197@media screen and (max-width: 830px) {
3198 .plugin-details-modal #TB_closeWindowButton {
3199 right: 0;
3200 top: -30px;
3201 }
3202}
3203
3204/* @todo: move this. */
3205img {
3206 border: none;
3207}
3208
3209/* Metabox collapse arrow indicators */
3210.sidebar-name .toggle-indicator::before,
3211.meta-box-sortables .postbox .toggle-indicator::before,
3212.meta-box-sortables .postbox .order-higher-indicator::before,
3213.meta-box-sortables .postbox .order-lower-indicator::before,
3214.bulk-action-notice .toggle-indicator::before,
3215.privacy-text-box .toggle-indicator::before {
3216 content: "\f142";
3217 content: "\f142" / '';
3218 display: inline-block;
3219 font: normal 20px/1 dashicons;
3220 -webkit-font-smoothing: antialiased;
3221 -moz-osx-font-smoothing: grayscale;
3222 text-decoration: none;
3223}
3224
3225.js .widgets-holder-wrap.closed .toggle-indicator::before,
3226.meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,
3227.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,
3228.privacy-text-box.closed .toggle-indicator::before {
3229 content: "\f140";
3230 content: "\f140" / '';
3231}
3232
3233.postbox .handle-order-higher .order-higher-indicator::before {
3234 content: "\f343";
3235 content: "\f343" / '';
3236 color: inherit;
3237}
3238
3239.postbox .handle-order-lower .order-lower-indicator::before {
3240 content: "\f347";
3241 content: "\f347" / '';
3242 color: inherit;
3243}
3244
3245.postbox .handle-order-higher .order-higher-indicator::before,
3246.postbox .handle-order-lower .order-lower-indicator::before {
3247 position: relative;
3248 top: 0.11rem;
3249 width: 20px;
3250 height: 20px;
3251}
3252
3253.postbox .handlediv .toggle-indicator::before {
3254 width: 20px;
3255 border-radius: 50%;
3256}
3257
3258.postbox .handlediv .toggle-indicator::before {
3259 position: relative;
3260 top: 0.05rem;
3261 text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
3262}
3263
3264.rtl .postbox .handlediv .toggle-indicator::before {
3265 text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */
3266}
3267
3268.bulk-action-notice .toggle-indicator::before {
3269 line-height: 16px;
3270 vertical-align: top;
3271 color: #787c82;
3272}
3273
3274.postbox .handle-order-higher:focus,
3275.postbox .handle-order-lower:focus,
3276.postbox .handlediv:focus {
3277 box-shadow: inset 0 0 0 2px #2271b1;
3278 border-radius: 50%;
3279 /* Only visible in Windows High Contrast mode */
3280 outline: 2px solid transparent;
3281}
3282
3283.postbox .handle-order-higher:focus .order-higher-indicator::before,
3284.postbox .handle-order-lower:focus .order-lower-indicator::before,
3285.postbox .handlediv:focus .toggle-indicator::before {
3286 box-shadow: none;
3287 /* Only visible in Windows High Contrast mode */
3288 outline: 1px solid transparent;
3289}
3290
3291/* @todo: appears to be Press This only and overridden */
3292#photo-add-url-div input[type="text"] {
3293 width: 300px;
3294}
3295
3296/* Theme/Plugin file editor */
3297.alignleft h2 {
3298 margin: 0;
3299}
3300
3301#template textarea {
3302 font-family: Consolas, Monaco, monospace;
3303 font-size: 13px;
3304 background: #f6f7f7;
3305 tab-size: 4;
3306}
3307
3308#template textarea,
3309#template .CodeMirror {
3310 width: 100%;
3311 min-height: 60vh;
3312 height: calc( 100vh - 295px );
3313 border: 1px solid #dcdcde;
3314 box-sizing: border-box;
3315}
3316
3317#templateside > h2 {
3318 padding-top: 6px;
3319 padding-bottom: 7px;
3320 margin: 0;
3321}
3322
3323#templateside ol,
3324#templateside ul {
3325 margin: 0;
3326 padding: 0;
3327}
3328#templateside > ul {
3329 box-sizing: border-box;
3330 margin-top: 0;
3331 overflow: auto;
3332 padding: 0;
3333 min-height: 60vh;
3334 height: calc(100vh - 295px);
3335 background-color: #f6f7f7;
3336 border: 1px solid #dcdcde;
3337 border-left: none;
3338}
3339#templateside ul ul {
3340 padding-left: 12px;
3341}
3342#templateside > ul > li > ul[role=group] {
3343 padding-left: 0;
3344}
3345
3346/*
3347 * Styles for Theme and Plugin file editors.
3348 */
3349
3350/* Hide collapsed items. */
3351[role="treeitem"][aria-expanded="false"] > ul {
3352 display: none;
3353}
3354
3355/* Use arrow dashicons for folder states, but hide from screen readers. */
3356[role="treeitem"] span[aria-hidden] {
3357 display: inline;
3358 font-family: dashicons;
3359 font-size: 20px;
3360 position: absolute;
3361 pointer-events: none;
3362}
3363[role="treeitem"][aria-expanded="false"] > .folder-label .icon:after {
3364 content: "\f139";
3365 content: "\f139" / '';
3366}
3367[role="treeitem"][aria-expanded="true"] > .folder-label .icon:after {
3368 content: "\f140";
3369 content: "\f140" / '';
3370}
3371[role="treeitem"] .folder-label {
3372 display: block;
3373 padding: 3px 3px 3px 12px;
3374 cursor: pointer;
3375}
3376
3377/* Remove outline, and create our own focus and hover styles */
3378[role="treeitem"] {
3379 outline: 0;
3380}
3381
3382[role="treeitem"] a:focus,
3383[role="treeitem"] .folder-label.focus {
3384 color: #043959;
3385 /* Reset default focus style. */
3386 box-shadow: none;
3387 /* Use an inset outline instead, so it's visible also over the current file item. */
3388 outline: 2px solid #2271b1;
3389 outline-offset: -2px;
3390}
3391
3392[role="treeitem"].hover,
3393[role="treeitem"] .folder-label.hover {
3394 background-color: #f0f0f1;
3395}
3396
3397.tree-folder {
3398 margin: 0;
3399 position: relative;
3400}
3401[role="treeitem"] li {
3402 position: relative;
3403}
3404
3405/* Styles for folder indicators/depth */
3406.tree-folder .tree-folder::after {
3407 content: "";
3408 display: block;
3409 position: absolute;
3410 left: 2px;
3411 border-left: 1px solid #c3c4c7;
3412 top: -13px;
3413 bottom: 10px;
3414}
3415.tree-folder > li::before {
3416 content: "";
3417 position: absolute;
3418 display: block;
3419 border-left: 1px solid #c3c4c7;
3420 left: 2px;
3421 top: -5px;
3422 height: 18px;
3423 width: 7px;
3424 border-bottom: 1px solid #c3c4c7;
3425}
3426.tree-folder > li::after {
3427 content: "";
3428 position: absolute;
3429 display: block;
3430 border-left: 1px solid #c3c4c7;
3431 left: 2px;
3432 bottom: -7px;
3433 top: 0;
3434}
3435
3436/* current-file needs to adjustment for .notice styles */
3437#templateside .current-file {
3438 margin: -4px 0 -2px;
3439}
3440.tree-folder > .current-file::before {
3441 left: 4px;
3442 height: 15px;
3443 width: 0;
3444 border-left: none;
3445 top: 3px;
3446}
3447.tree-folder > .current-file::after {
3448 bottom: -4px;
3449 height: 7px;
3450 left: 2px;
3451 top: auto;
3452}
3453
3454/* Lines shouldn't continue on last item */
3455.tree-folder > li:last-child::after,
3456.tree-folder li:last-child > .tree-folder::after {
3457 display: none;
3458}
3459
3460#theme-plugin-editor-selector,
3461#theme-plugin-editor-label,
3462#documentation label {
3463 font-weight: 600;
3464}
3465
3466#theme-plugin-editor-label {
3467 display: inline-block;
3468 margin-bottom: 1em;
3469}
3470
3471/* rtl:ignore */
3472#template textarea,
3473#docs-list {
3474 direction: ltr;
3475}
3476
3477.fileedit-sub #theme,
3478.fileedit-sub #plugin {
3479 max-width: 40%;
3480}
3481.fileedit-sub .alignright {
3482 text-align: right;
3483}
3484
3485#template p {
3486 width: 97%;
3487}
3488
3489#file-editor-linting-error {
3490 margin-top: 1em;
3491 margin-bottom: 1em;
3492}
3493#file-editor-linting-error > .notice {
3494 margin: 0;
3495 display: inline-block;
3496}
3497#file-editor-linting-error > .notice > p {
3498 width: auto;
3499}
3500#template .submit {
3501 margin-top: 1em;
3502 padding: 0;
3503}
3504
3505#template .submit input[type=submit][disabled] {
3506 cursor: not-allowed;
3507}
3508#templateside {
3509 float: right;
3510 width: 16em;
3511 word-wrap: break-word;
3512}
3513
3514#postcustomstuff p.submit {
3515 margin: 0;
3516}
3517
3518#templateside h4 {
3519 margin: 1em 0 0;
3520}
3521
3522#templateside li {
3523 margin: 4px 0;
3524}
3525
3526#templateside li:not(.howto) a,
3527.theme-editor-php .highlight {
3528 display: block;
3529 padding: 3px 0 3px 12px;
3530 text-decoration: none;
3531}
3532
3533#templateside li.current-file > a {
3534 padding-bottom: 0;
3535}
3536
3537#templateside li:not(.howto) > a:first-of-type {
3538 padding-top: 0;
3539}
3540
3541#templateside li.howto {
3542 padding: 6px 12px 12px;
3543}
3544
3545.theme-editor-php .highlight {
3546 margin: -3px 3px -3px -12px;
3547}
3548
3549#templateside .highlight {
3550 border: none;
3551 font-weight: 600;
3552}
3553
3554.nonessential {
3555 color: #646970;
3556 font-size: 11px;
3557 font-style: italic;
3558 padding-left: 12px;
3559}
3560
3561#documentation {
3562 margin-top: 10px;
3563}
3564
3565#documentation label {
3566 line-height: 1.8;
3567 vertical-align: baseline;
3568}
3569
3570.fileedit-sub {
3571 padding: 10px 0 8px;
3572 line-height: 180%;
3573}
3574
3575#file-editor-warning .file-editor-warning-content {
3576 margin: 25px;
3577}
3578
3579/* @todo: can we use a common class for these? */
3580.nav-menus-php .item-edit:before,
3581.wp-customizer .control-section .accordion-section-title:after,
3582.wp-customizer .accordion-section-title:after,
3583.widget-top .widget-action .toggle-indicator:before {
3584 content: "\f140";
3585 content: "\f140" / '';
3586 font: normal 20px/1 dashicons;
3587 display: block;
3588 -webkit-font-smoothing: antialiased;
3589 -moz-osx-font-smoothing: grayscale;
3590 text-decoration: none;
3591}
3592
3593.widget-top .widget-action .toggle-indicator:before {
3594 padding: 1px 2px 1px 0;
3595 border-radius: 50%;
3596}
3597
3598.handlediv,
3599.postbox .handlediv.button-link,
3600.item-edit,
3601.toggle-indicator {
3602 color: #787c82;
3603}
3604
3605.widget-action {
3606 color: #50575e; /* #fafafa background in the Widgets screen */
3607}
3608
3609.widget-top:hover .widget-action,
3610.widget-action:focus,
3611.handlediv:hover,
3612.handlediv:focus,
3613.postbox .handlediv.button-link:hover,
3614.postbox .handlediv.button-link:focus,
3615.item-edit:hover,
3616.item-edit:focus,
3617.sidebar-name:hover .toggle-indicator {
3618 color: #1d2327;
3619 /* Only visible in Windows High Contrast mode */
3620 outline: 2px solid transparent;
3621}
3622
3623.widget-top .widget-action:focus .toggle-indicator:before {
3624 box-shadow: 0 0 0 2px #2271b1;
3625 /* Only visible in Windows High Contrast mode */
3626 outline: 2px solid transparent;
3627}
3628
3629#customize-info.open .accordion-section-title:after,
3630.nav-menus-php .menu-item-edit-active .item-edit:before,
3631.widget.open .widget-top .widget-action .toggle-indicator:before,
3632.widget.widget-in-question .widget-top .widget-action .toggle-indicator:before {
3633 content: "\f142";
3634 content: "\f142" / '';
3635}
3636
3637/*!
3638 * jQuery UI Draggable/Sortable 1.11.4
3639 * http://jqueryui.com
3640 *
3641 * Copyright jQuery Foundation and other contributors
3642 * Released under the MIT license.
3643 * http://jquery.org/license
3644 */
3645.ui-draggable-handle,
3646.ui-sortable-handle {
3647 touch-action: none;
3648}
3649
3650/* Accordion */
3651.accordion-section {
3652 border-bottom: 1px solid #dcdcde;
3653 margin: 0;
3654}
3655
3656.accordion-section.open .accordion-section-content,
3657.no-js .accordion-section .accordion-section-content {
3658 display: block;
3659}
3660
3661.accordion-section.open:hover {
3662 border-bottom-color: #dcdcde;
3663}
3664
3665.accordion-section-content {
3666 display: none;
3667 padding: 10px 20px 15px;
3668 overflow: hidden;
3669 background: #fff;
3670}
3671
3672.accordion-section-title {
3673 margin: 0;
3674 position: relative;
3675 border-left: 1px solid #dcdcde;
3676 border-right: 1px solid #dcdcde;
3677 -webkit-user-select: none;
3678 user-select: none;
3679}
3680
3681.js .accordion-section-title {
3682 cursor: pointer;
3683}
3684
3685.js .accordion-section-title:after {
3686 position: absolute;
3687 top: 12px;
3688 right: 10px;
3689 z-index: 1;
3690}
3691
3692.accordion-section-title:focus {
3693 /* Only visible in Windows High Contrast mode */
3694 outline: 1px solid transparent;
3695}
3696
3697.accordion-section-title:hover:after,
3698.accordion-section-title:focus:after {
3699 border-color: #a7aaad transparent;
3700 /* Only visible in Windows High Contrast mode */
3701 outline: 1px solid transparent;
3702}
3703
3704.cannot-expand .accordion-section-title {
3705 cursor: auto;
3706}
3707
3708.cannot-expand .accordion-section-title:after {
3709 display: none;
3710}
3711
3712.control-section .accordion-section-title,
3713.customize-pane-child .accordion-section-title {
3714 border-left: none;
3715 border-right: none;
3716 padding: 10px 10px 11px 14px;
3717 line-height: 1.55;
3718 background: #fff;
3719}
3720
3721.control-section .accordion-section-title:after,
3722.customize-pane-child .accordion-section-title:after {
3723 top: calc(50% - 10px); /* Arrow height is 20px, so use half of that to vertically center */
3724}
3725
3726.js .control-section:hover .accordion-section-title,
3727.js .control-section .accordion-section-title:hover,
3728.js .control-section.open .accordion-section-title,
3729.js .control-section .accordion-section-title:focus {
3730 color: #1d2327;
3731 background: #f6f7f7;
3732}
3733
3734.control-section.open .accordion-section-title {
3735 /* When expanded */
3736 border-bottom: 1px solid #dcdcde;
3737}
3738
3739/* Edit Site */
3740.network-admin .edit-site-actions {
3741 margin-top: 0;
3742}
3743
3744/* My Sites */
3745.my-sites {
3746 display: block;
3747 overflow: auto;
3748 zoom: 1;
3749}
3750
3751.my-sites li {
3752 display: block;
3753 padding: 8px 3%;
3754 min-height: 130px;
3755 margin: 0;
3756}
3757
3758@media only screen and (max-width: 599px) {
3759 .my-sites li {
3760 min-height: 0;
3761 }
3762}
3763
3764@media only screen and (min-width: 600px) {
3765 .my-sites.striped li {
3766 background-color: #fff;
3767 position: relative;
3768 }
3769 .my-sites.striped li:after {
3770 content: "";
3771 width: 1px;
3772 height: 100%;
3773 position: absolute;
3774 top: 0;
3775 right: 0;
3776 background: #c3c4c7;
3777 }
3778
3779}
3780@media only screen and (min-width: 600px) and (max-width: 699px) {
3781 .my-sites li{
3782 float: left;
3783 width: 44%;
3784 }
3785 .my-sites.striped li {
3786 background-color: #fff;
3787 }
3788 .my-sites.striped li:nth-of-type(2n+1) {
3789 clear: left;
3790 }
3791 .my-sites.striped li:nth-of-type(2n+2):after {
3792 content: none;
3793 }
3794 .my-sites li:nth-of-type(4n+1),
3795 .my-sites li:nth-of-type(4n+2) {
3796 background-color: #f6f7f7;
3797 }
3798
3799}
3800
3801@media only screen and (min-width: 700px) and (max-width: 1199px) {
3802 .my-sites li {
3803 float: left;
3804 width: 27.333333%;
3805 background-color: #fff;
3806 }
3807 .my-sites.striped li:nth-of-type(3n+3):after {
3808 content: none;
3809 }
3810 .my-sites li:nth-of-type(6n+1),
3811 .my-sites li:nth-of-type(6n+2),
3812 .my-sites li:nth-of-type(6n+3) {
3813 background-color: #f6f7f7;
3814 }
3815}
3816
3817@media only screen and (min-width: 1200px) and (max-width: 1399px) {
3818 .my-sites li {
3819 float: left;
3820 width: 21%;
3821 padding: 8px 2%;
3822 background-color: #fff;
3823 }
3824 .my-sites.striped li:nth-of-type(4n+1) {
3825 clear: left;
3826 }
3827 .my-sites.striped li:nth-of-type(4n+4):after {
3828 content: none;
3829 }
3830 .my-sites li:nth-of-type(8n+1),
3831 .my-sites li:nth-of-type(8n+2),
3832 .my-sites li:nth-of-type(8n+3),
3833 .my-sites li:nth-of-type(8n+4) {
3834 background-color: #f6f7f7;
3835 }
3836}
3837
3838@media only screen and (min-width: 1400px) and (max-width: 1599px) {
3839 .my-sites li {
3840 float: left;
3841 width: 16%;
3842 padding: 8px 2%;
3843 background-color: #fff;
3844 }
3845 .my-sites.striped li:nth-of-type(5n+1) {
3846 clear: left;
3847 }
3848 .my-sites.striped li:nth-of-type(5n+5):after {
3849 content: none;
3850 }
3851 .my-sites li:nth-of-type(10n+1),
3852 .my-sites li:nth-of-type(10n+2),
3853 .my-sites li:nth-of-type(10n+3),
3854 .my-sites li:nth-of-type(10n+4),
3855 .my-sites li:nth-of-type(10n+5) {
3856 background-color: #f6f7f7;
3857 }
3858}
3859
3860@media only screen and (min-width: 1600px) {
3861 .my-sites li {
3862 float: left;
3863 width: 12.666666%;
3864 padding: 8px 2%;
3865 background-color: #fff;
3866 }
3867 .my-sites.striped li:nth-of-type(6n+1) {
3868 clear: left;
3869 }
3870 .my-sites.striped li:nth-of-type(6n+6):after {
3871 content: none;
3872 }
3873 .my-sites li:nth-of-type(12n+1),
3874 .my-sites li:nth-of-type(12n+2),
3875 .my-sites li:nth-of-type(12n+3),
3876 .my-sites li:nth-of-type(12n+4),
3877 .my-sites li:nth-of-type(12n+5),
3878 .my-sites li:nth-of-type(12n+6) {
3879 background-color: #f6f7f7;
3880 }
3881}
3882
3883.my-sites li a {
3884 text-decoration: none;
3885}
3886
3887/* =Media Queries
3888-------------------------------------------------------------- */
3889
3890/**
3891 * HiDPI Displays
3892 */
3893@media print,
3894 (min-resolution: 120dpi) {
3895 /* Back-compat for pre-3.8 */
3896 div.star-holder,
3897 div.star-holder .star-rating {
3898 background: url(../images/stars-2x.png?ver=20121108) repeat-x bottom left;
3899 background-size: 21px 37px;
3900 }
3901
3902 .spinner {
3903 background-image: url(../images/spinner-2x.gif);
3904 }
3905
3906}
3907
3908@media screen and (max-width: 782px) {
3909 html.wp-toolbar {
3910 padding-top: var(--wp-admin--admin-bar--height);
3911 }
3912
3913 .screen-reader-shortcut:focus {
3914 top: -39px;
3915 }
3916
3917 .block-editor-page .screen-reader-shortcut:focus {
3918 top: 7px;
3919 }
3920
3921 .screen-reader-shortcut[href="#wp-toolbar"] {
3922 display: none;
3923 }
3924
3925 body {
3926 min-width: 240px;
3927 overflow-x: hidden;
3928 }
3929
3930 body * {
3931 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3932 }
3933
3934 #wpcontent {
3935 position: relative;
3936 margin-left: 0;
3937 padding-left: 10px;
3938 }
3939
3940 #wpbody-content {
3941 padding-bottom: 100px;
3942 }
3943
3944 .wrap {
3945 clear: both;
3946 margin-right: 12px;
3947 margin-left: 0;
3948 }
3949
3950 /* categories */
3951 #col-left,
3952 #col-right {
3953 float: none;
3954 width: auto;
3955 }
3956
3957 #col-left .col-wrap,
3958 #col-right .col-wrap {
3959 padding: 0;
3960 }
3961
3962 /* Hidden Elements */
3963 #collapse-menu,
3964 .post-format-select {
3965 display: none !important;
3966 }
3967
3968 .wrap h1.wp-heading-inline {
3969 margin-bottom: 0.5em;
3970 }
3971
3972 .wrap .add-new-h2, /* deprecated */
3973 .wrap .add-new-h2:active, /* deprecated */
3974 .wrap .page-title-action,
3975 .wrap .page-title-action:active {
3976 padding: 0 14px;
3977 font-size: 14px;
3978 white-space: nowrap;
3979 min-height: 40px;
3980 line-height: 2.71428571;
3981 vertical-align: middle;
3982 }
3983
3984 /* Feedback Messages */
3985 .notice,
3986 .wrap div.updated,
3987 .wrap div.error,
3988 .media-upload-form div.error {
3989 margin: 20px 0 10px;
3990 padding: 5px 10px;
3991 font-size: 14px;
3992 line-height: 175%;
3993 }
3994
3995 .wp-core-ui .notice.is-dismissible {
3996 padding-right: 46px;
3997 }
3998
3999 .notice-dismiss {
4000 padding: 13px;
4001 }
4002
4003 .wrap .icon32 + h2 {
4004 margin-top: -2px;
4005 }
4006
4007 .wp-responsive-open #wpbody {
4008 right: -16em;
4009 }
4010
4011 code {
4012 word-wrap: break-word;
4013 word-wrap: anywhere; /* Firefox. Allow breaking long words anywhere */
4014 word-break: break-word; /* Webkit: Treated similarly to word-wrap: break-word */
4015 }
4016
4017 /* General Metabox */
4018 .postbox {
4019 font-size: 14px;
4020 }
4021
4022 .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
4023 .metabox-holder .stuffbox > h3, /* Back-compat for pre-4.4 */
4024 .metabox-holder .postbox > h3, /* Back-compat for pre-4.4 */
4025 .metabox-holder h2 {
4026 padding: 12px;
4027 }
4028
4029 .nav-menus-php .metabox-holder h3 {
4030 padding: 0;
4031 }
4032
4033 .postbox .handlediv {
4034 margin-top: 3px;
4035 }
4036
4037 /* Subsubsub Nav */
4038 .subsubsub {
4039 font-size: 16px;
4040 text-align: center;
4041 margin-bottom: 15px;
4042 }
4043
4044 /* Theme/Plugin File Editor */
4045
4046 #template textarea,
4047 #template .CodeMirror {
4048 box-sizing: border-box;
4049 }
4050
4051 #templateside {
4052 float: none;
4053 width: auto;
4054 }
4055
4056 #templateside > ul {
4057 border-left: 1px solid #dcdcde;
4058 }
4059
4060 #templateside li {
4061 margin: 0;
4062 }
4063
4064 #templateside li:not(.howto) a {
4065 display: block;
4066 padding: 5px;
4067 }
4068 #templateside li.howto {
4069 padding: 12px;
4070 }
4071
4072 #templateside .highlight {
4073 padding: 5px;
4074 margin-left: -5px;
4075 margin-top: -5px;
4076 }
4077
4078 #template > div,
4079 #template .notice {
4080 float: none;
4081 margin: 1em 0;
4082 width: auto;
4083 }
4084
4085 #template .CodeMirror,
4086 #template textarea {
4087 width: 100%;
4088 }
4089
4090 #templateside ul ul {
4091 padding-left: 1.5em;
4092 }
4093 [role="treeitem"] .folder-label {
4094 display: block;
4095 padding: 5px;
4096 }
4097 .tree-folder > li::before,
4098 .tree-folder > li::after,
4099 .tree-folder .tree-folder::after {
4100 left: -8px;
4101 }
4102 .tree-folder > li::before {
4103 top: 0;
4104 height: 13px;
4105 }
4106 .tree-folder > .current-file::before {
4107 left: -5px;
4108 top: 7px;
4109 width: 4px;
4110 }
4111 .tree-folder > .current-file::after {
4112 height: 9px;
4113 left: -8px;
4114 }
4115 .wrap #templateside span.notice {
4116 margin-left: -5px;
4117 width: 100%;
4118 }
4119
4120 .fileedit-sub .alignright {
4121 float: left;
4122 margin-top: 15px;
4123 width: 100%;
4124 text-align: left;
4125 }
4126
4127 .fileedit-sub .alignright label {
4128 display: block;
4129 }
4130
4131 .fileedit-sub #theme,
4132 .fileedit-sub #plugin {
4133 margin-left: 0;
4134 max-width: 70%;
4135 }
4136
4137 .fileedit-sub input[type="submit"] {
4138 margin-bottom: 0;
4139 }
4140
4141 #documentation label[for="docs-list"] {
4142 display: block;
4143 }
4144
4145 #documentation select[name="docs-list"] {
4146 margin-left: 0;
4147 max-width: 60%;
4148 }
4149
4150 #documentation input[type="button"] {
4151 margin-bottom: 0;
4152 }
4153
4154 #wpfooter {
4155 display: none;
4156 }
4157
4158 #comments-form .checkforspam {
4159 display: none;
4160 }
4161
4162 .edit-comment-author {
4163 margin: 2px 0 0;
4164 }
4165
4166 .filter-drawer .filter-group-feature input,
4167 .filter-drawer .filter-group-feature label {
4168 line-height: 2.1;
4169 }
4170
4171 .filter-drawer .filter-group-feature label {
4172 margin-left: 32px;
4173 }
4174
4175 .wp-filter .button.drawer-toggle {
4176 font-size: 13px;
4177 line-height: 2;
4178 height: 28px;
4179 }
4180
4181 /* Fix help tab columns for smaller screens */
4182 #screen-meta #contextual-help-wrap {
4183 overflow: visible;
4184 }
4185
4186 #screen-meta #contextual-help-back,
4187 #screen-meta .contextual-help-sidebar {
4188 display: none;
4189 }
4190
4191 #screen-meta .contextual-help-tabs {
4192 clear: both;
4193 width: 100%;
4194 float: none;
4195 }
4196
4197 #screen-meta .contextual-help-tabs ul {
4198 margin: 0 0 1em;
4199 padding: 1em 0 0;
4200 }
4201
4202 #screen-meta .contextual-help-tabs .active {
4203 margin: 0;
4204 }
4205
4206 #screen-meta .contextual-help-tabs-wrap {
4207 clear: both;
4208 max-width: 100%;
4209 float: none;
4210 }
4211
4212 #screen-meta,
4213 #screen-meta-links {
4214 margin-right: 10px;
4215 }
4216
4217 #screen-meta-links {
4218 margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
4219 }
4220
4221 .wp-filter .search-form input[type="search"] {
4222 font-size: 1rem;
4223 }
4224
4225 .wp-filter .search-form.search-plugins {
4226 /* This element is a flex item. */
4227 min-width: 100%;
4228 }
4229}
4230
4231/* Smartphone */
4232@media screen and (max-width: 600px) {
4233 /* Disable horizontal scroll when responsive menu is open
4234 since we push the main content off to the right. */
4235 #wpwrap.wp-responsive-open {
4236 overflow-x: hidden;
4237 }
4238
4239 html.wp-toolbar {
4240 padding-top: 0;
4241 }
4242
4243 .screen-reader-shortcut:focus {
4244 top: 7px;
4245 }
4246
4247 #wpbody {
4248 padding-top: 46px;
4249 }
4250
4251 /* Keep full-width boxes on Edit Post page from causing horizontal scroll */
4252 div#post-body.metabox-holder.columns-1 {
4253 overflow-x: hidden;
4254 }
4255
4256 h1.nav-tab-wrapper,
4257 .wrap h2.nav-tab-wrapper,
4258 .nav-tab-wrapper {
4259 border-bottom: 0;
4260 }
4261
4262 h1 .nav-tab,
4263 h2 .nav-tab,
4264 h3 .nav-tab,
4265 nav .nav-tab {
4266 margin: 10px 10px 0 0;
4267 border-bottom: 1px solid #c3c4c7;
4268 }
4269
4270 .nav-tab-active:hover,
4271 .nav-tab-active:focus,
4272 .nav-tab-active:focus:active {
4273 border-bottom: 1px solid #c3c4c7;
4274 }
4275
4276 .wp-filter .search-form.search-plugins label {
4277 width: 100%;
4278 }
4279}
4280
4281@media screen and (max-width: 480px) {
4282 .metabox-prefs-container {
4283 display: grid;
4284 }
4285
4286 .metabox-prefs-container > * {
4287 display: inline-block;
4288 padding: 2px;
4289 }
4290}
4291
4292@media screen and (max-width: 320px) {
4293 /* Prevent default center alignment and larger font for the Right Now widget when
4294 the network dashboard is viewed on a small mobile device. */
4295 #network_dashboard_right_now .subsubsub {
4296 font-size: 14px;
4297 text-align: left;
4298 }
4299}
4300