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() { ?>
+
+ +