122 .screen-reader-text, |
122 .screen-reader-text, |
123 .screen-reader-text span, |
123 .screen-reader-text span, |
124 .ui-helper-hidden-accessible { |
124 .ui-helper-hidden-accessible { |
125 border: 0; |
125 border: 0; |
126 clip: rect(1px, 1px, 1px, 1px); |
126 clip: rect(1px, 1px, 1px, 1px); |
127 -webkit-clip-path: inset(50%); |
|
128 clip-path: inset(50%); |
127 clip-path: inset(50%); |
129 height: 1px; |
128 height: 1px; |
130 margin: -1px; |
129 margin: -1px; |
131 overflow: hidden; |
130 overflow: hidden; |
132 padding: 0; |
131 padding: 0; |
137 |
136 |
138 .button .screen-reader-text { |
137 .button .screen-reader-text { |
139 height: auto; /* Fixes a Safari+VoiceOver bug, see ticket #42006 */ |
138 height: auto; /* Fixes a Safari+VoiceOver bug, see ticket #42006 */ |
140 } |
139 } |
141 |
140 |
|
141 .screen-reader-text + .dashicons-external { |
|
142 margin-top: -1px; |
|
143 margin-right: 2px; |
|
144 } |
|
145 |
142 .screen-reader-shortcut { |
146 .screen-reader-shortcut { |
143 position: absolute; |
147 position: absolute; |
144 top: -1000em; |
148 top: -1000em; |
145 } |
|
146 |
|
147 .screen-reader-shortcut:focus { |
|
148 right: 6px; |
149 right: 6px; |
149 top: -25px; |
|
150 height: auto; |
150 height: auto; |
151 width: auto; |
151 width: auto; |
152 display: block; |
152 display: block; |
153 font-size: 14px; |
153 font-size: 14px; |
154 font-weight: 600; |
154 font-weight: 600; |
155 padding: 15px 23px 14px; |
155 padding: 15px 23px 14px; |
|
156 /* Background and color set to prevent false positives in automated accessibility tests. */ |
156 background: #f0f0f1; |
157 background: #f0f0f1; |
157 color: #2271b1; |
158 color: #2271b1; |
158 z-index: 100000; |
159 z-index: 100000; |
159 line-height: normal; |
160 line-height: normal; |
|
161 } |
|
162 |
|
163 .screen-reader-shortcut:focus { |
|
164 top: -25px; |
|
165 /* Overrides a:focus in the admin. See ticket #56789. */ |
|
166 color: #2271b1; |
160 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); |
167 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); |
161 text-decoration: none; |
168 text-decoration: none; |
162 /* Only visible in Windows High Contrast mode */ |
169 /* Only visible in Windows High Contrast mode */ |
163 outline: 2px solid transparent; |
170 outline: 2px solid transparent; |
164 outline-offset: -2px; |
171 outline-offset: -2px; |
187 p.popular-tags, |
194 p.popular-tags, |
188 .widgets-holder-wrap, |
195 .widgets-holder-wrap, |
189 .wp-editor-container, |
196 .wp-editor-container, |
190 .popular-tags, |
197 .popular-tags, |
191 .feature-filter, |
198 .feature-filter, |
192 .imgedit-group, |
|
193 .comment-ays { |
199 .comment-ays { |
194 border: 1px solid #c3c4c7; |
200 border: 1px solid #c3c4c7; |
195 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); |
201 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); |
196 } |
202 } |
197 |
203 |
272 a:focus, |
277 a:focus, |
273 a:focus .media-icon img, |
278 a:focus .media-icon img, |
274 a:focus .plugin-icon, |
279 a:focus .plugin-icon, |
275 .wp-person a:focus .gravatar { |
280 .wp-person a:focus .gravatar { |
276 color: #043959; |
281 color: #043959; |
277 box-shadow: |
282 box-shadow: 0 0 0 2px #2271b1; |
278 0 0 0 1px #4f94d4, |
283 /* Only visible in Windows High Contrast mode */ |
279 0 0 2px 1px rgba(79, 148, 212, 0.8); |
284 outline: 2px solid transparent; |
280 /* Only visible in Windows High Contrast mode */ |
|
281 outline: 1px solid transparent; |
|
282 } |
285 } |
283 |
286 |
284 #adminmenu a:focus { |
287 #adminmenu a:focus { |
285 box-shadow: none; |
288 box-shadow: none; |
286 /* Only visible in Windows High Contrast mode */ |
289 /* Only visible in Windows High Contrast mode */ |
551 .update-php div.updated, |
554 .update-php div.updated, |
552 .update-php div.error { |
555 .update-php div.error { |
553 margin-right: 0; |
556 margin-right: 0; |
554 } |
557 } |
555 |
558 |
|
559 .js-update-details-toggle .dashicons { |
|
560 text-decoration: none; |
|
561 } |
|
562 |
|
563 .js-update-details-toggle[aria-expanded="true"] .dashicons::before { |
|
564 content: "\f142"; |
|
565 } |
|
566 |
556 .no-js .widefat thead .check-column input, |
567 .no-js .widefat thead .check-column input, |
557 .no-js .widefat tfoot .check-column input { |
568 .no-js .widefat tfoot .check-column input { |
558 display: none; |
569 display: none; |
559 } |
570 } |
560 |
571 |
569 vertical-align: middle; |
580 vertical-align: middle; |
570 } |
581 } |
571 |
582 |
572 .wrap { |
583 .wrap { |
573 margin: 10px 2px 0 20px; |
584 margin: 10px 2px 0 20px; |
574 } |
|
575 |
|
576 .wrap.block-editor-no-js { |
|
577 padding-right: 20px; |
|
578 } |
585 } |
579 |
586 |
580 .wrap > h2:first-child, /* Back-compat for pre-4.4 */ |
587 .wrap > h2:first-child, /* Back-compat for pre-4.4 */ |
581 .wrap [class$="icon32"] + h2, /* Back-compat for pre-4.4 */ |
588 .wrap [class$="icon32"] + h2, /* Back-compat for pre-4.4 */ |
582 .postbox .inside h2, /* Back-compat for pre-4.4 */ |
589 .postbox .inside h2, /* Back-compat for pre-4.4 */ |
613 |
620 |
614 .wrap .add-new-h2, /* deprecated */ |
621 .wrap .add-new-h2, /* deprecated */ |
615 .wrap .add-new-h2:active, /* deprecated */ |
622 .wrap .add-new-h2:active, /* deprecated */ |
616 .wrap .page-title-action, |
623 .wrap .page-title-action, |
617 .wrap .page-title-action:active { |
624 .wrap .page-title-action:active { |
|
625 display: inline-block; |
|
626 position: relative; |
|
627 box-sizing: border-box; |
|
628 cursor: pointer; |
|
629 white-space: nowrap; |
|
630 text-decoration: none; |
|
631 text-shadow: none; |
|
632 top: -3px; |
618 margin-right: 4px; |
633 margin-right: 4px; |
619 padding: 4px 8px; |
|
620 position: relative; |
|
621 top: -3px; |
|
622 text-decoration: none; |
|
623 border: 1px solid #2271b1; |
634 border: 1px solid #2271b1; |
624 border-radius: 2px; |
635 border-radius: 3px; |
625 text-shadow: none; |
636 background: #f6f7f7; |
626 font-weight: 600; |
|
627 font-size: 13px; |
637 font-size: 13px; |
628 line-height: normal; /* IE8-IE11 need this for buttons */ |
638 font-weight: 400; |
|
639 line-height: 2.15384615; |
629 color: #2271b1; /* use the standard color used for buttons */ |
640 color: #2271b1; /* use the standard color used for buttons */ |
630 background: #f6f7f7; |
641 padding: 0 10px; |
631 cursor: pointer; |
642 min-height: 30px; |
|
643 -webkit-appearance: none; |
|
644 |
632 } |
645 } |
633 |
646 |
634 .wrap .wp-heading-inline + .page-title-action { |
647 .wrap .wp-heading-inline + .page-title-action { |
635 margin-right: 0; |
648 margin-right: 0; |
636 } |
649 } |
1101 /* This element is a flex item: the inherited float won't have any effect. */ |
1116 /* This element is a flex item: the inherited float won't have any effect. */ |
1102 margin-top: 0; |
1117 margin-top: 0; |
1103 } |
1118 } |
1104 |
1119 |
1105 .wp-filter .search-form.search-plugins select, |
1120 .wp-filter .search-form.search-plugins select, |
1106 .wp-filter .search-form.search-plugins .wp-filter-search { |
1121 .wp-filter .search-form.search-plugins .wp-filter-search, |
|
1122 .no-js .wp-filter .search-form.search-plugins .button { |
1107 display: inline-block; |
1123 display: inline-block; |
1108 margin-top: 10px; |
|
1109 vertical-align: top; |
1124 vertical-align: top; |
1110 } |
1125 } |
1111 |
1126 |
1112 .wp-filter .button.drawer-toggle { |
1127 .wp-filter .button.drawer-toggle { |
1113 margin: 10px 9px 0; |
1128 margin: 10px 9px 0; |
1480 border-right-color: #72aee6; |
1499 border-right-color: #72aee6; |
1481 } |
1500 } |
1482 |
1501 |
1483 .notice-info.notice-alt { |
1502 .notice-info.notice-alt { |
1484 background-color: #f0f6fc; |
1503 background-color: #f0f6fc; |
|
1504 } |
|
1505 |
|
1506 #plugin-information-footer .update-now:not(.button-disabled):before { |
|
1507 color: #d63638; |
|
1508 content: "\f463"; |
|
1509 display: inline-block; |
|
1510 font: normal 20px/1 dashicons; |
|
1511 margin: -3px -2px 0 5px; |
|
1512 speak: never; |
|
1513 -webkit-font-smoothing: antialiased; |
|
1514 -moz-osx-font-smoothing: grayscale; |
|
1515 vertical-align: middle; |
|
1516 } |
|
1517 |
|
1518 #plugin-information-footer .notice { |
|
1519 margin-top: -5px; |
1485 } |
1520 } |
1486 |
1521 |
1487 .update-message p:before, |
1522 .update-message p:before, |
1488 .updating-message p:before, |
1523 .updating-message p:before, |
1489 .updated-message p:before, |
1524 .updated-message p:before, |
1490 .import-php .updating-message:before, |
1525 .import-php .updating-message:before, |
1491 .button.updating-message:before, |
1526 .button.updating-message:before, |
1492 .button.updated-message:before, |
1527 .button.updated-message:before, |
1493 .button.installed:before, |
1528 .button.installed:before, |
1494 .button.installing:before { |
1529 .button.installing:before, |
|
1530 .button.activating-message:before, |
|
1531 .button.activated-message:before { |
1495 display: inline-block; |
1532 display: inline-block; |
1496 font: normal 20px/1 'dashicons'; |
1533 font: normal 20px/1 'dashicons'; |
1497 -webkit-font-smoothing: antialiased; |
1534 -webkit-font-smoothing: antialiased; |
1498 -moz-osx-font-smoothing: grayscale; |
1535 -moz-osx-font-smoothing: grayscale; |
1499 vertical-align: top; |
1536 vertical-align: top; |
1526 /* Update icon. */ |
1563 /* Update icon. */ |
1527 .update-message p:before, |
1564 .update-message p:before, |
1528 .updating-message p:before, |
1565 .updating-message p:before, |
1529 .import-php .updating-message:before, |
1566 .import-php .updating-message:before, |
1530 .button.updating-message:before, |
1567 .button.updating-message:before, |
1531 .button.installing:before { |
1568 .button.installing:before, |
|
1569 .button.activating-message:before { |
1532 color: #d63638; |
1570 color: #d63638; |
1533 content: "\f463"; |
1571 content: "\f463"; |
1534 } |
1572 } |
1535 |
1573 |
1536 /* Spins the update icon. */ |
1574 /* Spins the update icon. */ |
1537 .updating-message p:before, |
1575 .updating-message p:before, |
1538 .import-php .updating-message:before, |
1576 .import-php .updating-message:before, |
1539 .button.updating-message:before, |
1577 .button.updating-message:before, |
1540 .button.installing:before, |
1578 .button.installing:before, |
|
1579 .button.activating-message:before, |
1541 .plugins .column-auto-updates .dashicons-update.spin, |
1580 .plugins .column-auto-updates .dashicons-update.spin, |
1542 .theme-overlay .theme-autoupdate .dashicons-update.spin { |
1581 .theme-overlay .theme-autoupdate .dashicons-update.spin { |
1543 animation: rotation 2s infinite linear; |
1582 animation: rotation 2s infinite linear; |
1544 } |
1583 } |
1545 |
1584 |
1546 @media (prefers-reduced-motion: reduce) { |
1585 @media (prefers-reduced-motion: reduce) { |
1547 .updating-message p:before, |
1586 .updating-message p:before, |
1548 .import-php .updating-message:before, |
1587 .import-php .updating-message:before, |
1549 .button.updating-message:before, |
1588 .button.updating-message:before, |
1550 .button.installing:before, |
1589 .button.installing:before, |
|
1590 .button.activating-message:before, |
1551 .plugins .column-auto-updates .dashicons-update.spin, |
1591 .plugins .column-auto-updates .dashicons-update.spin, |
1552 .theme-overlay .theme-autoupdate .dashicons-update.spin { |
1592 .theme-overlay .theme-autoupdate .dashicons-update.spin { |
1553 animation: none; |
1593 animation: none; |
1554 } |
1594 } |
1555 } |
1595 } |
1641 } |
1685 } |
1642 |
1686 |
1643 .button.updating-message:before, |
1687 .button.updating-message:before, |
1644 .button.updated-message:before, |
1688 .button.updated-message:before, |
1645 .button.installed:before, |
1689 .button.installed:before, |
1646 .button.installing:before { |
1690 .button.installing:before, |
|
1691 .button.activated-message:before, |
|
1692 .button.activating-message:before { |
1647 margin: 3px -2px 0 5px; |
1693 margin: 3px -2px 0 5px; |
1648 } |
1694 } |
1649 |
1695 |
1650 .button-primary.updating-message:before { |
1696 #plugin-information-footer .button { |
|
1697 padding: 0 14px; |
|
1698 line-height: 2.71428571; /* 38px */ |
|
1699 font-size: 14px; |
|
1700 vertical-align: middle; |
|
1701 min-height: 40px; |
|
1702 margin-bottom: 4px; |
|
1703 } |
|
1704 |
|
1705 #plugin-information-footer .button.installed:before, |
|
1706 #plugin-information-footer .button.installing:before, |
|
1707 #plugin-information-footer .button.updating-message:before, |
|
1708 #plugin-information-footer .button.updated-message:before, |
|
1709 #plugin-information-footer .button.activated-message:before, |
|
1710 #plugin-information-footer .button.activating-message:before { |
|
1711 margin: 9px -2px 0 5px; |
|
1712 } |
|
1713 |
|
1714 #plugin-information-footer .button.update-now.updating-message:before { |
|
1715 margin: -3px -2px 0 5px; |
|
1716 } |
|
1717 |
|
1718 .button-primary.updating-message:before, |
|
1719 .button-primary.activating-message:before { |
1651 color: #fff; |
1720 color: #fff; |
1652 } |
1721 } |
1653 |
1722 |
1654 .button-primary.updated-message:before { |
1723 .button-primary.updated-message:before, |
|
1724 .button-primary.activated-message:before { |
1655 color: #9ec2e6; |
1725 color: #9ec2e6; |
1656 } |
1726 } |
1657 |
1727 |
1658 .button.updated-message { |
1728 .button.updated-message, |
|
1729 .button.activated-message { |
1659 transition-property: border, background, color; |
1730 transition-property: border, background, color; |
1660 transition-duration: .05s; |
1731 transition-duration: .05s; |
1661 transition-timing-function: ease-in-out; |
1732 transition-timing-function: ease-in-out; |
1662 } |
1733 } |
1663 |
1734 |
1743 #screen-meta-links .show-settings:focus { |
1814 #screen-meta-links .show-settings:focus { |
1744 color: #2c3338; |
1815 color: #2c3338; |
1745 } |
1816 } |
1746 |
1817 |
1747 #screen-meta-links .show-settings:focus { |
1818 #screen-meta-links .show-settings:focus { |
1748 border-color: #4f94d4; |
1819 border-color: #2271b1; |
1749 box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); |
1820 box-shadow: 0 0 0 1px #2271b1; |
|
1821 /* Only visible in Windows High Contrast mode */ |
|
1822 outline: 2px solid transparent; |
1750 } |
1823 } |
1751 |
1824 |
1752 #screen-meta-links .show-settings:active { |
1825 #screen-meta-links .show-settings:active { |
1753 transform: none; |
1826 transform: none; |
1754 } |
1827 } |
3120 } |
3198 } |
3121 |
3199 |
3122 .postbox .handle-order-higher:focus, |
3200 .postbox .handle-order-higher:focus, |
3123 .postbox .handle-order-lower:focus, |
3201 .postbox .handle-order-lower:focus, |
3124 .postbox .handlediv:focus { |
3202 .postbox .handlediv:focus { |
3125 box-shadow: |
3203 box-shadow: inset 0 0 0 2px #2271b1; |
3126 0 0 0 1px #4f94d4, |
3204 border-radius: 50%; |
3127 0 0 2px 1px rgba(79, 148, 212, 0.8); |
|
3128 /* Only visible in Windows High Contrast mode */ |
3205 /* Only visible in Windows High Contrast mode */ |
3129 outline: 1px solid transparent; |
3206 outline: 2px solid transparent; |
3130 } |
3207 } |
3131 |
3208 |
3132 .postbox .handle-order-higher:focus .order-higher-indicator::before, |
3209 .postbox .handle-order-higher:focus .order-higher-indicator::before, |
3133 .postbox .handle-order-lower:focus .order-lower-indicator::before, |
3210 .postbox .handle-order-lower:focus .order-lower-indicator::before, |
3134 .postbox .handlediv:focus .toggle-indicator::before { |
3211 .postbox .handlediv:focus .toggle-indicator::before { |
3224 |
3300 |
3225 /* Remove outline, and create our own focus and hover styles */ |
3301 /* Remove outline, and create our own focus and hover styles */ |
3226 [role="treeitem"] { |
3302 [role="treeitem"] { |
3227 outline: 0; |
3303 outline: 0; |
3228 } |
3304 } |
|
3305 |
|
3306 [role="treeitem"] a:focus, |
3229 [role="treeitem"] .folder-label.focus { |
3307 [role="treeitem"] .folder-label.focus { |
3230 color: #043959; |
3308 color: #043959; |
3231 box-shadow: |
3309 /* Reset default focus style. */ |
3232 0 0 0 1px #4f94d4, |
3310 box-shadow: none; |
3233 0 0 2px 1px rgba(79, 148, 212, 0.8); |
3311 /* Use an inset outline instead, so it's visible also over the current file item. */ |
3234 } |
3312 outline: 2px solid #2271b1; |
|
3313 outline-offset: -2px; |
|
3314 } |
|
3315 |
3235 [role="treeitem"].hover, |
3316 [role="treeitem"].hover, |
3236 [role="treeitem"] .folder-label.hover { |
3317 [role="treeitem"] .folder-label.hover { |
3237 background-color: #f0f0f1; |
3318 background-color: #f0f0f1; |
3238 } |
3319 } |
3239 |
3320 |
3456 .item-edit:focus, |
3541 .item-edit:focus, |
3457 .sidebar-name:hover .toggle-indicator, |
3542 .sidebar-name:hover .toggle-indicator, |
3458 .accordion-section-title:hover:after { |
3543 .accordion-section-title:hover:after { |
3459 color: #1d2327; |
3544 color: #1d2327; |
3460 /* Only visible in Windows High Contrast mode */ |
3545 /* Only visible in Windows High Contrast mode */ |
3461 outline: 1px solid transparent; |
3546 outline: 2px solid transparent; |
3462 } |
3547 } |
3463 |
3548 |
3464 .widget-top .widget-action:focus .toggle-indicator:before { |
3549 .widget-top .widget-action:focus .toggle-indicator:before { |
3465 box-shadow: |
3550 box-shadow: 0 0 0 2px #2271b1; |
3466 0 0 0 1px #4f94d4, |
3551 /* Only visible in Windows High Contrast mode */ |
3467 0 0 2px 1px rgba(79, 148, 212, 0.8); |
3552 outline: 2px solid transparent; |
3468 } |
3553 } |
3469 |
3554 |
3470 .control-section .accordion-section-title:after, |
3555 .control-section .accordion-section-title:after, |
3471 .accordion-section-title:after { |
3556 .accordion-section-title:after { |
3472 float: left; |
3557 float: left; |
4106 .nav-tab-active:focus, |
4190 .nav-tab-active:focus, |
4107 .nav-tab-active:focus:active { |
4191 .nav-tab-active:focus:active { |
4108 border-bottom: 1px solid #c3c4c7; |
4192 border-bottom: 1px solid #c3c4c7; |
4109 } |
4193 } |
4110 |
4194 |
4111 .wp-filter .search-form input[type="search"] { |
4195 .wp-filter .search-form.search-plugins label { |
4112 width: 100%; |
4196 width: 100%; |
|
4197 } |
|
4198 } |
|
4199 |
|
4200 @media screen and (max-width: 480px) { |
|
4201 .metabox-prefs-container { |
|
4202 display: grid; |
|
4203 } |
|
4204 |
|
4205 .metabox-prefs-container > * { |
|
4206 display: inline-block; |
|
4207 padding: 2px; |
4113 } |
4208 } |
4114 } |
4209 } |
4115 |
4210 |
4116 @media screen and (max-width: 320px) { |
4211 @media screen and (max-width: 320px) { |
4117 /* Prevent default center alignment and larger font for the Right Now widget when |
4212 /* Prevent default center alignment and larger font for the Right Now widget when |