From c25f79f21a441305d63dc5bf31e5cc582e5e2b4f Mon Sep 17 00:00:00 2001 From: Kelly Choyce-Dwan Date: Tue, 10 May 2022 16:43:44 +0000 Subject: [PATCH] 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 #55532. git-svn-id: https://develop.svn.wordpress.org/trunk@53383 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/colors/_admin.scss | 17 +++-- src/wp-admin/css/colors/_variables.scss | 6 ++ src/wp-admin/css/colors/blue/colors.scss | 2 + src/wp-admin/css/colors/light/colors.scss | 3 + src/wp-admin/css/colors/midnight/colors.scss | 2 + src/wp-admin/css/colors/modern/colors.scss | 4 ++ src/wp-admin/css/dashboard.css | 71 ++++++++++---------- src/wp-admin/images/about-header-about.svg | 6 +- src/wp-admin/includes/dashboard.php | 3 + 9 files changed, 68 insertions(+), 46 deletions(-) diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index cb241905a0..e80b62acc9 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -783,15 +783,18 @@ div#wp-responsive-toggle a:before { } /* Welcome Panel */ - .welcome-panel { - background-color: $highlight-color; + background-color: mix($dashboard-accent-1, white, 12%); +} + +.welcome-panel-header-image .about-six { + fill: $dashboard-accent-1; +} + +.welcome-panel-header-image .about-zero { + fill: $dashboard-accent-2; } [class*="welcome-panel-icon"] { - @if ( $scheme-name == "light" ) { - background-color: $icon-color; - } @else { - background-color: $base-color; - } + background-color: $dashboard-icon-background; } diff --git a/src/wp-admin/css/colors/_variables.scss b/src/wp-admin/css/colors/_variables.scss index 21621342a4..c29e78198f 100644 --- a/src/wp-admin/css/colors/_variables.scss +++ b/src/wp-admin/css/colors/_variables.scss @@ -63,4 +63,10 @@ $adminbar-recovery-exit-background-alt: mix(black, $adminbar-recovery-exit-backg $menu-customizer-text: mix( $base-color, $text-color, 40% ) !default; +// Dashboard Colors + +$dashboard-accent-1: $highlight-color !default; +$dashboard-accent-2: $base-color !default; +$dashboard-icon-background: $dashboard-accent-2 !default; + $low-contrast-theme: "false" !default; diff --git a/src/wp-admin/css/colors/blue/colors.scss b/src/wp-admin/css/colors/blue/colors.scss index f44e540adf..ab12d2ffe2 100644 --- a/src/wp-admin/css/colors/blue/colors.scss +++ b/src/wp-admin/css/colors/blue/colors.scss @@ -9,4 +9,6 @@ $menu-submenu-text: #e2ecf1; $menu-submenu-focus-text: #fff; $menu-submenu-background: #4796b3; +$dashboard-icon-background: $highlight-color; + @import "../_admin.scss"; diff --git a/src/wp-admin/css/colors/light/colors.scss b/src/wp-admin/css/colors/light/colors.scss index 817bd34549..c0ae6470a4 100644 --- a/src/wp-admin/css/colors/light/colors.scss +++ b/src/wp-admin/css/colors/light/colors.scss @@ -18,6 +18,9 @@ $menu-submenu-background: #fff; $menu-collapse-text: #777; $menu-collapse-focus-icon: #555; +$dashboard-accent-2: $icon-color; +$dashboard-icon-background: $text-color; + @import "../_admin.scss"; /* Override the theme filter highlight color for this scheme */ diff --git a/src/wp-admin/css/colors/midnight/colors.scss b/src/wp-admin/css/colors/midnight/colors.scss index 8570c9526e..4781bd2ca3 100644 --- a/src/wp-admin/css/colors/midnight/colors.scss +++ b/src/wp-admin/css/colors/midnight/colors.scss @@ -3,4 +3,6 @@ $base-color: #363b3f; $highlight-color: #e14d43; $notification-color: #69a8bb; +$dashboard-icon-background: $highlight-color; + @import "../_admin.scss"; diff --git a/src/wp-admin/css/colors/modern/colors.scss b/src/wp-admin/css/colors/modern/colors.scss index 7b7918174c..397bda1a23 100644 --- a/src/wp-admin/css/colors/modern/colors.scss +++ b/src/wp-admin/css/colors/modern/colors.scss @@ -7,4 +7,8 @@ $notification-color: $highlight-color; $link: $highlight-color; $link-focus: darken($highlight-color, 10%); +$dashboard-accent-1: #3858e9; +$dashboard-accent-2: #1b8362; +$dashboard-icon-background: #1d2327; + @import "../_admin.scss"; diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index e8f414a9f5..5de0308846 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -120,32 +120,17 @@ position: relative; overflow: auto; margin: 16px 0; - background: #2271b1 url(../images/about-texture.png) center repeat; - background-size: 500px 500px; - background-blend-mode: overlay; + background-color: #e7ebfd; font-size: 14px; line-height: 1.3; clear: both; } -.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; -} - .welcome-panel h2 { margin: 0; font-size: 48px; font-weight: 600; line-height: 1.25; - color: #fff; } .welcome-panel h3 { @@ -161,16 +146,32 @@ } .welcome-panel-header { - color: #fff; + --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; +} + +.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; } .welcome-panel-header a { - color: #fff; + color: inherit; } .welcome-panel-header a:focus, .welcome-panel-header a:hover { - color: #f5e6ab; + color: inherit; text-decoration: none; } @@ -195,6 +196,7 @@ font-size: 13px; line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */ text-decoration: none; + z-index: 1; /* Raise above the version image. */ } .welcome-panel .welcome-panel-close:before { @@ -204,18 +206,18 @@ transition: all .1s ease-in-out; content: '\f335'; font-size: 24px; - color: #fff; + color: #1d2327; } .welcome-panel .welcome-panel-close { - color: #fff; + color: #1d2327; } .welcome-panel .welcome-panel-close:hover, .welcome-panel .welcome-panel-close:focus, .welcome-panel .welcome-panel-close:hover::before, .welcome-panel .welcome-panel-close:focus::before { - color: #f5e6ab; + color: #2271b1; } /* @deprecated 5.9.0 -- Button removed from panel. */ @@ -240,8 +242,8 @@ margin-right: auto; max-width: 1500px; width: 100%; - /* 408px = 300px (balloon width) + 96px (offset from edge) + 16px (spacing). */ - padding: 48px 408px 48px 48px; + padding: 48px 0 80px 48px; + padding-right: calc(var(--about-header-bg-width) + (var(--about-header-bg-offset-inline) * 2)); } .welcome-panel .welcome-panel-column-container { @@ -250,7 +252,6 @@ clear: both; display: grid; z-index: 1; - margin-top: 32px; padding: 48px; grid-template-columns: repeat(3, 1fr); gap: 32px; @@ -1353,15 +1354,13 @@ a.rsswidget { } @media screen and (max-width: 782px) { - .welcome-panel::before { - width: 240px; - height: 305px; - right: 32px; + .welcome-panel-header { + --about-header-bg-width: calc(var(--about-header-image-width) * 0.4); + --about-header-bg-offset-inline: 1rem; } - .welcome-panel-header { - /* 288px = 240px (balloon width) + 32px (offset from edge) + 16px (spacing). */ - padding: 32px 288px 32px 32px; + .welcome-panel-header-image { + top: 2rem; } .welcome-panel .welcome-panel-column-container { @@ -1434,12 +1433,12 @@ a.rsswidget { /* Smartphone */ @media screen and (max-width: 600px) { - .welcome-panel::before { - display: none; + .welcome-panel-header { + padding: 32px 32px 64px; } - .welcome-panel-header { - padding: 32px; + .welcome-panel-header-image { + display: none; } } diff --git a/src/wp-admin/images/about-header-about.svg b/src/wp-admin/images/about-header-about.svg index 5a1bc59f98..0cdcff5d90 100644 --- a/src/wp-admin/images/about-header-about.svg +++ b/src/wp-admin/images/about-header-about.svg @@ -1,5 +1,5 @@ - - + diff --git a/src/wp-admin/includes/dashboard.php b/src/wp-admin/includes/dashboard.php index 6d8928c2cb..2045129ea2 100644 --- a/src/wp-admin/includes/dashboard.php +++ b/src/wp-admin/includes/dashboard.php @@ -1996,6 +1996,9 @@ function wp_welcome_panel() { ?>
+
+ +