diff --git a/src/wp-admin/admin-footer.php b/src/wp-admin/admin-footer.php
index abb020e046459..55976a1ea399f 100644
--- a/src/wp-admin/admin-footer.php
+++ b/src/wp-admin/admin-footer.php
@@ -17,10 +17,6 @@
global $hook_suffix;
?>
-
-
-
-
+
+
+
li.current > a.current:after {
width: 0;
position: absolute;
pointer-events: none;
- border-right-color: #f0f0f1;
+ border-right-color: #fff;
top: 50%;
margin-top: -8px;
}
@@ -663,7 +663,7 @@ li#wp-admin-bar-menu-toggle {
.auto-fold #wpcontent {
position: relative;
margin-left: 0;
- padding-left: 10px;
+ padding-left: 0;
}
.sticky-menu #adminmenuwrap {
diff --git a/src/wp-admin/css/colors/_variables.scss b/src/wp-admin/css/colors/_variables.scss
index d37c2b1392f00..860604a74beb1 100644
--- a/src/wp-admin/css/colors/_variables.scss
+++ b/src/wp-admin/css/colors/_variables.scss
@@ -18,7 +18,7 @@ $notification-color: #d54e21 !default;
// global
-$body-background: $gray-100 !default;
+$body-background: $white !default;
$link: #0073aa !default;
$link-focus: color.adjust($link, $lightness: 10%) !default;
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 0a3f9f8ba9a2b..2564c6a2b4f21 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1,32 +1,72 @@
/* 2 column liquid layout */
#wpwrap {
- height: auto;
- min-height: 100%;
+ height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
width: 100%;
position: relative;
-webkit-font-smoothing: subpixel-antialiased;
+ background: #1e1e1e;
+ overflow: hidden;
}
#wpcontent {
height: 100%;
- padding-left: 20px;
+ padding: 0 8px 8px 0;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
}
-#wpcontent,
-#wpfooter {
+#wpcontent {
margin-left: 160px;
}
-.folded #wpcontent,
-.folded #wpfooter {
+.folded #wpcontent {
margin-left: 36px;
}
+#wpbody {
+ flex: 1;
+ min-height: 0;
+}
+
#wpbody-content {
- padding-bottom: 65px;
- float: left;
- width: 100%;
- overflow: visible;
+ position: relative;
+ height: 100%;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ overscroll-behavior: none;
+ background: #fff;
+ border-radius: 8px;
+}
+
+/* Block editor frame overrides */
+body.js.block-editor-page #wpbody-content {
+ padding-bottom: 0;
+ overflow: hidden;
+}
+
+body.js.block-editor-page:not(.is-fullscreen-mode) .interface-interface-skeleton {
+ right: 8px;
+ bottom: 8px;
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+/* Fullscreen mode: remove frame */
+body.is-fullscreen-mode #wpwrap {
+ height: 100vh;
+ background: #fff;
+}
+
+body.is-fullscreen-mode #wpcontent {
+ padding: 0;
+ margin-left: 0;
+}
+
+body.is-fullscreen-mode #wpbody-content {
+ border-radius: 0;
}
/* inner 2 column liquid layout */
@@ -222,7 +262,7 @@ body {
}
body {
- background: #f0f0f1;
+ background: #fff;
color: #3c434a;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
@@ -584,7 +624,9 @@ code {
}
.wrap {
- margin: 10px 20px 0 2px;
+ margin: 0;
+ padding: 10px 20px 0 20px;
+ margin-top: -32px;
}
.wrap > h2:first-child, /* Back-compat for pre-4.4 */
@@ -1846,14 +1888,14 @@ p.auto-update-status {
}
#screen-meta-links {
- float: right;
+ align-self: flex-end;
margin: 0 20px 0 0;
}
/* screen options and help tabs revert */
#screen-meta {
display: none;
- margin: 0 20px -1px 0;
+ margin: 0 20px -1px 20px;
position: relative;
background-color: #fff;
border: 1px solid #c3c4c7;
@@ -2353,12 +2395,10 @@ html.wp-toolbar {
------------------------------------------------------------------------------*/
#wpfooter {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
padding: 10px 20px;
color: #50575e;
+ margin-top: auto;
+ padding-top: 24px;
}
#wpfooter p {
@@ -2417,8 +2457,8 @@ h3 .nav-tab, /* Back-compat for pre-4.4 */
.nav-tab-active:hover,
.nav-tab-active:focus,
.nav-tab-active:focus:active {
- border-bottom: 1px solid #f0f0f1;
- background: #f0f0f1;
+ border-bottom: 1px solid #fff;
+ background: #fff;
color: #000;
}
@@ -3991,20 +4031,38 @@ img {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
+ #wpwrap {
+ height: auto;
+ overflow: visible;
+ background: none;
+ }
+
#wpcontent {
position: relative;
margin-left: 0;
- padding-left: 10px;
+ padding: 0;
+ height: auto;
+ display: block;
+ }
+
+ #wpbody {
+ min-height: 0;
}
#wpbody-content {
padding-bottom: 100px;
+ border-radius: 0;
+ height: auto;
+ overflow: visible;
+ display: block;
+ background: none;
+ overscroll-behavior: auto;
}
.wrap {
clear: both;
- margin-right: 12px;
- margin-left: 0;
+ margin: 0;
+ padding: 10px 12px 0;
}
/* categories */
@@ -4272,9 +4330,11 @@ img {
#screen-meta,
#screen-meta-links {
margin-right: 10px;
+ margin-left: 10px;
}
#screen-meta-links {
+ float: right;
margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */
}
diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index 1c5d42ea6b1ff..fa9d5613e26d3 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -72,6 +72,7 @@
outline-offset: -2px;
border-radius: 8px;
height: 250px;
+ margin: 4px;
}
/* Only highlight drop zones when dragging. */
diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index 9e36d1f8249b0..9dca712d26c7a 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/wp-admin/css/edit.css
@@ -445,7 +445,6 @@ form#tags-filter {
/* End TinyMCE native fullscreen mode override */
#wp-content-editor-tools {
- background-color: #f0f0f1;
padding-top: 20px;
}