wp/wp-admin/css/dashboard.css
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
--- a/wp/wp-admin/css/dashboard.css	Tue Oct 22 16:11:46 2019 +0200
+++ b/wp/wp-admin/css/dashboard.css	Tue Dec 15 13:49:49 2020 +0100
@@ -38,24 +38,6 @@
 	border: none !important;
 }
 
-.ie8 #wpbody-content #dashboard-widgets .postbox-container {
-	width: 49.5%;
-}
-
-.ie8 #wpbody-content #dashboard-widgets #postbox-container-2,
-.ie8 #wpbody-content #dashboard-widgets #postbox-container-3,
-.ie8 #wpbody-content #dashboard-widgets #postbox-container-4 {
-	float: right;
-	width: 50.5%;
-}
-
-.ie8 #dashboard-widgets #postbox-container-3 .empty-container,
-.ie8 #dashboard-widgets #postbox-container-4 .empty-container {
-	border: 0 none;
-	height: 0;
-	min-height: 0;
-}
-
 #dashboard-widgets-wrap {
 	overflow: hidden;
 	margin: 0 -8px;
@@ -66,10 +48,41 @@
 }
 
 #dashboard-widgets .meta-box-sortables {
-	margin: 0 8px;
+	display: flow-root; /* avoid margin collapsing between parent and first/last child elements */
+	/* Required min-height to make the jQuery UI Sortable drop zone work. */
 	min-height: 100px;
+	margin: 0 8px 20px;
 }
 
+#dashboard-widgets .postbox-container .empty-container {
+	outline: 3px dashed #b4b9be;
+	height: 250px;
+}
+
+/* Only highlight drop zones when dragging and only in the 2 columns layout. */
+.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
+	outline: 3px dashed #606a73;
+	/* Prevent margin on the child from collapsing with margin on the parent. */
+	display: flow-root;
+}
+
+#dashboard-widgets .postbox-container .empty-container:after {
+	content: attr(data-emptystring);
+	margin: auto;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	transform: translateY( -50% );
+	padding: 0 2em;
+	text-align: center;
+	color: #606a73;
+	font-size: 16px;
+	line-height: 1.5;
+	display: none;
+}
+
+
 /* @todo: this was originally in this section, but likely belongs elsewhere */
 #the-comment-list td.comment p.comment-author {
 	margin-top: 0;
@@ -103,11 +116,11 @@
 	overflow: auto;
 	margin: 16px 0;
 	padding: 23px 10px 0;
-	border: 1px solid #e5e5e5;
+	border: 1px solid #ccd0d4;
 	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
 	background: #fff;
 	font-size: 13px;
-	line-height: 2.1em;
+	line-height: 1.7;
 }
 
 .welcome-panel h2 {
@@ -130,7 +143,7 @@
 	color: #72777c;
 }
 
-.welcome-panel a {
+.welcome-panel li a {
 	text-decoration: none;
 }
 
@@ -180,10 +193,6 @@
 	float: left;
 }
 
-.ie8 .welcome-panel .welcome-panel-column {
-	min-width: 230px;
-}
-
 .welcome-panel .welcome-panel-column:first-child {
 	width: 36%;
 }
@@ -198,7 +207,7 @@
 }
 
 .welcome-panel .welcome-widgets-menus {
-	line-height: 16px;
+	line-height: 1.14285714;
 }
 
 .welcome-panel .welcome-panel-column ul {
@@ -206,7 +215,7 @@
 }
 
 .welcome-panel .welcome-panel-column li {
-	line-height: 16px;
+	line-height: 1.14285714;
 	list-style-type: none;
 	padding: 0 0 8px;
 }
@@ -219,8 +228,9 @@
 
 .welcome-panel .welcome-icon:before,
 #dashboard_right_now li a:before,
-#dashboard_right_now li span:before {
-	color: #82878c;
+#dashboard_right_now li span:before,
+#dashboard_right_now .search-engines-info:before {
+	color: #606a73;
 	font: normal 20px/1 dashicons;
 	speak: none;
 	display: inline-block;
@@ -260,6 +270,16 @@
 	top: -2px;
 }
 
+.welcome-panel .welcome-widgets:before {
+	content: "\f538";
+	top: -2px;
+}
+
+.welcome-panel .welcome-menus:before {
+	content: "\f163";
+	top: -2px;
+}
+
 .welcome-panel .welcome-comments:before {
 	content: "\f117";
 	top: -1px;
@@ -272,6 +292,7 @@
 
 /* Right Now specific Icons styles */
 
+#dashboard_right_now .search-engines-info:before,
 #dashboard_right_now li a:before,
 #dashboard_right_now li > span:before { /* get only the first level span to exclude screen-reader-text in mu-storage */
 	content: "\f159"; /* generic icon for items added by CPTs ? */
@@ -304,6 +325,10 @@
 	content: "\f153";
 }
 
+#dashboard_right_now .search-engines-info:before {
+	content: "\f348";
+}
+
 /* Dashboard WordPress events */
 
 .community-events-errors {
@@ -354,10 +379,14 @@
 	border-left: 4px solid #00a0d2;
 }
 
+#dashboard-widgets .community-events li.event-none a {
+	text-decoration: underline;
+}
+
 .community-events-form label {
 	display: inline-block;
 	vertical-align: top;
-	line-height: 28px;
+	line-height: 2.15384615;
 	height: 28px;
 }
 
@@ -379,7 +408,7 @@
 #dashboard-widgets .community-events-cancel.button-link {
 	vertical-align: top;
 	/* Same properties as the submit button for cross-browsers alignment. */
-	line-height: 26px;
+	line-height: 2;
 	height: 28px;
 	text-decoration: underline;
 }
@@ -422,7 +451,7 @@
 }
 
 .event-icon:before {
-	color: #82878C;
+	color: #606a73;
 	font-size: 18px;
 }
 .event-meetup .event-icon:before {
@@ -549,6 +578,10 @@
 	margin-left: 5px;
 }
 
+#dashboard_right_now p.search-engines-info {
+	margin: 1em 0;
+}
+
 .mu-storage {
 	overflow: hidden;
 }
@@ -718,7 +751,7 @@
 
 #dashboard_activity .no-activity {
 	overflow: hidden;
-	padding: 0 0 12px;
+	padding: 12px 0;
 	text-align: center;
 }
 
@@ -727,24 +760,6 @@
 	font-size: 16px;
 }
 
-#dashboard_activity .no-activity .smiley {
-	margin-top: 0;
-}
-
-#dashboard_activity .no-activity .smiley:before {
-	content: "\f328";
-	font: normal 120px/1 dashicons;
-	speak: none;
-	display: block;
-	margin: 0 5px 0 0;
-	padding: 0;
-	text-indent: 0;
-	text-align: center;
-	position: relative;
-	-webkit-font-smoothing: antialiased;
-	text-decoration: none !important;
-}
-
 #dashboard_activity .subsubsub {
 	float: none;
 	border-top: 1px solid #eee;
@@ -811,7 +826,7 @@
 	top: 12px;
 }
 
-#activity-widget #the-comment-list .dashboard-comment-wrap {
+#activity-widget #the-comment-list .dashboard-comment-wrap.has-avatar {
 	padding-left: 63px;
 }
 
@@ -886,8 +901,9 @@
 	min-width: 0;
 }
 
-#dashboard-widgets a,
-#dashboard-widgets .button-link {
+#dashboard-widgets li a,
+#dashboard-widgets .button-link,
+.community-events-footer a {
 	text-decoration: none;
 }
 
@@ -937,7 +953,7 @@
 }
 
 #latest-comments #the-comment-list .comment-meta {
-	line-height: 1.5em;
+	line-height: 1.5;
 	margin: 0;
 	color: #666;
 }
@@ -970,11 +986,11 @@
 a.rsswidget {
 	font-size: 13px;
 	font-weight: 600;
-	line-height: 1.4em;
+	line-height: 1.4;
 }
 
 .rss-widget ul li {
-	line-height: 1.5em;
+	line-height: 1.5;
 	margin-bottom: 12px;
 }
 
@@ -1073,6 +1089,10 @@
 	color: #df3232;
 }
 
+#dashboard_php_nag h2 {
+	display: inline-block;
+}
+
 #dashboard_php_nag p {
 	margin: 12px 0;
 }
@@ -1093,6 +1113,18 @@
 	#wpbody-content #dashboard-widgets .postbox-container {
 		width: 100%;
 	}
+
+	#dashboard-widgets .meta-box-sortables {
+		min-height: 0;
+	}
+
+	.is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
+		min-height: 100px;
+	}
+
+	#dashboard-widgets .meta-box-sortables.empty-container {
+		margin-bottom: 0;
+	}
 }
 
 /* two columns on the dash, but keep the setting if one is selected */
@@ -1110,9 +1142,10 @@
 
 	#dashboard-widgets #postbox-container-3 .empty-container,
 	#dashboard-widgets #postbox-container-4 .empty-container {
-		border: 0 none;
+		outline: none;
 		height: 0;
 		min-height: 0;
+		margin-bottom: 0;
 	}
 
 	#dashboard-widgets #postbox-container-3 .empty-container:after,
@@ -1124,10 +1157,11 @@
 		width: 100%;
 	}
 
-	#wpbody #wpbody-content .metabox-holder.columns-1 .postbox-container .empty-container {
-		border: 0 none;
+	#wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container {
+		outline: none;
 		height: 0;
 		min-height: 0;
+		margin-bottom: 0;
 	}
 
 	/* show the radio buttons for column prefs only for one or two columns */
@@ -1141,7 +1175,7 @@
 		display: none;
 	}
 
-	.metabox-holder .postbox-container .empty-container:after {
+	#dashboard-widgets .postbox-container .empty-container:after {
 		display: block;
 	}
 }
@@ -1162,16 +1196,24 @@
 	}
 
 	#dashboard-widgets #postbox-container-4 .empty-container {
-		border: 0 none;
+		outline: none;
 		height: 0;
 		min-height: 0;
+		margin-bottom: 0;
 	}
 
 	#dashboard-widgets #postbox-container-4 .empty-container:after {
 		display: none;
 	}
 
-	.metabox-holder .postbox-container .empty-container:after {
+	#dashboard-widgets .postbox-container .empty-container:after {
+		display: block;
+	}
+}
+
+/* Always show the "Drag boxes here" CSS generated content on large screens. */
+@media only screen and (min-width: 1801px) {
+	#dashboard-widgets .postbox-container .empty-container:after {
 		display: block;
 	}
 }
@@ -1196,6 +1238,10 @@
 }
 
 @media screen and (max-width: 782px) {
+	#dashboard-widgets h2 {
+		padding: 12px;
+	}
+
 	#dashboard_recent_comments #the-comment-list .comment-item .avatar {
 		height: 30px;
 		width: 30px;