Admin: Update card and container styles to align with the design system.

Apply 8px border-radius and a consistent `rgb(0, 0, 0, 0.1)` border to cards, postboxes, plugin cards, and theme cards. Standardize internal padding to 16px for postbox content and headers.

Update drag-and-drop interactions: replace dashed gray outlines on sortable drop zones with theme-color-tinted backgrounds, and restyle sortable placeholders with a solid theme-color border and subtle background fill.

Adjust dashboard widget spacing, welcome panel padding, and empty-container drop zone styles. Add overflow hidden to plugin and theme cards to clip content to the new rounded corners.

Props fabiankaegy, mukesh27, joedolson, navi161, phpbits, karmatosed, sabernhardt, poojapadamad, psorensen, generosus.
Fixes #64549.



git-svn-id: https://develop.svn.wordpress.org/trunk@61646 602fd350-edb4-49c9-b593-d223f7449a82

Author: fabiankaegy

src/wp-admin/css/common.css

@@ -788,7 +788,7 @@ img.emoji {
 }
 
 .stuffbox .hndle {
-	border-bottom: 1px solid #c3c4c7;
+	border-bottom: 1px solid rgb(0, 0, 0, 0.1);
 }
 
 .quicktags {
@@ -2182,7 +2182,7 @@ html.wp-toolbar {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	border-bottom: 1px solid #c3c4c7;
+	border-bottom: 1px solid rgb(0, 0, 0, 0.1);
 }
 
 .postbox-header .hndle {
@@ -2195,6 +2195,7 @@ html.wp-toolbar {
 
 .postbox-header .handle-actions {
 	flex-shrink: 0;
+	padding-inline-end: 6px;
 }
 
 /* Post box order and toggle buttons. */
@@ -2231,19 +2232,24 @@ html.wp-toolbar {
 }
 
 .sortable-placeholder {
-	border: 1px dashed #c3c4c7;
+	border: 2px solid var(--wp-admin-theme-color);
+	border-radius: 8px;
 	margin-bottom: 20px;
+	background: rgb(var(--wp-admin-theme-color--rgb), 0.04);
 }
 
 .postbox,
 .stuffbox {
 	margin-bottom: 20px;
 	padding: 0;
 	line-height: 1;
+	background: #ffffff;
+	border: 1px solid rgb(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 */
@@ -2254,7 +2260,7 @@ html.wp-toolbar {
 }
 
 .postbox .inside {
-	padding: 0 12px 12px;
+	padding: 16px;
 	line-height: 1.4;
 	font-size: 13px;
 }
@@ -2267,7 +2273,7 @@ html.wp-toolbar {
 }
 
 .postbox .inside {
-	margin: 11px 0;
+	margin: 0;
 	position: relative;
 }
 
@@ -2448,7 +2454,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;
 }

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,32 @@
 #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-right: 8px;
+	padding: 4px;
+}
+
+#dashboard-widgets .meta-box-sortables:not(:empty) {
+	margin-bottom: 16px;
 }
 
 #dashboard-widgets .postbox-container .empty-container {
-	outline: 3px dashed #c3c4c7;
+	outline: 2px dashed rgb(0, 0, 0, 0.15);
+	outline-offset: -2px;
+	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: rgb(var(--wp-admin-theme-color--rgb), 0.04);
+	min-height: 100px;
+}
+
+.is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container {
+	outline: 2px dashed rgb(0, 0, 0, 0.15);
+	background: rgb(0, 0, 0, 0.01);
 }
 
 #dashboard-widgets .postbox-container .empty-container:after {
@@ -121,6 +141,8 @@
 	overflow: auto;
 	margin: 16px 0;
 	background-color: #151515;
+	border: 1px solid rgb(0, 0, 0, 0.1);
+	border-radius: 8px;
 	font-size: 14px;
 	line-height: 1.3;
 	clear: both;
@@ -259,11 +281,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 +726,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 +914,7 @@ body #dashboard-widgets .postbox form .submit {
 
 #dashboard_activity .inside {
 	margin: 0;
-	padding-bottom: 0;
+	padding: 0 12px;
 }
 
 #dashboard_activity .no-activity {
@@ -1294,10 +1316,11 @@ 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;
+		display: none;
 	}
 
 	#dashboard-widgets #postbox-container-3 .empty-container:after,
@@ -1310,7 +1333,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;
@@ -1348,10 +1371,11 @@ a.rsswidget {
 	}
 
 	#dashboard-widgets #postbox-container-4 .empty-container {
-		outline: none;
+		border: none;
 		height: 0;
 		min-height: 0;
 		margin-bottom: 0;
+		display: none;
 	}
 
 	#dashboard-widgets #postbox-container-4 .empty-container:after {

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: rgb(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
@@ -1776,7 +1780,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;
 	}

src/wp-admin/css/forms.css

@@ -1094,12 +1094,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 rgb(0, 0, 0, 0.1);
+	border-radius: 8px;
+	background: #ffffff;
 	box-sizing: border-box;
 }
 

src/wp-admin/css/list-tables.css

@@ -1489,9 +1489,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 rgb(0, 0, 0, 0.1);
+	border-radius: 8px;
 	box-sizing: border-box;
+	overflow: hidden;
 }
 
 .plugin-card:nth-child(odd) {
@@ -1555,7 +1557,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
 
 .plugin-card-top {
 	position: relative;
-	padding: 20px 20px 10px;
+	padding: 16px;
 	min-height: 135px;
 }
 
@@ -1670,9 +1672,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 rgb(0, 0, 0, 0.1);
 	overflow: hidden;
 }
 

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 rgb(0, 0, 0, 0.1);
+	border-radius: 8px;
 	box-sizing: border-box;
+	overflow: hidden;
 }
 
 .theme-browser .theme:nth-child(3n) {
@@ -84,12 +86,11 @@ body.js .theme-browser.search-loading {
 	height: 18px;
 	margin: 0;
 	padding: 16px 15px;
-	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
+	border-top: 1px solid rgb(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 */
@@ -301,8 +302,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 {
@@ -378,8 +380,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;
@@ -1131,7 +1133,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
     padding: 30px 128px 30px 30px;
 }
 
-.upload-plugin .wp-upload-form input[type=submit], 
+.upload-plugin .wp-upload-form input[type=submit],
 .upload-theme .wp-upload-form input[type=submit] {
 	position: absolute;
 	right: 30px;
@@ -2054,7 +2056,7 @@ body.full-overlay-active {
 		width: 100%;
 	}
 
-	.upload-plugin .wp-upload-form input[type=file], 
+	.upload-plugin .wp-upload-form input[type=file],
 	.upload-theme .wp-upload-form input[type=file] {
 		padding: 30px 30px 80px;
 		width: 100%;