WordPress.org
Get WordPress

Make WordPress Core

Changeset 61646


Ignore:
Timestamp:
02/15/2026 08:17:10 AM (6 months 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.