TinyMCE: fix visual regressions

See #32801.


git-svn-id: https://develop.svn.wordpress.org/trunk@33285 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/colors/_admin.scss

@@ -529,3 +529,12 @@ div#wp-responsive-toggle a:before {
 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
 	color: $menu-icon;
 }
+
+/* TinyMCE */
+
+.mce-container.mce-menu .mce-menu-item:hover,
+.mce-container.mce-menu .mce-menu-item.mce-selected,
+.mce-container.mce-menu .mce-menu-item:focus,
+.mce-container.mce-menu .mce-menu-item-normal.mce-active {
+	background: $highlight-color;
+}

src/wp-includes/css/editor.css

@@ -180,6 +180,7 @@
 	box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 );
 }
 
+.mce-menu,
 .mce-floatpanel.mce-popover.mce-bottom {
 	margin-top: 2px;
 }
@@ -369,7 +370,6 @@ div.mce-path {
 .qt-dfw {
 	border: 1px solid transparent;
 	margin: 2px;
-	background-image: none;
 	-webkit-border-radius: 2px;
 	border-radius: 2px;
 	-webkit-filter: none;
@@ -427,6 +427,9 @@ div.mce-path {
 }
 
 .mce-toolbar .mce-listbox button {
+	font-size: 13px;
+	line-height: 20px;
+	padding-left: 6px;
 	padding-right: 20px;
 }
 
@@ -464,12 +467,7 @@ div.mce-path {
 }
 
 .mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover {
-    background-image: none;
+	border-color: #b4b9be;
-    border-color: #b4b9be;
-}
-
-.mce-toolbar .mce-btn-group .mce-btn.mce-listbox span {
-	font-size: 13px;
 }
 
 .mce-panel .mce-btn i.mce-caret {
@@ -500,34 +498,24 @@ div.mce-path {
 	border-right-color: transparent;
 }
 
-.mce-toolbar .mce-splitbtn .mce-open.mce-active{
+.mce-toolbar .mce-splitbtn .mce-open.mce-active {
-	-webkit-box-shadow: none;
+	background: transparent;
-	box-shadow: none;
+	outline: none;
-}
-
-.mce-menu .mce-menu-item-normal.mce-active {
-	background-color: #e5e5e5;
-	-webkit-filter: none;
-	filter: none;
 }
 
 .mce-menu .mce-menu-item:hover,
 .mce-menu .mce-menu-item.mce-selected,
-.mce-menu .mce-menu-item:focus {
+.mce-menu .mce-menu-item:focus,
-	color: #000;
+.mce-menu .mce-menu-item-normal.mce-active {
-	background-color: #b4b9be;
+	background: #0073aa; /* See color scheme. */
-	background-image: none;
-	-webkit-filter: none;
-	filter: none;
 }
 
-.mce-menu .mce-menu-item:hover .mce-ico,
+.mce-menu .mce-menu-item.mce-disabled {
-.mce-menu .mce-menu-item.mce-selected .mce-ico,
+	cursor: default;
-.mce-menu .mce-menu-item:focus .mce-ico,
+}
-.mce-menu .mce-menu-item:hover .mce-text,
+
-.mce-menu .mce-menu-item.mce-active:hover .mce-text,
+.mce-menu .mce-menu-item.mce-disabled:hover {
-.mce-menu .mce-menu-item.mce-selected .mce-text {
+    background: #ccc;
-	color: #000;
 }
 
 /* Menubar */
@@ -537,13 +525,33 @@ div.mce-path {
 	border-width: 0px 0px 1px;
 }
 
-.mce-menubar .mce-btn:focus {
+.mce-menubar .mce-menubtn {
-	outline: 0;
+	margin: 2px;
+}
+
+.mce-menubar .mce-menubtn:hover,
+.mce-menubar .mce-menubtn.mce-active,
+.mce-menubar .mce-menubtn:focus {
+	border-color: transparent;
+	background: transparent;
+	filter: none;
+}
+
+.mce-menubar .mce-menubtn:focus {
+	color: #124964;
+	-webkit-box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
 }
 
 div.mce-menu .mce-menu-item-sep,
 .mce-menu-item-sep:hover {
-	margin: 5px 0 4px;
+	border-bottom: 1px solid #ddd;
+	height: 0px;
+	margin: 5px 0;
 }
 
 .mce-menubtn span {
@@ -582,7 +590,6 @@ div.mce-menu .mce-menu-item-sep,
 	white-space: nowrap;
 	-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
 	box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
-	background-image: none;
 }
 
 /* Remove the dotted border on :focus and the extra padding in Firefox */
@@ -676,9 +683,10 @@ div.mce-menu .mce-menu-item-sep,
 	cursor: default;
 }
 
-.mce-menubtn.mce-fixed-width button span {
+.mce-menubtn.mce-fixed-width button {
-	max-width: 80px;
+	overflow-x: hidden;
-	padding-right: 16px;
+	text-overflow: ellipsis;
+	width: 110px;
 }
 
 /* Charmap modal */
@@ -708,6 +716,8 @@ div.mce-menu .mce-menu-item-sep,
 }
 
 .mce-tooltip-inner {
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
 	-webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 );
 	box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 );
 	color: #fff;