From 56e86e8ba5cd27cc9635225918e8b5a8a2f4f446 Mon Sep 17 00:00:00 2001 From: Khokan Sardar Date: Fri, 31 Jul 2026 09:32:14 +0530 Subject: [PATCH] Editor: Restore contrast of active TinyMCE toolbar button icons. TinyMCE's lightgray skin styles active toolbar buttons as white icons on a dark background, and this file overrides both halves of that: the background becomes light gray, and the icon colour reverts to `inherit`. The colour override used the same selectors as the skin, so it only won the cascade when it was parsed later. TinyMCE appends its skin stylesheet when the editor initializes. When the editor is initialized after page load, as the Classic block does, the skin is parsed after this file and its white icon colour wins, leaving the icons all but invisible on the light gray background. Add the `mce-widget` class, which TinyMCE puts on every button alongside `mce-btn`, to the override so it wins on specificity instead of source order. Fixes #65768. --- src/wp-includes/css/editor.css | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index d612775dbda24..1606ad70f4f42 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -425,11 +425,16 @@ 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, so it can be + * parsed after this file. The extra class gives these rules a higher specificity + * than the skin's white active state, so they no longer depend on source order. + */ +.mce-widget.mce-btn.mce-active, +.mce-widget.mce-btn.mce-active button, +.mce-widget.mce-btn.mce-active:hover button, +.mce-widget.mce-btn.mce-active i, +.mce-widget.mce-btn.mce-active:hover i { color: inherit; }