Editor: Fix color of the TinyMCE button icons in the Classic block.

Fixes a CSS specificity conflict with the TinyMCE skin where the button icons were white and barely visible in the buttons active state.

Developed in #12783

Props khokansardar, iqbal1hossain, gulamdastgir04, darshitrajyaguru97, afercia.
Fixes #65768.


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

Author: afercia

src/wp-includes/css/editor.css

@@ -425,11 +425,17 @@ div.mce-path {
 	border-color: #50575e;
 }
 
-.mce-btn.mce-active,
-.mce-btn.mce-active button,
-.mce-btn.mce-active:hover button,
-.mce-btn.mce-active i,
-.mce-btn.mce-active:hover i {
+/*
+ * TinyMCE appends its skin stylesheet when the editor initializes. The skin may
+ * be parsed after this stylesheet. The extra `mce-toolbar` class gives these
+ * selectors a higher specificity than the skin's white active state, so that
+ * the styling no longer depend on source order.
+ */
+.mce-toolbar .mce-btn.mce-active,
+.mce-toolbar .mce-btn.mce-active button,
+.mce-toolbar .mce-btn.mce-active:hover button,
+.mce-toolbar .mce-btn.mce-active i,
+.mce-toolbar .mce-btn.mce-active:hover i {
 	color: inherit;
 }