WordPress.org
Get WordPress

Make WordPress Core

Changeset 53385


Ignore:
Timestamp:
05/10/2022 05:08:35 PM (2 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.