mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2026-08-13 21:30:26 +00:00
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
This commit is contained in:
Kelly Choyce-Dwan
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -3,4 +3,6 @@ $base-color: #363b3f;
|
||||
$highlight-color: #e14d43;
|
||||
$notification-color: #69a8bb;
|
||||
|
||||
$dashboard-icon-background: $highlight-color;
|
||||
|
||||
@import "../_admin.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";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user