WordPress.org
Get WordPress

Make WordPress Core

Changeset 61646


Ignore:
Timestamp:
02/15/2026 08:17:10 AM (8 weeks ago)
Author:
fabiankaegy
Message:

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.

Location:
trunk/src/wp-admin/css
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r61645 r61646  
    789789
    790790.stuffbox .hndle {
    791     border-bottom: 1px solid #c3c4c7;
     791    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
    792792}
    793793
    … …  
    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
    … …  
    21962196.postbox-header .handle-actions {
    21972197    flex-shrink: 0;
     2198    padding-inline-end: 6px;
    21982199}
    21992200
    … …  
    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
    … …  
    22412244    padding: 0;
    22422245    line-height: 1;
    2243 }
    2244 
    2245 .postbox.closed {
    2246     border-bottom: 0;
     2246    background: #ffffff;
     2247    border: 1px solid rgb(0, 0, 0, 0.1);
     2248    border-radius: 0;
     2249}
     2250
     2251.postbox.closed .postbox-header {
     2252    border-bottom: none;
    22472253}
    22482254
    … …  
    22552261
    22562262.postbox .inside {
    2257     padding: 0 12px 12px;
     2263    padding: 16px;
    22582264    line-height: 1.4;
    22592265    font-size: 13px;
    … …  
    22682274
    22692275.postbox .inside {
    2270     margin: 11px 0;
     2276    margin: 0;
    22712277    position: relative;
    22722278}
    … …  
    24492455.metabox-holder h2.hndle {
    24502456    font-size: 14px;
    2451     padding: 8px 12px;
     2457    padding: 16px;
    24522458    margin: 0;
    24532459    line-height: 1.4;

  • trunk/src/wp-admin/css/dashboard.css

    r61645 r61646  
    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
    … …  
    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. */
     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;
     68}
     69
     70#dashboard-widgets .postbox-container .empty-container {
     71    outline: 2px dashed rgb(0, 0, 0, 0.15);
     72    outline-offset: -2px;
     73    border-radius: 8px;
     74    height: 250px;
     75}
     76
     77/* Only highlight drop zones when dragging. */
     78.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
     79    border-radius: 8px;
     80    background: rgb(var(--wp-admin-theme-color--rgb), 0.04);
    5381    min-height: 100px;
    54     margin: 0 8px 20px;
    55 }
    56 
    57 #dashboard-widgets .postbox-container .empty-container {
    58     outline: 3px dashed #c3c4c7;
    59     height: 250px;
    60 }
    61 
    62 /* Only highlight drop zones when dragging and only in the 2 columns layout. */
    63 .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;
     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
    … …  
    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;
    … …  
    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
    … …  
    705727
    706728#dashboard_right_now .main {
    707     padding: 0 12px 11px;
     729    padding: 16px 16px 11px;
    708730}
    709731
    … …  
    893915#dashboard_activity .inside {
    894916    margin: 0;
    895     padding-bottom: 0;
     917    padding: 0 12px;
    896918}
    897919
    … …  
    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
    … …  
    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;
    … …  
    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

  • trunk/src/wp-admin/css/edit.css

    r61645 r61646  
    66#poststuff #post-body {
    77    padding: 0;
     8    margin: 0 -4px;
    89}
    910
    … …  
    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
    … …  
    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;

  • trunk/src/wp-admin/css/forms.css

    r61645 r61646  
    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}

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

    r61645 r61646  
    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
    … …  
    15561558.plugin-card-top {
    15571559    position: relative;
    1558     padding: 20px 20px 10px;
     1560    padding: 16px;
    15591561    min-height: 135px;
    15601562}
    … …  
    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}

  • trunk/src/wp-admin/css/themes.css

    r61645 r61646  
    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
    … …  
    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
    … …  
    302303 */
    303304.theme-browser .theme.add-new-theme {
     305    background: transparent;
    304306    border: none;
    305     box-shadow: none;
     307    overflow: visible;
    306308}
    307309
    … …  
    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;
    … …  
    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;
    … …  
    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;
Note: See TracChangeset for help on using the changeset viewer.