WordPress.org
Get WordPress

Make WordPress Core

Changeset 53385


Ignore:
Timestamp:
05/10/2022 05:08:35 PM (4 years ago)
Author:
ryelle
Message:

Administration: Update design of the Dashboard welcome panel.

This updates the panel to match the 6.0 About page styles, with the 6.0 graphic changing color based on the selected admin color scheme.

Props fcoveram, critterverse, joedolson, SergeyBiryukov.
Merges [53383] to the 6.0 branch.
Fixes #55532.

Location:
branches/6.0
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • branches/6.0

  • branches/6.0/src/wp-admin/css/colors/_admin.scss

    r52562 r53385  
    784784
    785785/* Welcome Panel */
    786 
    787786.welcome-panel {
    788         background-color: $highlight-color;
     787        background-color: mix($dashboard-accent-1, white, 12%);
     788}
     789
     790.welcome-panel-header-image .about-six {
     791        fill: $dashboard-accent-1;
     792}
     793
     794.welcome-panel-header-image .about-zero {
     795        fill: $dashboard-accent-2;
    789796}
    790797
    791798[class*="welcome-panel-icon"] {
    792         @if ( $scheme-name == "light" ) {
    793                 background-color: $icon-color;
    794         } @else {
    795                 background-color: $base-color;
    796         }
    797 }
     799        background-color: $dashboard-icon-background;
     800}

  • branches/6.0/src/wp-admin/css/colors/_variables.scss

    r52562 r53385  
    6464$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;
    6565
     66// Dashboard Colors
     67
     68$dashboard-accent-1: $highlight-color !default;
     69$dashboard-accent-2: $base-color !default;
     70$dashboard-icon-background: $dashboard-accent-2 !default;
     71
    6672$low-contrast-theme: "false" !default;

  • branches/6.0/src/wp-admin/css/colors/blue/colors.scss

    r52562 r53385  
    1010$menu-submenu-background: #4796b3;
    1111
     12$dashboard-icon-background: $highlight-color;
     13
    1214@import "../_admin.scss";

  • branches/6.0/src/wp-admin/css/colors/light/colors.scss

    r52562 r53385  
    1919$menu-collapse-focus-icon: #555;
    2020
     21$dashboard-accent-2: $icon-color;
     22$dashboard-icon-background: $text-color;
     23
    2124@import "../_admin.scss";
    2225

  • branches/6.0/src/wp-admin/css/colors/midnight/colors.scss

    r52562 r53385  
    44$notification-color: #69a8bb;
    55
     6$dashboard-icon-background: $highlight-color;
     7
    68@import "../_admin.scss";

  • branches/6.0/src/wp-admin/css/colors/modern/colors.scss

    r52562 r53385  
    88$link-focus: darken($highlight-color, 10%);
    99
     10$dashboard-accent-1: #3858e9;
     11$dashboard-accent-2: #1b8362;
     12$dashboard-icon-background: #1d2327;
     13
    1014@import "../_admin.scss";

  • branches/6.0/src/wp-admin/css/dashboard.css

    r52735 r53385  
    121121        overflow: auto;
    122122        margin: 16px 0;
    123         background: #2271b1 url(../images/about-texture.png) center repeat;
    124         background-size: 500px 500px;
    125         background-blend-mode: overlay;
     123        background-color: #e7ebfd;
    126124        font-size: 14px;
    127125        line-height: 1.3;
    … …  
    129127}
    130128
    131 .welcome-panel::before {
    132         content: "";
    133         position: absolute;
    134         top: -16px;
    135         right: 96px;
    136         z-index: 0;
    137         width: 300px;
    138         height: 382px;
    139         background: url(../images/about-header-about.svg) no-repeat center;
    140         background-size: contain;
    141 }
    142 
    143129.welcome-panel h2 {
    144130        margin: 0;
    … …  
    146132        font-weight: 600;
    147133        line-height: 1.25;
    148         color: #fff;
    149134}
    150135
    … …  
    162147
    163148.welcome-panel-header {
    164         color: #fff;
     149        --about-header-image-width: 521px;
     150        --about-header-bg-width: calc(var(--about-header-image-width) * 0.55);
     151        --about-header-bg-offset-inline: 2rem;
     152
     153        position: relative;
     154}
     155
     156.welcome-panel-header-image {
     157        position: absolute;
     158        inset: -1rem var(--about-header-bg-offset-inline) 0 auto;
     159        width: var(--about-header-bg-width);
     160        height: auto;
     161}
     162
     163.welcome-panel-header-image svg {
     164        width: 100%;
     165        height: auto;
    165166}
    166167
    167168.welcome-panel-header a {
    168         color: #fff;
     169        color: inherit;
    169170}
    170171
    171172.welcome-panel-header a:focus,
    172173.welcome-panel-header a:hover {
    173         color: #f5e6ab;
     174        color: inherit;
    174175        text-decoration: none;
    175176}
    … …  
    196197        line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */
    197198        text-decoration: none;
     199        z-index: 1; /* Raise above the version image. */
    198200}
    199201
    … …  
    205207        content: '\f335';
    206208        font-size: 24px;
    207         color: #fff;
     209        color: #1d2327;
    208210}
    209211
    210212.welcome-panel .welcome-panel-close {
    211         color: #fff;
     213        color: #1d2327;
    212214}
    213215
    … …  
    216218.welcome-panel .welcome-panel-close:hover::before,
    217219.welcome-panel .welcome-panel-close:focus::before {
    218         color: #f5e6ab;
     220        color: #2271b1;
    219221}
    220222
    … …  
    241243        max-width: 1500px;
    242244        width: 100%;
    243         /* 408px = 300px (balloon width) + 96px (offset from edge) + 16px (spacing). */
    244         padding: 48px 408px 48px 48px;
     245        padding: 48px 0 80px 48px;
     246        padding-right: calc(var(--about-header-bg-width) + (var(--about-header-bg-offset-inline) * 2));
    245247}
    246248
    … …  
    251253        display: grid;
    252254        z-index: 1;
    253         margin-top: 32px;
    254255        padding: 48px;
    255256        grid-template-columns: repeat(3, 1fr);
    … …  
    13541355
    13551356@media screen and (max-width: 782px) {
    1356         .welcome-panel::before {
    1357                 width: 240px;
    1358                 height: 305px;
    1359                 right: 32px;
    1360         }
    1361 
    13621357        .welcome-panel-header {
    1363                 /* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */
    1364                 padding: 32px 288px 32px 32px;
     1358                --about-header-bg-width: calc(var(--about-header-image-width) * 0.4);
     1359                --about-header-bg-offset-inline: 1rem;
     1360        }
     1361
     1362        .welcome-panel-header-image {
     1363                top: 2rem;
    13651364        }
    13661365
    … …  
    14351434/* Smartphone */
    14361435@media screen and (max-width: 600px) {
    1437         .welcome-panel::before {
     1436        .welcome-panel-header {
     1437                padding: 32px 32px 64px;
     1438        }
     1439
     1440        .welcome-panel-header-image {
    14381441                display: none;
    1439         }
    1440 
    1441         .welcome-panel-header {
    1442                 padding: 32px;
    14431442        }
    14441443}

  • branches/6.0/src/wp-admin/images/about-header-about.svg

    r53339 r53385  
    1 <svg width="521" height="504" viewBox="0 0 521 504" fill="none" xmlns="http://www.w3.org/2000/svg">
    2         <path d="M265.692 238.093c0 17.061-3.506 33.055-10.518 47.984-6.707 14.928-16.006 28.028-27.895 39.301-11.89 10.968-25.914 19.651-42.072 26.048-15.853 6.398-32.926 9.597-51.218 9.597-19.816 0-37.956-3.808-54.419-11.425-16.462-7.921-30.639-18.889-42.529-32.903-11.585-14.014-20.73-30.618-27.438-49.812C3.201 247.385 0 225.906 0 202.447c0-27.724 4.268-53.772 12.804-78.145 8.537-24.678 20.122-46.157 34.755-64.436 14.634-18.584 31.707-33.208 51.218-43.871C118.289 5.332 139.172 0 161.427 0c12.195 0 23.628 1.371 34.298 4.113 10.67 2.437 19.816 5.94 27.438 10.51 7.927 4.57 14.176 10.054 18.749 16.452 4.573 6.094 6.86 12.796 6.86 20.108 0 8.835-2.744 15.842-8.232 21.022-5.487 4.874-12.804 7.311-21.95 7.311-6.402 0-11.433-1.37-15.091-4.112-3.658-2.742-6.86-6.094-9.603-10.054-2.439-3.96-4.726-8.226-6.86-12.796-2.134-4.875-4.878-9.292-8.231-13.253-3.049-3.96-7.012-7.312-11.89-10.054-4.878-2.741-11.433-4.113-19.664-4.113-10.061 0-19.359 3.352-27.895 10.054-8.537 6.398-16.006 15.386-22.408 26.963-6.097 11.272-10.975 24.677-14.634 40.215-3.658 15.538-5.487 32.446-5.487 50.726l1.371.914c9.756-10.968 19.97-19.041 30.64-24.22 10.975-5.18 23.779-7.769 38.413-7.769 16.768 0 32.316 3.046 46.645 9.14 14.633 5.788 27.133 13.862 37.498 24.22 10.671 10.359 19.055 22.697 25.152 37.016 6.097 14.015 9.146 29.248 9.146 45.7Zm-189.78-10.968c0 35.95 5.03 63.065 15.09 81.344 10.366 18.28 25.305 27.42 44.816 27.42 19.207 0 33.383-7.769 42.529-23.307 9.146-15.538 13.719-39.758 13.719-72.661 0-29.857-4.42-52.402-13.261-67.635-8.537-15.538-21.189-23.307-37.956-23.307-13.414 0-25.152 4.265-35.212 12.796-10.061 8.53-19.97 22.088-29.725 40.672v24.678Z" fill="#3858E9" style="mix-blend-mode:multiply"/>
     1<svg width="521" height="504" viewBox="0 0 521 504" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
     2        <path class="about-six" d="M265.692 238.093c0 17.061-3.506 33.055-10.518 47.984-6.707 14.928-16.006 28.028-27.895 39.301-11.89 10.968-25.914 19.651-42.072 26.048-15.853 6.398-32.926 9.597-51.218 9.597-19.816 0-37.956-3.808-54.419-11.425-16.462-7.921-30.639-18.889-42.529-32.903-11.585-14.014-20.73-30.618-27.438-49.812C3.201 247.385 0 225.906 0 202.447c0-27.724 4.268-53.772 12.804-78.145 8.537-24.678 20.122-46.157 34.755-64.436 14.634-18.584 31.707-33.208 51.218-43.871C118.289 5.332 139.172 0 161.427 0c12.195 0 23.628 1.371 34.298 4.113 10.67 2.437 19.816 5.94 27.438 10.51 7.927 4.57 14.176 10.054 18.749 16.452 4.573 6.094 6.86 12.796 6.86 20.108 0 8.835-2.744 15.842-8.232 21.022-5.487 4.874-12.804 7.311-21.95 7.311-6.402 0-11.433-1.37-15.091-4.112-3.658-2.742-6.86-6.094-9.603-10.054-2.439-3.96-4.726-8.226-6.86-12.796-2.134-4.875-4.878-9.292-8.231-13.253-3.049-3.96-7.012-7.312-11.89-10.054-4.878-2.741-11.433-4.113-19.664-4.113-10.061 0-19.359 3.352-27.895 10.054-8.537 6.398-16.006 15.386-22.408 26.963-6.097 11.272-10.975 24.677-14.634 40.215-3.658 15.538-5.487 32.446-5.487 50.726l1.371.914c9.756-10.968 19.97-19.041 30.64-24.22 10.975-5.18 23.779-7.769 38.413-7.769 16.768 0 32.316 3.046 46.645 9.14 14.633 5.788 27.133 13.862 37.498 24.22 10.671 10.359 19.055 22.697 25.152 37.016 6.097 14.015 9.146 29.248 9.146 45.7Zm-189.78-10.968c0 35.95 5.03 63.065 15.09 81.344 10.366 18.28 25.305 27.42 44.816 27.42 19.207 0 33.383-7.769 42.529-23.307 9.146-15.538 13.719-39.758 13.719-72.661 0-29.857-4.42-52.402-13.261-67.635-8.537-15.538-21.189-23.307-37.956-23.307-13.414 0-25.152 4.265-35.212 12.796-10.061 8.53-19.97 22.088-29.725 40.672v24.678Z" fill="#3858E9" style="mix-blend-mode:multiply"/>
    33        <path d="M156.25 398.381c0-8.068 2.648-14.877 7.943-20.424 5.547-5.799 12.355-8.699 20.424-8.699 8.321 0 15.255 2.9 20.803 8.699 5.547 5.547 8.321 12.356 8.321 20.424 0 7.817-2.774 14.499-8.321 20.047-5.548 5.295-12.482 7.942-20.803 7.942-8.069 0-14.877-2.647-20.424-7.942-5.295-5.548-7.943-12.23-7.943-20.047Z" fill="#2F2F2F" style="mix-blend-mode:multiply"/>
    4         <path d="M369.361 142.207c20.947 0 40.528 4.722 58.743 14.167 18.519 9.444 34.608 22.392 48.269 38.844 13.662 16.452 24.439 35.798 32.332 58.038 8.196 22.24 12.295 46.308 12.295 72.205 0 24.677-4.099 47.831-12.295 69.462-7.893 21.631-18.67 40.52-32.332 56.667-13.661 15.843-29.75 28.486-48.269 37.931-18.215 9.139-37.796 13.709-58.743 13.709-20.643 0-40.072-4.57-58.287-13.709-17.911-9.445-33.697-22.088-47.358-37.931-13.358-16.147-23.983-35.036-31.876-56.667-7.893-21.631-11.84-44.785-11.84-69.462 0-25.897 3.947-49.965 11.84-72.205 7.893-22.24 18.518-41.586 31.876-58.038 13.661-16.452 29.447-29.4 47.358-38.844 18.215-9.445 37.644-14.167 58.287-14.167Zm0 334.518c10.929 0 20.644-2.285 29.144-6.855 8.804-4.875 16.242-13.101 22.313-24.678 6.072-11.577 10.626-26.962 13.661-46.156 3.34-19.193 5.009-43.262 5.009-72.204 0-30.162-1.669-55.296-5.009-75.404-3.035-20.412-7.589-36.712-13.661-48.898-6.071-12.187-13.509-20.869-22.313-26.049-8.5-5.179-18.215-7.768-29.144-7.768-10.928 0-20.795 2.589-29.599 7.768-8.5 5.18-15.786 13.862-21.857 26.049-6.072 12.186-10.778 28.486-14.117 48.898-3.036 20.108-4.554 45.242-4.554 75.404 0 28.942 1.518 53.011 4.554 72.204 3.339 19.194 8.045 34.579 14.117 46.156 6.071 11.577 13.357 19.803 21.857 24.678 8.804 4.57 18.671 6.855 29.599 6.855Z" fill="#1B8362" style="mix-blend-mode:multiply"/>
     4        <path class="about-zero" d="M369.361 142.207c20.947 0 40.528 4.722 58.743 14.167 18.519 9.444 34.608 22.392 48.269 38.844 13.662 16.452 24.439 35.798 32.332 58.038 8.196 22.24 12.295 46.308 12.295 72.205 0 24.677-4.099 47.831-12.295 69.462-7.893 21.631-18.67 40.52-32.332 56.667-13.661 15.843-29.75 28.486-48.269 37.931-18.215 9.139-37.796 13.709-58.743 13.709-20.643 0-40.072-4.57-58.287-13.709-17.911-9.445-33.697-22.088-47.358-37.931-13.358-16.147-23.983-35.036-31.876-56.667-7.893-21.631-11.84-44.785-11.84-69.462 0-25.897 3.947-49.965 11.84-72.205 7.893-22.24 18.518-41.586 31.876-58.038 13.661-16.452 29.447-29.4 47.358-38.844 18.215-9.445 37.644-14.167 58.287-14.167Zm0 334.518c10.929 0 20.644-2.285 29.144-6.855 8.804-4.875 16.242-13.101 22.313-24.678 6.072-11.577 10.626-26.962 13.661-46.156 3.34-19.193 5.009-43.262 5.009-72.204 0-30.162-1.669-55.296-5.009-75.404-3.035-20.412-7.589-36.712-13.661-48.898-6.071-12.187-13.509-20.869-22.313-26.049-8.5-5.179-18.215-7.768-29.144-7.768-10.928 0-20.795 2.589-29.599 7.768-8.5 5.18-15.786 13.862-21.857 26.049-6.072 12.186-10.778 28.486-14.117 48.898-3.036 20.108-4.554 45.242-4.554 75.404 0 28.942 1.518 53.011 4.554 72.204 3.339 19.194 8.045 34.579 14.117 46.156 6.071 11.577 13.357 19.803 21.857 24.678 8.804 4.57 18.671 6.855 29.599 6.855Z" fill="#1B8362" style="mix-blend-mode:multiply"/>
    55</svg>

  • branches/6.0/src/wp-admin/includes/dashboard.php

    r53131 r53385  
    19971997        <div class="welcome-panel-content">
    19981998        <div class="welcome-panel-header">
     1999                <div class="welcome-panel-header-image">
     2000                        <?php echo file_get_contents( dirname( __DIR__ ) . '/images/about-header-about.svg' ); ?>
     2001                </div>
    19992002                <h2><?php _e( 'Welcome to WordPress!' ); ?></h2>
    20002003                <p>
Note: See TracChangeset for help on using the changeset viewer.