diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index e062a471d7150..f91270c22ec71 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -786,7 +786,7 @@ img.emoji { } .stuffbox .hndle { - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .quicktags { @@ -2155,7 +2155,7 @@ html.wp-toolbar { display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .postbox-header .hndle { @@ -2204,8 +2204,10 @@ html.wp-toolbar { } .sortable-placeholder { - border: 1px dashed #c3c4c7; + border: 2px solid var(--wp-admin-theme-color); + border-radius: 8px; margin-bottom: 20px; + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); } .postbox, @@ -2213,10 +2215,13 @@ html.wp-toolbar { margin-bottom: 20px; padding: 0; line-height: 1; + background: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0; } -.postbox.closed { - border-bottom: 0; +.postbox.closed .postbox-header { + border-bottom: none; } /* user-select is not a part of the CSS standard - may change behavior in the future */ @@ -2227,7 +2232,7 @@ html.wp-toolbar { } .postbox .inside { - padding: 0 12px 12px; + padding: 16px; line-height: 1.4; font-size: 13px; } @@ -2240,7 +2245,7 @@ html.wp-toolbar { } .postbox .inside { - margin: 11px 0; + margin: 0; position: relative; } @@ -2421,7 +2426,7 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */ .metabox-holder h2.hndle { font-size: 14px; - padding: 8px 12px; + padding: 16px; margin: 0; line-height: 1.4; } diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index 64aa30dbedeac..56732b9641a14 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -40,7 +40,15 @@ #dashboard-widgets-wrap { overflow: hidden; - margin: 0 -8px; + margin: 0 -4px; +} + +#dashboard-widgets .postbox { + border-radius: 8px; +} + +#dashboard-widgets .postbox-header .hndle { + padding: 12px 16px; } #dashboard-widgets .postbox .inside { @@ -50,20 +58,31 @@ #dashboard-widgets .meta-box-sortables { display: flow-root; /* avoid margin collapsing between parent and first/last child elements */ /* Required min-height to make the jQuery UI Sortable drop zone work. */ - min-height: 100px; - margin: 0 8px 20px; + min-height: 0; + margin: 0 8px 0 0; + padding: 4px; +} + +#dashboard-widgets .meta-box-sortables:not(:empty) { + margin-bottom: 16px; } #dashboard-widgets .postbox-container .empty-container { - outline: 3px dashed #c3c4c7; + border: 2px dashed rgba(0, 0, 0, 0.15); + border-radius: 8px; height: 250px; } -/* Only highlight drop zones when dragging and only in the 2 columns layout. */ +/* Only highlight drop zones when dragging. */ .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { - outline: 3px dashed #646970; - /* Prevent margin on the child from collapsing with margin on the parent. */ - display: flow-root; + border-radius: 8px; + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + min-height: 100px; +} + +.is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container { + border: 2px dashed rgba(0, 0, 0, 0.15); + background: rgba(0, 0, 0, 0.01); } #dashboard-widgets .postbox-container .empty-container:after { @@ -121,6 +140,8 @@ overflow: auto; margin: 16px 0; background-color: #151515; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; font-size: 14px; line-height: 1.3; clear: both; @@ -259,11 +280,11 @@ clear: both; display: grid; z-index: 1; - padding: 48px; + padding: 24px; grid-template-columns: repeat(3, 1fr); gap: 32px; align-self: flex-end; - background: #fff; + background: #ffffff; } [class*="welcome-panel-icon"] { @@ -704,7 +725,7 @@ body #dashboard-widgets .postbox form .submit { } #dashboard_right_now .main { - padding: 0 12px 11px; + padding: 16px 16px 11px; } #dashboard_right_now .main p { @@ -892,7 +913,7 @@ body #dashboard-widgets .postbox form .submit { #dashboard_activity .inside { margin: 0; - padding-bottom: 0; + padding: 0 12px; } #dashboard_activity .no-activity { @@ -1298,7 +1319,7 @@ a.rsswidget { #dashboard-widgets #postbox-container-3 .empty-container, #dashboard-widgets #postbox-container-4 .empty-container { - outline: none; + border: none; height: 0; min-height: 0; margin-bottom: 0; @@ -1314,7 +1335,7 @@ a.rsswidget { } #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container { - outline: none; + border: none; height: 0; min-height: 0; margin-bottom: 0; @@ -1352,7 +1373,7 @@ a.rsswidget { } #dashboard-widgets #postbox-container-4 .empty-container { - outline: none; + border: none; height: 0; min-height: 0; margin-bottom: 0; diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 7e4110a8c569e..b442e348e5e38 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -5,6 +5,7 @@ #poststuff #post-body { padding: 0; + margin: 0 -4px; } #poststuff .postbox-container { @@ -167,11 +168,14 @@ body.post-type-wp_navigation .inline-edit-status { /* Post Screen */ +.metabox-holder .postbox-container .meta-box-sortables { + padding: 4px; +} + /* Only highlight drop zones when dragging and only in the 2 columns layout. */ .is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables { - outline: 3px dashed #646970; - /* Prevent margin on the child from collapsing with margin on the parent. */ - display: flow-root; + border-radius: 8px; + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); /* * This min-height is meant to limit jumpiness while dragging. It's equivalent * to the minimum height of the sortable-placeholder which is given by the height @@ -1770,7 +1774,8 @@ table.links-table { } .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables { - outline: none; + border: none; + background: transparent; min-height: 0; margin-bottom: 0; } diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 719be1aad9ba1..e3727f810933e 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -1047,12 +1047,12 @@ table.form-table td .updated p { .card { position: relative; margin-top: 20px; - padding: 0.7em 2em 1em; + padding: 16px 24px; min-width: 255px; max-width: 520px; - border: 1px solid #c3c4c7; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); - background: #fff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; + background: #ffffff; box-sizing: border-box; } diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 80e652003a33c..9bb79349b6ade 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -1487,9 +1487,11 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { margin: 0 8px 16px; width: 48.5%; width: calc( 50% - 8px ); - background-color: #fff; - border: 1px solid #dcdcde; + background-color: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; box-sizing: border-box; + overflow: hidden; } .plugin-card:nth-child(odd) { @@ -1553,7 +1555,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { .plugin-card-top { position: relative; - padding: 20px 20px 10px; + padding: 16px; min-height: 135px; } @@ -1668,9 +1670,9 @@ div.action-links, .plugin-card-bottom { clear: both; - padding: 12px 20px; + padding: 16px; background-color: #f6f7f7; - border-top: 1px solid #dcdcde; + border-top: 1px solid rgba(0, 0, 0, 0.1); overflow: hidden; } diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index ea62a09cf1ed1..0ee20cc4d6c8f 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -64,9 +64,11 @@ body.js .theme-browser.search-loading { margin: 0 4% 4% 0; position: relative; width: 30.6%; - border: 1px solid #dcdcde; - box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); + background: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; box-sizing: border-box; + overflow: hidden; } .theme-browser .theme:nth-child(3n) { @@ -83,13 +85,12 @@ body.js .theme-browser.search-loading { font-weight: 600; height: 18px; margin: 0; - padding: 15px; - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); + padding: 16px; + border-top: 1px solid rgba(0, 0, 0, 0.1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - background: #fff; - background: rgba(255, 255, 255, 0.65); + background: #ffffff; } /* Activate and Customize buttons, shown on hover and focus */ @@ -271,8 +272,9 @@ body.js .theme-browser.search-loading { * Add new theme */ .theme-browser .theme.add-new-theme { + background: transparent; border: none; - box-shadow: none; + overflow: visible; } .theme-browser .theme.add-new-theme a { @@ -348,8 +350,8 @@ body.js .theme-browser.search-loading { .theme-browser .theme.add-new-theme .theme-name { background: none; + border: none; text-align: center; - box-shadow: none; font-weight: 400; position: relative; top: 0;