--- a/wp/wp-admin/css/dashboard-rtl.css Wed Sep 21 18:19:35 2022 +0200
+++ b/wp/wp-admin/css/dashboard-rtl.css Tue Sep 27 16:37:53 2022 +0200
@@ -111,56 +111,95 @@
max-width: 100%;
}
+/* Screen meta exception for when the "Dashboard" heading is missing or located below the Welcome Panel. */
+.index-php #screen-meta-links {
+ margin: 0 0 8px 20px;
+}
+
/* Welcome Panel */
.welcome-panel {
position: relative;
overflow: auto;
margin: 16px 0;
- padding: 23px 10px 0;
- border: 1px solid #c3c4c7;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
- background: #fff;
- font-size: 13px;
- line-height: 1.7;
+ background-color: #e7ebfd;
+ font-size: 14px;
+ line-height: 1.3;
+ clear: both;
}
.welcome-panel h2 {
margin: 0;
- font-size: 21px;
- font-weight: 400;
- line-height: 1.2;
+ font-size: 48px;
+ font-weight: 600;
+ line-height: 1.25;
}
.welcome-panel h3 {
- margin: 1.33em 0 0;
- font-size: 16px;
-}
-
-.welcome-panel li {
- font-size: 14px;
+ margin: 0;
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 1.4;
}
.welcome-panel p {
- color: #646970;
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.welcome-panel-header {
+ --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 li a {
+.welcome-panel-header-image {
+ position: absolute;
+ top: -1rem;
+ left: var(--about-header-bg-offset-inline);
+ bottom: 0;
+ width: var(--about-header-bg-width);
+ height: auto;
+}
+
+.welcome-panel-header-image svg {
+ width: 100%;
+ height: auto;
+}
+
+.welcome-panel-header a {
+ color: inherit;
+}
+
+.welcome-panel-header a:focus,
+.welcome-panel-header a:hover {
+ color: inherit;
text-decoration: none;
}
-.welcome-panel .about-description {
- font-size: 16px;
- margin: 0;
+.welcome-panel-header a:focus,
+.welcome-panel .welcome-panel-close:focus {
+ outline-color: currentColor;
+ outline-offset: 1px;
+ box-shadow: none;
+}
+
+.welcome-panel-header p {
+ margin: 0.5em 0 0;
+ font-size: 20px;
+ line-height: 1.4;
}
.welcome-panel .welcome-panel-close {
position: absolute;
top: 10px;
left: 10px;
- padding: 10px 21px 10px 15px;
+ padding: 10px 24px 10px 15px;
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 {
@@ -168,8 +207,23 @@
top: 8px;
right: 0;
transition: all .1s ease-in-out;
+ content: '\f335';
+ font-size: 24px;
+ color: #1d2327;
+}
+
+.welcome-panel .welcome-panel-close {
+ 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: #2271b1;
+}
+
+/* @deprecated 5.9.0 -- Button removed from panel. */
.wp-core-ui .welcome-panel .button.button-hero {
margin: 15px 0 3px 13px;
padding: 12px 36px;
@@ -179,54 +233,98 @@
}
.welcome-panel-content {
- margin-right: 13px;
+ min-height: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.welcome-panel-header {
+ box-sizing: border-box;
+ margin-right: auto;
+ margin-left: auto;
max-width: 1500px;
+ width: 100%;
+ padding: 48px 48px 80px 0;
+ padding-left: calc(var(--about-header-bg-width) + (var(--about-header-bg-offset-inline) * 2));
}
.welcome-panel .welcome-panel-column-container {
+ box-sizing: border-box;
+ width: 100%;
clear: both;
- position: relative;
-}
-
-.welcome-panel .welcome-panel-column {
- width: 32%;
- min-width: 200px;
- float: right;
+ display: grid;
+ z-index: 1;
+ padding: 48px;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 32px;
+ align-self: flex-end;
+ background: #fff;
}
-.welcome-panel .welcome-panel-column:first-child {
- width: 36%;
+[class*="welcome-panel-icon"] {
+ height: 60px;
+ width: 60px;
+ background-color: #1d2327;
+ background-position: center;
+ background-size: 24px 24px;
+ background-repeat: no-repeat;
+ border-radius: 100%;
}
-.welcome-panel-column p.hide-if-no-customize {
- margin-top: 10px;
+.welcome-panel-column {
+ display: grid;
+ grid-template-columns: min-content 1fr;
+ gap: 24px;
+}
+
+.welcome-panel-icon-pages {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 13.8h6v-1.5H7v1.5zM18 16V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2zM5.5 16V4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5zM7 10.5h8V9H7v1.5zm0-3.3h8V5.8H7v1.4zM20.2 6v13c0 .7-.6 1.2-1.2 1.2H8v1.5h11c1.5 0 2.7-1.2 2.7-2.8V6h-1.5z' /%3E%3C/svg%3E");
}
-.welcome-panel-column p {
- margin-top: 7px;
- color: #3c434a;
+.welcome-panel-icon-layout {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z' /%3E%3C/svg%3E");
}
+.welcome-panel-icon-styles {
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' /%3E%3C/svg%3E");
+}
+
+/* @deprecated 5.9.0 -- Section removed from welcome panel. */
.welcome-panel .welcome-widgets-menus {
line-height: 1.14285714;
}
+/* @deprecated 5.9.0 -- Lists removed from welcome panel. */
.welcome-panel .welcome-panel-column ul {
margin: 0.8em 0 1em 1em;
}
+/* @deprecated 5.9.0 -- Lists removed from welcome panel. */
+.welcome-panel li {
+ font-size: 14px;
+}
+
+/* @deprecated 5.9.0 -- Lists removed from welcome panel. */
+.welcome-panel li a {
+ text-decoration: none;
+}
+
+/* @deprecated 5.9.0 -- Lists removed from welcome panel. */
.welcome-panel .welcome-panel-column li {
line-height: 1.14285714;
list-style-type: none;
padding: 0 0 8px;
}
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-icon {
background: transparent !important;
}
/* Welcome Panel and Right Now common Icons style */
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-icon:before,
#dashboard_right_now li a:before,
#dashboard_right_now li span:before,
@@ -245,47 +343,56 @@
/* Welcome Panel specific Icons styles */
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-write-blog:before,
.welcome-panel .welcome-edit-page:before {
content: "\f119";
top: -3px;
}
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-add-page:before {
content: "\f132";
top: -1px;
}
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-setup-home:before {
content: "\f102";
top: -1px;
}
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-view-site:before {
content: "\f115";
top: -2px;
}
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-widgets-menus:before {
content: "\f116";
top: -2px;
}
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-widgets:before {
content: "\f538";
top: -2px;
}
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-menus:before {
content: "\f163";
top: -2px;
}
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-comments:before {
content: "\f117";
top: -1px;
}
+/* @deprecated 5.9.0 -- Icons removed from welcome panel. */
.welcome-panel .welcome-learn-more:before {
content: "\f118";
top: -1px;
@@ -355,7 +462,7 @@
.community-events-errors [aria-hidden="true"],
.community-events-loading[aria-hidden="true"],
.community-events[aria-hidden="true"],
-.community-events [aria-hidden="true"] {
+.community-events form[aria-hidden="true"] {
display: none;
}
@@ -519,7 +626,7 @@
#dashboard_primary .rss-widget {
font-size: 13px;
- padding: 0 12px 0;
+ padding: 0 12px;
}
#dashboard_primary .rss-widget:last-child {
@@ -600,7 +707,7 @@
color: #50575e;
background: #f6f7f7;
border-top: 1px solid #f0f0f1;
- padding: 10px 12px 6px 12px;
+ padding: 10px 12px 6px;
}
#dashboard_right_now .sub h3 {
@@ -836,7 +943,7 @@
}
#activity-widget #the-comment-list .comment-item p.row-actions {
- margin: 4px 0 0 0;
+ margin: 4px 0 0;
}
#activity-widget #the-comment-list .comment-item:first-child {
@@ -1103,6 +1210,18 @@
/* =Media Queries
-------------------------------------------------------------- */
+@media only screen and (min-width: 1600px) {
+ .welcome-panel .welcome-panel-column-container {
+ display: flex;
+ justify-content: center;
+ }
+
+ .welcome-panel-column {
+ width: 100%;
+ max-width: 460px;
+ }
+}
+
/* one column on the dash */
@media only screen and (max-width: 799px) {
#wpbody-content #dashboard-widgets .postbox-container {
@@ -1214,25 +1333,67 @@
}
@media screen and (max-width: 870px) {
- .welcome-panel .welcome-panel-column,
- .welcome-panel .welcome-panel-column:first-child {
- display: block;
- float: none;
- width: 100%;
- }
-
+ /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
.welcome-panel .welcome-panel-column li {
display: inline-block;
margin-left: 13px;
}
+ /* @deprecated 5.9.0 -- Lists removed from welcome panel. */
.welcome-panel .welcome-panel-column ul {
margin: 0.4em 0 0;
}
}
+@media screen and (max-width: 1180px) and (min-width: 783px) {
+ .welcome-panel-column {
+ grid-template-columns: 1fr;
+ }
+
+ [class*="welcome-panel-icon"] {
+ display: none;
+ }
+}
+
@media screen and (max-width: 782px) {
+ .welcome-panel-header {
+ --about-header-bg-width: calc(var(--about-header-image-width) * 0.4);
+ --about-header-bg-offset-inline: 1rem;
+ }
+
+ .welcome-panel-header-image {
+ top: 2rem;
+ }
+
+ .welcome-panel .welcome-panel-column-container {
+ grid-template-columns: 1fr;
+ box-sizing: border-box;
+ padding: 32px;
+ width: 100%;
+ }
+
+ .welcome-panel .welcome-panel-column-content {
+ max-width: 520px;
+ }
+
+ /* Keep the close icon from overlapping the Welcome text. */
+ .welcome-panel .welcome-panel-close {
+ overflow: hidden;
+ text-indent: 40px;
+ white-space: nowrap;
+ width: 20px;
+ height: 20px;
+ padding: 5px;
+ top: 5px;
+ left: 5px;
+ }
+
+ .welcome-panel .welcome-panel-close::before {
+ top: 5px;
+ right: -35px;
+ }
+
#dashboard-widgets h2 {
padding: 12px;
}
@@ -1275,23 +1436,28 @@
/* Smartphone */
@media screen and (max-width: 600px) {
- /* Keep the close icon from overlapping the Welcome text. */
- .welcome-panel .welcome-panel-close {
- overflow: hidden;
- text-indent: 40px;
- white-space: nowrap;
- width: 20px;
- height: 20px;
- padding: 5px;
- top: 5px;
- left: 5px;
+ .welcome-panel-header {
+ padding: 32px 32px 64px;
}
- /* Make the close icon larger for tappability. */
- .welcome-panel .welcome-panel-close:before {
- font-size: 20px;
- top: 5px;
- right: -35px;
+ .welcome-panel-header-image {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .welcome-panel-column {
+ gap: 16px;
+ }
+}
+
+@media screen and (max-width: 360px) {
+ .welcome-panel-column {
+ grid-template-columns: 1fr;
+ }
+
+ [class*="welcome-panel-icon"] {
+ display: none;
}
}