Skip to content

Commit 5a8762c

Browse files
committed
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
1 parent 7c9a0d6 commit 5a8762c

6 files changed

Lines changed: 84 additions & 45 deletions

File tree

src/wp-admin/css/common.css

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -788,7 +788,7 @@ img.emoji {
788788
}
789789

790790
.stuffbox .hndle {
791-
border-bottom: 1px solid #c3c4c7;
791+
border-bottom: 1px solid rgb(0, 0, 0, 0.1);
792792
}
793793

794794
.quicktags {
@@ -2182,7 +2182,7 @@ html.wp-toolbar {
21822182
display: flex;
21832183
align-items: center;
21842184
justify-content: space-between;
2185-
border-bottom: 1px solid #c3c4c7;
2185+
border-bottom: 1px solid rgb(0, 0, 0, 0.1);
21862186
}
21872187

21882188
.postbox-header .hndle {
@@ -2195,6 +2195,7 @@ html.wp-toolbar {
21952195

21962196
.postbox-header .handle-actions {
21972197
flex-shrink: 0;
2198+
padding-inline-end: 6px;
21982199
}
21992200

22002201
/* Post box order and toggle buttons. */
@@ -2231,19 +2232,24 @@ html.wp-toolbar {
22312232
}
22322233

22332234
.sortable-placeholder {
2234-
border: 1px dashed #c3c4c7;
2235+
border: 2px solid var(--wp-admin-theme-color);
2236+
border-radius: 8px;
22352237
margin-bottom: 20px;
2238+
background: rgb(var(--wp-admin-theme-color--rgb), 0.04);
22362239
}
22372240

22382241
.postbox,
22392242
.stuffbox {
22402243
margin-bottom: 20px;
22412244
padding: 0;
22422245
line-height: 1;
2246+
background: #ffffff;
2247+
border: 1px solid rgb(0, 0, 0, 0.1);
2248+
border-radius: 0;
22432249
}
22442250

2245-
.postbox.closed {
2246-
border-bottom: 0;
2251+
.postbox.closed .postbox-header {
2252+
border-bottom: none;
22472253
}
22482254

22492255
/* user-select is not a part of the CSS standard - may change behavior in the future */
@@ -2254,7 +2260,7 @@ html.wp-toolbar {
22542260
}
22552261

22562262
.postbox .inside {
2257-
padding: 0 12px 12px;
2263+
padding: 16px;
22582264
line-height: 1.4;
22592265
font-size: 13px;
22602266
}
@@ -2267,7 +2273,7 @@ html.wp-toolbar {
22672273
}
22682274

22692275
.postbox .inside {
2270-
margin: 11px 0;
2276+
margin: 0;
22712277
position: relative;
22722278
}
22732279

@@ -2448,7 +2454,7 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
24482454
.metabox-holder h3.hndle, /* Back-compat for pre-4.4 */
24492455
.metabox-holder h2.hndle {
24502456
font-size: 14px;
2451-
padding: 8px 12px;
2457+
padding: 16px;
24522458
margin: 0;
24532459
line-height: 1.4;
24542460
}

src/wp-admin/css/dashboard.css

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,15 @@
4040

4141
#dashboard-widgets-wrap {
4242
overflow: hidden;
43-
margin: 0 -8px;
43+
margin: 0 -4px;
44+
}
45+
46+
#dashboard-widgets .postbox {
47+
border-radius: 8px;
48+
}
49+
50+
#dashboard-widgets .postbox-header .hndle {
51+
padding: 12px 16px;
4452
}
4553

4654
#dashboard-widgets .postbox .inside {
@@ -50,20 +58,32 @@
5058
#dashboard-widgets .meta-box-sortables {
5159
display: flow-root; /* avoid margin collapsing between parent and first/last child elements */
5260
/* Required min-height to make the jQuery UI Sortable drop zone work. */
53-
min-height: 100px;
54-
margin: 0 8px 20px;
61+
min-height: 0;
62+
margin-right: 8px;
63+
padding: 4px;
64+
}
65+
66+
#dashboard-widgets .meta-box-sortables:not(:empty) {
67+
margin-bottom: 16px;
5568
}
5669

5770
#dashboard-widgets .postbox-container .empty-container {
58-
outline: 3px dashed #c3c4c7;
71+
outline: 2px dashed rgb(0, 0, 0, 0.15);
72+
outline-offset: -2px;
73+
border-radius: 8px;
5974
height: 250px;
6075
}
6176

62-
/* Only highlight drop zones when dragging and only in the 2 columns layout. */
77+
/* Only highlight drop zones when dragging. */
6378
.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
64-
outline: 3px dashed #646970;
65-
/* Prevent margin on the child from collapsing with margin on the parent. */
66-
display: flow-root;
79+
border-radius: 8px;
80+
background: rgb(var(--wp-admin-theme-color--rgb), 0.04);
81+
min-height: 100px;
82+
}
83+
84+
.is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container {
85+
outline: 2px dashed rgb(0, 0, 0, 0.15);
86+
background: rgb(0, 0, 0, 0.01);
6787
}
6888

6989
#dashboard-widgets .postbox-container .empty-container:after {
@@ -121,6 +141,8 @@
121141
overflow: auto;
122142
margin: 16px 0;
123143
background-color: #151515;
144+
border: 1px solid rgb(0, 0, 0, 0.1);
145+
border-radius: 8px;
124146
font-size: 14px;
125147
line-height: 1.3;
126148
clear: both;
@@ -259,11 +281,11 @@
259281
clear: both;
260282
display: grid;
261283
z-index: 1;
262-
padding: 48px;
284+
padding: 24px;
263285
grid-template-columns: repeat(3, 1fr);
264286
gap: 32px;
265287
align-self: flex-end;
266-
background: #fff;
288+
background: #ffffff;
267289
}
268290

269291
[class*="welcome-panel-icon"] {
@@ -704,7 +726,7 @@ body #dashboard-widgets .postbox form .submit {
704726
}
705727

706728
#dashboard_right_now .main {
707-
padding: 0 12px 11px;
729+
padding: 16px 16px 11px;
708730
}
709731

710732
#dashboard_right_now .main p {
@@ -892,7 +914,7 @@ body #dashboard-widgets .postbox form .submit {
892914

893915
#dashboard_activity .inside {
894916
margin: 0;
895-
padding-bottom: 0;
917+
padding: 0 12px;
896918
}
897919

898920
#dashboard_activity .no-activity {
@@ -1294,10 +1316,11 @@ a.rsswidget {
12941316

12951317
#dashboard-widgets #postbox-container-3 .empty-container,
12961318
#dashboard-widgets #postbox-container-4 .empty-container {
1297-
outline: none;
1319+
border: none;
12981320
height: 0;
12991321
min-height: 0;
13001322
margin-bottom: 0;
1323+
display: none;
13011324
}
13021325

13031326
#dashboard-widgets #postbox-container-3 .empty-container:after,
@@ -1310,7 +1333,7 @@ a.rsswidget {
13101333
}
13111334

13121335
#wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container {
1313-
outline: none;
1336+
border: none;
13141337
height: 0;
13151338
min-height: 0;
13161339
margin-bottom: 0;
@@ -1348,10 +1371,11 @@ a.rsswidget {
13481371
}
13491372

13501373
#dashboard-widgets #postbox-container-4 .empty-container {
1351-
outline: none;
1374+
border: none;
13521375
height: 0;
13531376
min-height: 0;
13541377
margin-bottom: 0;
1378+
display: none;
13551379
}
13561380

13571381
#dashboard-widgets #postbox-container-4 .empty-container:after {

src/wp-admin/css/edit.css

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
#poststuff #post-body {
77
padding: 0;
8+
margin: 0 -4px;
89
}
910

1011
#poststuff .postbox-container {
@@ -167,11 +168,14 @@ body.post-type-wp_navigation .inline-edit-status {
167168

168169
/* Post Screen */
169170

171+
.metabox-holder .postbox-container .meta-box-sortables {
172+
padding: 4px;
173+
}
174+
170175
/* Only highlight drop zones when dragging and only in the 2 columns layout. */
171176
.is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables {
172-
outline: 3px dashed #646970;
173-
/* Prevent margin on the child from collapsing with margin on the parent. */
174-
display: flow-root;
177+
border-radius: 8px;
178+
background: rgb(var(--wp-admin-theme-color--rgb), 0.04);
175179
/*
176180
* This min-height is meant to limit jumpiness while dragging. It's equivalent
177181
* to the minimum height of the sortable-placeholder which is given by the height
@@ -1776,7 +1780,8 @@ table.links-table {
17761780
}
17771781

17781782
.is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables {
1779-
outline: none;
1783+
border: none;
1784+
background: transparent;
17801785
min-height: 0;
17811786
margin-bottom: 0;
17821787
}

src/wp-admin/css/forms.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1094,12 +1094,12 @@ table.form-table td .updated p {
10941094
.card {
10951095
position: relative;
10961096
margin-top: 20px;
1097-
padding: 0.7em 2em 1em;
1097+
padding: 16px 24px;
10981098
min-width: 255px;
10991099
max-width: 520px;
1100-
border: 1px solid #c3c4c7;
1101-
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1102-
background: #fff;
1100+
border: 1px solid rgb(0, 0, 0, 0.1);
1101+
border-radius: 8px;
1102+
background: #ffffff;
11031103
box-sizing: border-box;
11041104
}
11051105

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1489,9 +1489,11 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
14891489
margin: 0 8px 16px;
14901490
width: 48.5%;
14911491
width: calc( 50% - 8px );
1492-
background-color: #fff;
1493-
border: 1px solid #dcdcde;
1492+
background-color: #ffffff;
1493+
border: 1px solid rgb(0, 0, 0, 0.1);
1494+
border-radius: 8px;
14941495
box-sizing: border-box;
1496+
overflow: hidden;
14951497
}
14961498

14971499
.plugin-card:nth-child(odd) {
@@ -1555,7 +1557,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
15551557

15561558
.plugin-card-top {
15571559
position: relative;
1558-
padding: 20px 20px 10px;
1560+
padding: 16px;
15591561
min-height: 135px;
15601562
}
15611563

@@ -1670,9 +1672,9 @@ div.action-links,
16701672

16711673
.plugin-card-bottom {
16721674
clear: both;
1673-
padding: 12px 20px;
1675+
padding: 16px;
16741676
background-color: #f6f7f7;
1675-
border-top: 1px solid #dcdcde;
1677+
border-top: 1px solid rgb(0, 0, 0, 0.1);
16761678
overflow: hidden;
16771679
}
16781680

src/wp-admin/css/themes.css

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,11 @@ body.js .theme-browser.search-loading {
6464
margin: 0 4% 4% 0;
6565
position: relative;
6666
width: 30.6%;
67-
border: 1px solid #dcdcde;
68-
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1);
67+
background: #ffffff;
68+
border: 1px solid rgb(0, 0, 0, 0.1);
69+
border-radius: 8px;
6970
box-sizing: border-box;
71+
overflow: hidden;
7072
}
7173

7274
.theme-browser .theme:nth-child(3n) {
@@ -84,12 +86,11 @@ body.js .theme-browser.search-loading {
8486
height: 18px;
8587
margin: 0;
8688
padding: 16px 15px;
87-
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
89+
border-top: 1px solid rgb(0, 0, 0, 0.1);
8890
overflow: hidden;
8991
white-space: nowrap;
9092
text-overflow: ellipsis;
91-
background: #fff;
92-
background: rgba(255, 255, 255, 0.65);
93+
background: #ffffff;
9394
}
9495

9596
/* Activate and Customize buttons, shown on hover and focus */
@@ -301,8 +302,9 @@ body.js .theme-browser.search-loading {
301302
* Add new theme
302303
*/
303304
.theme-browser .theme.add-new-theme {
305+
background: transparent;
304306
border: none;
305-
box-shadow: none;
307+
overflow: visible;
306308
}
307309

308310
.theme-browser .theme.add-new-theme a {
@@ -378,8 +380,8 @@ body.js .theme-browser.search-loading {
378380

379381
.theme-browser .theme.add-new-theme .theme-name {
380382
background: none;
383+
border: none;
381384
text-align: center;
382-
box-shadow: none;
383385
font-weight: 400;
384386
position: relative;
385387
top: 0;
@@ -1131,7 +1133,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
11311133
padding: 30px 128px 30px 30px;
11321134
}
11331135

1134-
.upload-plugin .wp-upload-form input[type=submit],
1136+
.upload-plugin .wp-upload-form input[type=submit],
11351137
.upload-theme .wp-upload-form input[type=submit] {
11361138
position: absolute;
11371139
right: 30px;
@@ -2054,7 +2056,7 @@ body.full-overlay-active {
20542056
width: 100%;
20552057
}
20562058

2057-
.upload-plugin .wp-upload-form input[type=file],
2059+
.upload-plugin .wp-upload-form input[type=file],
20582060
.upload-theme .wp-upload-form input[type=file] {
20592061
padding: 30px 30px 80px;
20602062
width: 100%;

0 commit comments

Comments
 (0)