--- a/wp/wp-admin/css/common.css Tue Oct 22 16:11:46 2019 +0200
+++ b/wp/wp-admin/css/common.css Tue Dec 15 13:49:49 2020 +0100
@@ -26,7 +26,7 @@
padding-bottom: 65px;
float: left;
width: 100%;
- overflow: visible !important;
+ overflow: visible;
}
/* inner 2 column liquid layout */
@@ -190,7 +190,7 @@
.feature-filter,
.imgedit-group,
.comment-ays {
- border: 1px solid #e5e5e5;
+ border: 1px solid #ccd0d4;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
@@ -265,7 +265,7 @@
a:hover,
a:active {
- color: #00a0d2;
+ color: #006799;
}
a:focus,
@@ -275,12 +275,8 @@
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
- /* Only visible in Windows High Contrast mode */
- outline: 1px solid transparent;
-}
-
-.ie8 a:focus {
- outline: #5b9dd9 solid 1px;
+ /* Only visible in Windows High Contrast mode */
+ outline: 1px solid transparent;
}
#adminmenu a:focus {
@@ -308,7 +304,8 @@
content: none;
}
-p {
+p,
+.wp-die-message {
font-size: 13px;
line-height: 1.5;
margin: 1em 0;
@@ -484,12 +481,12 @@
.widefat thead th,
.widefat thead td {
- border-bottom: 1px solid #e1e1e1;
+ border-bottom: 1px solid #ccd0d4;
}
.widefat tfoot th,
.widefat tfoot td {
- border-top: 1px solid #e1e1e1;
+ border-top: 1px solid #ccd0d4;
border-bottom: none;
}
@@ -617,15 +614,14 @@
position: relative;
top: -3px;
text-decoration: none;
- border: none;
- border: 1px solid #ccc;
+ border: 1px solid #0071a1;
border-radius: 2px;
- background: #f7f7f7;
text-shadow: none;
font-weight: 600;
font-size: 13px;
line-height: normal; /* IE8-IE11 need this for buttons */
- color: #0073aa; /* some of these controls are button elements and don't inherit from links */
+ color: #0071a1; /* use the standard color used for buttons */
+ background: #f3f5f6;
cursor: pointer;
}
@@ -635,19 +631,25 @@
.wrap .add-new-h2:hover, /* deprecated */
.wrap .page-title-action:hover {
- border-color: #008EC2;
- background: #00a0d2;
- color: #fff;
+ background: #f1f1f1;
+ border-color: #016087;
+ color: #016087;
}
/* lower specificity: color needs to be overridden by :hover and :active */
.page-title-action:focus {
- color: #124964;
+ color: #016087;
+}
+
+/* Dashicon for language options on General Settings and Profile screens */
+.form-table th label[for="locale"] .dashicons,
+.form-table th label[for="WPLANG"] .dashicons {
+ margin-left: 5px;
}
.wrap .page-title-action:focus {
- border-color: #5b9dd9;
- box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
+ border-color: #007cba;
+ box-shadow: 0 0 0 1px #007cba;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
@@ -765,13 +767,11 @@
color: #23282d;
}
-.postbox .hndle,
.stuffbox .hndle {
- border-bottom: 1px solid #eee;
-}
-
-.quicktags,
-.search {
+ border-bottom: 1px solid #ccd0d4;
+}
+
+.quicktags {
background-color: #ccc;
color: #000;
font-size: 12px;
@@ -850,7 +850,6 @@
.howto {
color: #666;
- font-style: italic;
display: block;
}
@@ -914,11 +913,11 @@
#delete-action {
float: left;
- line-height: 2.1;
+ line-height: 2.30769231; /* 30px */
}
#delete-link {
- line-height: 2.1;
+ line-height: 2.30769231; /* 30px */
vertical-align: middle;
text-align: left;
margin-left: 8px;
@@ -935,7 +934,8 @@
}
#publishing-action .spinner {
- float: left;
+ float: none;
+ margin-top: 5px;
}
#misc-publishing-actions {
@@ -997,7 +997,7 @@
padding: 0 10px;
width: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
- border: 1px solid #e5e5e5;
+ border: 1px solid #ccd0d4;
background: #fff;
color: #555;
font-size: 13px;
@@ -1067,7 +1067,7 @@
.filter-links li > a:focus,
.show-filters .filter-links a.current:hover,
.show-filters .filter-links a.current:focus {
- color: #00a0d2;
+ color: #006799;
}
.wp-filter .search-form {
@@ -1076,23 +1076,33 @@
}
.wp-filter .search-form input[type="search"] {
- margin: 0;
- padding: 3px 5px;
+ margin: 1px 0;
width: 280px;
max-width: 100%;
- font-size: 16px;
- font-weight: 300;
- line-height: 1.5;
}
.wp-filter .search-form select {
margin: 0;
- height: 32px;
- vertical-align: top;
+}
+
+/* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */
+.plugin-install-php .wp-filter {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
}
.wp-filter .search-form.search-plugins {
+ /* This element is a flex item: the inherited float won't have any effect. */
+ margin-top: 0;
+}
+
+.wp-filter .search-form.search-plugins select,
+.wp-filter .search-form.search-plugins .wp-filter-search {
display: inline-block;
+ margin-top: 10px;
+ vertical-align: top;
}
.wp-filter .button.drawer-toggle {
@@ -1120,7 +1130,7 @@
.wp-filter .button.drawer-toggle:focus,
.wp-filter .drawer-toggle:focus:before {
background-color: transparent;
- color: #00a0d2;
+ color: #006799;
}
.wp-filter .button.drawer-toggle:hover,
@@ -1275,7 +1285,7 @@
.filters-applied .filter-group,
.filters-applied .filter-drawer .buttons,
.filters-applied .filter-drawer br {
- display: none !important;
+ display: none;
}
.filters-applied .filtered-by {
@@ -1364,8 +1374,9 @@
div.updated,
div.error {
background: #fff;
- border-left: 4px solid #fff;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid #ccd0d4;
+ border-left-width: 4px;
+ box-shadow: 0 1px 1px rgba(0,0,0,.04);
margin: 5px 15px 2px;
padding: 1px 12px;
}
@@ -1430,11 +1441,9 @@
.notice-dismiss:focus {
outline: none;
- box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
-}
-
-.ie8 .notice-dismiss:focus {
- outline: 1px solid #5b9dd9;
+ box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, 0.8);
}
.notice-success,
@@ -1524,10 +1533,16 @@
.updating-message p:before,
.import-php .updating-message:before,
.button.updating-message:before,
-.button.installing:before {
+.button.installing:before,
+.plugins .column-auto-updates .dashicons-update.spin,
+.theme-overlay .theme-autoupdate .dashicons-update.spin {
animation: rotation 2s infinite linear;
}
+.theme-overlay .theme-autoupdate .dashicons-update.spin {
+ margin-right: 3px;
+}
+
/* Updated icon (check mark). */
.updated-message p:before,
.installed p:before,
@@ -1554,11 +1569,7 @@
line-height: 1.4;
padding: 11px 15px;
font-size: 14px;
- text-align: left;
margin: 25px 20px 0 2px;
- background-color: #fff;
- border-left: 4px solid #ffba00;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
ul#dismissed-updates {
@@ -1655,7 +1666,7 @@
#contextual-help-wrap {
overflow: auto;
- margin-left: 0 !important;
+ margin-left: 0;
}
#screen-meta-links {
@@ -1669,9 +1680,9 @@
margin: 0 20px -1px 0px;
position: relative;
background-color: #fff;
- border: 1px solid #ddd;
+ border: 1px solid #ccd0d4;
border-top: none;
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.025);
+ box-shadow: 0 0 0 transparent;
}
#screen-options-link-wrap,
@@ -1686,17 +1697,17 @@
}
#screen-meta-links .show-settings {
- border: 1px solid #ddd;
+ border: 1px solid #ccd0d4;
border-top: none;
- border-bottom-color: #ccc;
height: auto;
margin-bottom: 0;
padding: 3px 6px 3px 16px;
background: #fff;
- border-radius: 0;
+ border-radius: 0 0 4px 4px;
color: #72777c;
line-height: 1.7;
- box-shadow: none;
+ box-shadow: 0 0 0 transparent;
+ transition: box-shadow 0.1s linear;
}
#screen-meta-links .show-settings:hover,
@@ -1726,7 +1737,7 @@
vertical-align: bottom;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-decoration: none !important;
+ text-decoration: none;
color: #72777c;
}
@@ -1758,10 +1769,6 @@
font-weight: 600;
}
-.ie8 #screen-options-wrap legend {
- color: inherit;
-}
-
.metabox-prefs label {
display: inline-block;
padding-right: 15px;
@@ -1835,7 +1842,7 @@
bottom: 0;
left: 150px;
right: 170px;
- border: 1px solid #e1e1e1;
+ border: 1px solid #ccd0d4;
border-top: none;
border-bottom: none;
background: #f6fbfd;
@@ -1888,7 +1895,7 @@
}
.contextual-help-tabs .active a {
- border-color: #e1e1e1;
+ border-color: #ccd0d4;
color: #32373c;
}
@@ -1978,37 +1985,12 @@
padding-top: 10px;
}
-.metabox-holder .postbox-container .empty-container {
- border: 3px dashed #b4b9be;
- height: 250px;
+.metabox-holder .postbox-container .meta-box-sortables {
+ /* The jQuery UI Sortables need some initial height to work properly. */
+ min-height: 1px;
position: relative;
}
-.metabox-holder .postbox-container .empty-container:after {
- content: attr(data-emptystring);
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- height: 1em;
- width: 200px;
- text-align: center;
- color: #ccc;
- font-size: 18px;
- display: none;
-}
-
-.metabox-holder.columns-1 .postbox-container .empty-container,
-.columns-2 #postbox-container-3 .empty-container,
-.columns-2 #postbox-container-4 .empty-container,
-.columns-3 #postbox-container-4 .empty-container {
- border: 0 none;
- height: 0;
- min-height: 0;
-}
-
#post-body-content {
width: 100%;
min-width: 463px;
@@ -2028,7 +2010,7 @@
/* one column on the dash */
@media only screen and (max-width: 799px) {
#wpbody-content .metabox-holder .postbox-container .empty-container {
- border: 0 none;
+ outline: none;
height: 0;
min-height: 0;
}
@@ -2039,14 +2021,40 @@
cursor: move;
}
+.js .widget .widget-top.is-non-sortable,
+.js .postbox .hndle.is-non-sortable {
+ cursor: auto;
+}
+
+/* Configurable dashboard widgets "Configure" edit-box link. */
.hndle a {
- font-size: 11px;
+ font-size: 12px;
font-weight: 400;
}
+.postbox-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid #ccd0d4;
+}
+
+.postbox-header .hndle {
+ flex-grow: 1;
+ /* Handle the alignment for the configurable dashboard widgets "Configure" edit-box link. */
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.postbox-header .handle-actions {
+ flex-shrink: 0;
+}
+
+/* Post box order and toggle buttons. */
+.postbox .handle-order-higher,
+.postbox .handle-order-lower,
.postbox .handlediv {
- display: none;
- float: right;
width: 36px;
height: 36px;
margin: 0;
@@ -2056,8 +2064,24 @@
cursor: pointer;
}
-.js .postbox .handlediv {
- display: block;
+.postbox .handle-order-higher,
+.postbox .handle-order-lower {
+ color: #72777c;
+ width: 1.62rem;
+}
+
+/* Post box order buttons in the block editor meta boxes area. */
+.edit-post-meta-boxes-area .postbox .handle-order-higher,
+.edit-post-meta-boxes-area .postbox .handle-order-lower {
+ width: 44px;
+ height: 44px;
+ color: #191e23
+}
+
+.postbox .handle-order-higher[aria-disabled="true"],
+.postbox .handle-order-lower[aria-disabled="true"] {
+ cursor: default;
+ color: #a0a5aa;
}
.sortable-placeholder {
@@ -2072,6 +2096,10 @@
line-height: 1;
}
+.postbox.closed {
+ border-bottom: 0;
+}
+
/* user-select is not a part of the CSS standard - may change behavior in the future */
.postbox .hndle,
.stuffbox .hndle {
@@ -2138,7 +2166,8 @@
#pass-strength-result.short,
#ed_reply_toolbar #ed_reply_strong,
.item-controls .item-order a,
-.feature-filter .feature-name {
+.feature-filter .feature-name,
+#comment-status-display {
font-weight: 600;
}
@@ -2233,13 +2262,6 @@
clear: both;
}
-.ie8 .nav-tab-wrapper {
- /* contain floats establishing a new block formatting context */
- display: inline-block;
- width: 100%;
- vertical-align: top;
-}
-
/*------------------------------------------------------------------------------
26.0 - Misc
------------------------------------------------------------------------------*/
@@ -2415,10 +2437,6 @@
margin: 10px 0;
}
-#submitdiv h3 {
- margin-bottom: 0 !important;
-}
-
/* - Used - but could/should be deprecated with a CSS reset
------------------------------------------------------------------------------*/
.zerosize {
@@ -2659,7 +2677,7 @@
margin-top: 10px;
margin-right: 250px; /* FYI box */
padding: 10px 26px;
- margin-bottom: -99939px; /* 60px less than the padding below to accommodate footer */
+ margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
padding-bottom: 99999px; /* equal height column trick */
}
@@ -2677,7 +2695,7 @@
top: 0;
right: 0;
padding: 16px;
- margin-bottom: -99939px; /* 60px less than the padding below to accommodate footer */
+ margin-bottom: -99932px; /* 67px less than the padding below to accommodate footer height */
padding-bottom: 99999px; /* equal height column trick */
width: 217px;
border-left: 1px solid #ddd;
@@ -2771,7 +2789,7 @@
right: 0;
bottom: 0;
left: 0;
- height: 33px; /* 33+13+13+1=60 */
+ height: 40px; /* actual height: 40+13+13+1=67 */
border-top: 1px solid #ddd;
background: #f3f3f3;
}
@@ -2984,7 +3002,7 @@
.plugin-details-modal #TB_closeWindowButton:hover,
.plugin-details-modal #TB_closeWindowButton:focus {
- color: #00a0d2;
+ color: #006799;
outline: none;
box-shadow: none;
}
@@ -3015,52 +3033,83 @@
}
/* Metabox collapse arrow indicators */
-.sidebar-name .toggle-indicator:before,
-.js .meta-box-sortables .postbox .toggle-indicator:before,
-.bulk-action-notice .toggle-indicator:before,
-.privacy-text-box .toggle-indicator:before {
+.sidebar-name .toggle-indicator::before,
+.meta-box-sortables .postbox .toggle-indicator::before,
+.meta-box-sortables .postbox .order-higher-indicator::before,
+.meta-box-sortables .postbox .order-lower-indicator::before,
+.bulk-action-notice .toggle-indicator::before,
+.privacy-text-box .toggle-indicator::before {
content: "\f142";
display: inline-block;
font: normal 20px/1 dashicons;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-decoration: none !important;
-}
-
-.js .widgets-holder-wrap.closed .toggle-indicator:before,
-.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
-.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before,
-.privacy-text-box.closed .toggle-indicator:before {
+ text-decoration: none;
+}
+
+.js .widgets-holder-wrap.closed .toggle-indicator::before,
+.meta-box-sortables .postbox.closed .handlediv .toggle-indicator::before,
+.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator::before,
+.privacy-text-box.closed .toggle-indicator::before {
content: "\f140";
}
-.js .postbox .handlediv .toggle-indicator:before {
- margin-top: 4px;
+.postbox .handle-order-higher .order-higher-indicator::before {
+ content: "\f343";
+ color: inherit;
+}
+
+.postbox .handle-order-lower .order-lower-indicator::before {
+ content: "\f347";
+ color: inherit;
+}
+
+.postbox .handle-order-higher .order-higher-indicator::before,
+.postbox .handle-order-lower .order-lower-indicator::before {
+ position: relative;
+ top: 0.11rem;
+ width: 20px;
+ height: 20px;
+}
+
+.postbox .handlediv .toggle-indicator::before {
width: 20px;
border-radius: 50%;
- text-indent: -1px; /* account for the dashicon alignment */
-}
-
-.rtl.js .postbox .handlediv .toggle-indicator:before {
- text-indent: 1px; /* account for the dashicon alignment */
-}
-
-.bulk-action-notice .toggle-indicator:before {
+}
+
+.postbox .handlediv .toggle-indicator::before {
+ position: relative;
+ top: 0.05rem;
+ text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
+}
+
+.rtl .postbox .handlediv .toggle-indicator::before {
+ text-indent: 1px; /* account for the dashicon glyph uneven horizontal alignment */
+}
+
+.bulk-action-notice .toggle-indicator::before {
line-height: 16px;
vertical-align: top;
color: #72777c;
}
-.js .postbox .handlediv:focus {
- box-shadow: none;
- outline: none;
-}
-
-.js .postbox .handlediv:focus .toggle-indicator:before {
+.postbox .handle-order-higher:focus,
+.postbox .handle-order-lower:focus,
+.postbox .handlediv:focus {
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
+ /* Only visible in Windows High Contrast mode */
+ outline: 1px solid transparent;
+}
+
+.postbox .handle-order-higher:focus .order-higher-indicator::before,
+.postbox .handle-order-lower:focus .order-lower-indicator::before,
+.postbox .handlediv:focus .toggle-indicator::before {
+ box-shadow: none;
+ /* Only visible in Windows High Contrast mode */
+ outline: 1px solid transparent;
}
/* @todo: appears to be Press This only and overridden */
@@ -3155,7 +3204,9 @@
}
[role="treeitem"] .folder-label.focus {
color: #124964;
- box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
+ box-shadow:
+ 0 0 0 1px #5b9dd9,
+ 0 0 2px 1px rgba(30, 140, 190, 0.8);
}
[role="treeitem"].hover,
[role="treeitem"] .folder-label.hover {
@@ -3348,7 +3399,7 @@
display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-decoration: none !important;
+ text-decoration: none;
}
.widget-top .widget-action .toggle-indicator:before {
@@ -3379,6 +3430,8 @@
.sidebar-name:hover .toggle-indicator,
.accordion-section-title:hover:after {
color: #23282d;
+ /* Only visible in Windows High Contrast mode */
+ outline: 1px solid transparent;
}
.widget-top .widget-action:focus .toggle-indicator:before {
@@ -3461,12 +3514,15 @@
}
.accordion-section-title:focus {
- outline: none;
+ /* Only visible in Windows High Contrast mode */
+ outline: 1px solid transparent;
}
.accordion-section-title:hover:after,
.accordion-section-title:focus:after {
border-color: #a0a5aa transparent;
+ /* Only visible in Windows High Contrast mode */
+ outline: 1px solid transparent;
}
.cannot-expand .accordion-section-title {
@@ -3672,19 +3728,6 @@
background-image: url(../images/spinner-2x.gif);
}
- /* @todo: evaluate - most of these were likely replaced by dashicons */
- .curtime #timestamp,
- #screen-meta-links a.show-settings,
- .widget-top .widget-action,
- .widget-top .widget-action:hover,
- .sidebar-name .toggle-indicator,
- .sidebar-name:hover .toggle-indicator,
- .meta-box-sortables .postbox:hover .handlediv,
- #bulk-titles div a,
- #bulk-titles div a:hover {
- background: none !important;
- }
-
}
@-ms-viewport {
@@ -3785,6 +3828,8 @@
code {
word-wrap: break-word;
+ word-wrap: anywhere; /* Firefox. Allow breaking long words anywhere */
+ word-break: break-word; /* Webkit: Treated similarly to word-wrap: break-word */
}
/* General Metabox */
@@ -3904,8 +3949,7 @@
}
.fileedit-sub input[type="submit"] {
- margin-bottom: 0px;
- padding: 8px 18px;
+ margin-bottom: 0;
}
#documentation label[for="docs-list"] {
@@ -3919,7 +3963,6 @@
#documentation input[type="button"] {
margin-bottom: 0;
- padding: 8px 18px;
}
#wpfooter {
@@ -3980,9 +4023,23 @@
float: none;
}
+ #screen-meta,
+ #screen-meta-links {
+ margin-right: 10px;
+ }
+
#screen-meta-links {
margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
}
+
+ .wp-filter .search-form input[type="search"] {
+ font-size: 1rem;
+ }
+
+ .wp-filter .search-form.search-plugins {
+ /* This element is a flex item. */
+ min-width: 100%;
+ }
}
/* Smartphone */
@@ -4029,6 +4086,10 @@
.nav-tab-active:focus:active {
border-bottom: 1px solid #ccc;
}
+
+ .wp-filter .search-form input[type="search"] {
+ width: 100%;
+ }
}
@media screen and (max-width: 320px) {