<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[53383] trunk/src/wp-admin: Administration: Update design of the Dashboard welcome panel.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/53383">53383</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/53383","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ryelle</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2022-05-10 16:43:44 +0000 (Tue, 10 May 2022)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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.
Fixes <a href="https://core.trac.wordpress.org/ticket/55532">#55532</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscolors_adminscss">trunk/src/wp-admin/css/colors/_admin.scss</a></li>
<li><a href="#trunksrcwpadmincsscolors_variablesscss">trunk/src/wp-admin/css/colors/_variables.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorsbluecolorsscss">trunk/src/wp-admin/css/colors/blue/colors.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorslightcolorsscss">trunk/src/wp-admin/css/colors/light/colors.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorsmidnightcolorsscss">trunk/src/wp-admin/css/colors/midnight/colors.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorsmoderncolorsscss">trunk/src/wp-admin/css/colors/modern/colors.scss</a></li>
<li><a href="#trunksrcwpadmincssdashboardcss">trunk/src/wp-admin/css/dashboard.css</a></li>
<li><a href="#trunksrcwpadminimagesaboutheaderaboutsvg">trunk/src/wp-admin/images/about-header-about.svg</a></li>
<li><a href="#trunksrcwpadminincludesdashboardphp">trunk/src/wp-admin/includes/dashboard.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscolors_adminscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/_admin.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/_admin.scss 2022-05-10 16:31:30 UTC (rev 53382)
+++ trunk/src/wp-admin/css/colors/_admin.scss 2022-05-10 16:43:44 UTC (rev 53383)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -783,15 +783,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Welcome Panel */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: mix($dashboard-accent-1, white, 12%);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.welcome-panel-header-image .about-six {
+ fill: $dashboard-accent-1;
+}
+
+.welcome-panel-header-image .about-zero {
+ fill: $dashboard-accent-2;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> [class*="welcome-panel-icon"] {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- @if ( $scheme-name == "light" ) {
- background-color: $icon-color;
- } @else {
- background-color: $base-color;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: $dashboard-icon-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadmincsscolors_variablesscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/_variables.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/_variables.scss 2022-05-10 16:31:30 UTC (rev 53382)
+++ trunk/src/wp-admin/css/colors/_variables.scss 2022-05-10 16:43:44 UTC (rev 53383)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -63,4 +63,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+// Dashboard Colors
+
+$dashboard-accent-1: $highlight-color !default;
+$dashboard-accent-2: $base-color !default;
+$dashboard-icon-background: $dashboard-accent-2 !default;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $low-contrast-theme: "false" !default;
</span></span></pre></div>
<a id="trunksrcwpadmincsscolorsbluecolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/blue/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/blue/colors.scss 2022-05-10 16:31:30 UTC (rev 53382)
+++ trunk/src/wp-admin/css/colors/blue/colors.scss 2022-05-10 16:43:44 UTC (rev 53383)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -9,4 +9,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $menu-submenu-focus-text: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> $menu-submenu-background: #4796b3;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$dashboard-icon-background: $highlight-color;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @import "../_admin.scss";
</span></span></pre></div>
<a id="trunksrcwpadmincsscolorslightcolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/light/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/light/colors.scss 2022-05-10 16:31:30 UTC (rev 53382)
+++ trunk/src/wp-admin/css/colors/light/colors.scss 2022-05-10 16:43:44 UTC (rev 53383)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -18,6 +18,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $menu-collapse-text: #777;
</span><span class="cx" style="display: block; padding: 0 10px"> $menu-collapse-focus-icon: #555;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$dashboard-accent-2: $icon-color;
+$dashboard-icon-background: $text-color;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @import "../_admin.scss";
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Override the theme filter highlight color for this scheme */
</span></span></pre></div>
<a id="trunksrcwpadmincsscolorsmidnightcolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/midnight/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/midnight/colors.scss 2022-05-10 16:31:30 UTC (rev 53382)
+++ trunk/src/wp-admin/css/colors/midnight/colors.scss 2022-05-10 16:43:44 UTC (rev 53383)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3,4 +3,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $highlight-color: #e14d43;
</span><span class="cx" style="display: block; padding: 0 10px"> $notification-color: #69a8bb;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$dashboard-icon-background: $highlight-color;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @import "../_admin.scss";
</span></span></pre></div>
<a id="trunksrcwpadmincsscolorsmoderncolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/modern/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/modern/colors.scss 2022-05-10 16:31:30 UTC (rev 53382)
+++ trunk/src/wp-admin/css/colors/modern/colors.scss 2022-05-10 16:43:44 UTC (rev 53383)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,4 +7,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $link: $highlight-color;
</span><span class="cx" style="display: block; padding: 0 10px"> $link-focus: darken($highlight-color, 10%);
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$dashboard-accent-1: #3858e9;
+$dashboard-accent-2: #1b8362;
+$dashboard-icon-background: #1d2327;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @import "../_admin.scss";
</span></span></pre></div>
<a id="trunksrcwpadmincssdashboardcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/dashboard.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/dashboard.css 2022-05-10 16:31:30 UTC (rev 53382)
+++ trunk/src/wp-admin/css/dashboard.css 2022-05-10 16:43:44 UTC (rev 53383)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -120,32 +120,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 16px 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: #2271b1 url(../images/about-texture.png) center repeat;
- background-size: 500px 500px;
- background-blend-mode: overlay;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: #e7ebfd;
</ins><span class="cx" style="display: block; padding: 0 10px"> font-size: 14px;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.3;
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.welcome-panel::before {
- content: "";
- position: absolute;
- top: -16px;
- right: 96px;
- z-index: 0;
- width: 300px;
- height: 382px;
- background: url(../images/about-header-about.svg) no-repeat center;
- background-size: contain;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel h2 {
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 48px;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: 600;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.25;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #fff;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel h3 {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -161,16 +146,32 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel-header {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ --about-header-image-width: 521px;
+ --about-header-bg-width: calc(var(--about-header-image-width) * 0.55);
+ --about-header-bg-offset-inline: 2rem;
+
+ position: relative;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.welcome-panel-header-image {
+ position: absolute;
+ inset: -1rem var(--about-header-bg-offset-inline) 0 auto;
+ width: var(--about-header-bg-width);
+ height: auto;
+}
+
+.welcome-panel-header-image svg {
+ width: 100%;
+ height: auto;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel-header a {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel-header a:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel-header a:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #f5e6ab;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: inherit;
</ins><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -195,6 +196,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */
</span><span class="cx" style="display: block; padding: 0 10px"> text-decoration: none;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ z-index: 1; /* Raise above the version image. */
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-close:before {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -204,11 +206,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> transition: all .1s ease-in-out;
</span><span class="cx" style="display: block; padding: 0 10px"> content: '\f335';
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 24px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #1d2327;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-close {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #1d2327;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-close:hover,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -215,7 +217,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-close:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-close:hover::before,
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-close:focus::before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: #f5e6ab;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #2271b1;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* @deprecated 5.9.0 -- Button removed from panel. */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -240,8 +242,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 1500px;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* 408px = 300px (balloon width) + 96px (offset from edge) + 16px (spacing). */
- padding: 48px 408px 48px 48px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 48px 0 80px 48px;
+ padding-right: calc(var(--about-header-bg-width) + (var(--about-header-bg-offset-inline) * 2));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-column-container {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -250,7 +252,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="cx" style="display: block; padding: 0 10px"> display: grid;
</span><span class="cx" style="display: block; padding: 0 10px"> z-index: 1;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: 32px;
</del><span class="cx" style="display: block; padding: 0 10px"> padding: 48px;
</span><span class="cx" style="display: block; padding: 0 10px"> grid-template-columns: repeat(3, 1fr);
</span><span class="cx" style="display: block; padding: 0 10px"> gap: 32px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1353,15 +1354,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media screen and (max-width: 782px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .welcome-panel::before {
- width: 240px;
- height: 305px;
- right: 32px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .welcome-panel-header {
+ --about-header-bg-width: calc(var(--about-header-image-width) * 0.4);
+ --about-header-bg-offset-inline: 1rem;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .welcome-panel-header {
- /* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */
- padding: 32px 288px 32px 32px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .welcome-panel-header-image {
+ top: 2rem;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .welcome-panel .welcome-panel-column-container {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1434,12 +1433,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Smartphone */
</span><span class="cx" style="display: block; padding: 0 10px"> @media screen and (max-width: 600px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .welcome-panel::before {
- display: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .welcome-panel-header {
+ padding: 32px 32px 64px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .welcome-panel-header {
- padding: 32px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .welcome-panel-header-image {
+ display: none;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpadminimagesaboutheaderaboutsvg"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/images/about-header-about.svg</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/images/about-header-about.svg 2022-05-10 16:31:30 UTC (rev 53382)
+++ trunk/src/wp-admin/images/about-header-about.svg 2022-05-10 16:43:44 UTC (rev 53383)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,5 +1,5 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<svg width="521" height="504" viewBox="0 0 521 504" fill="none" xmlns="http://www.w3.org/2000/svg">
- <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.40
8 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"/>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<svg width="521" height="504" viewBox="0 0 521 504" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+ <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.5
37 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"/>
</ins><span class="cx" style="display: block; padding: 0 10px"> <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"/>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <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"/>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <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"/>
</ins><span class="cx" style="display: block; padding: 0 10px"> </svg>
</span></span></pre></div>
<a id="trunksrcwpadminincludesdashboardphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/dashboard.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/dashboard.php 2022-05-10 16:31:30 UTC (rev 53382)
+++ trunk/src/wp-admin/includes/dashboard.php 2022-05-10 16:43:44 UTC (rev 53383)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1996,6 +1996,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="welcome-panel-content">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="welcome-panel-header">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div class="welcome-panel-header-image">
+ <?php echo file_get_contents( dirname( __DIR__ ) . '/images/about-header-about.svg' ); ?>
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> <h2><?php _e( 'Welcome to WordPress!' ); ?></h2>
</span><span class="cx" style="display: block; padding: 0 10px"> <p>
</span><span class="cx" style="display: block; padding: 0 10px"> <a href="<?php echo esc_url( admin_url( 'about.php' ) ); ?>">
</span></span></pre>
</div>
</div>
</body>
</html>