Dark theme: adapt to the new MD icons experiment
There is a new experiment in the Community Console called
SMEI_GOOGLE_MATERIAL_ICONS, which introduces a new design for the
icons and changes the way of styling the checkboxes in the thread list
view, which breaks the dark theme.
This change fixes the dark theme styles for those checkboxes, and adapts
their style to match the new behavior. This change is
backwards-compatible, so the dark theme won't break for folks who don't
have the experiment enabled (there is a small subtle change which is
applied in both cases: the background of filled checkboxes has been made
lighter so it contrasts better with the background and looks nicer).
This experiment is already enabled for some users, and so this was
reported by one of those users (see
pekb/thread/114559215?msgid=116471244).
Bug: 1
Change-Id: I9c8757c84311946a2a69495f64963fd4fbfed5cd
diff --git a/src/injections/ccdarktheme.css b/src/injections/ccdarktheme.css
index 55ca29c..ad91c05 100644
--- a/src/injections/ccdarktheme.css
+++ b/src/injections/ccdarktheme.css
@@ -257,6 +257,36 @@
color: var(--TWPT-primary-text)!important;
}
+ec-thread-summary material-expansionpanel .action material-button,
+ ec-thread-list material-checkbox material-icon,
+ ec-thread-summary material-expansionpanel .star-button:not(.starred) {
+ color: #696867!important; /* Custom value to match previous behavior */
+ opacity: 1!important;
+}
+
+ec-thread-list material-checkbox material-icon.filled {
+ color: #62a5ff!important; /* Custom value to contrast well with the background */
+}
+
+ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon,
+ .gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon,
+ ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon,
+ .gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon {
+ color: #807d7c!important; /* custom value */
+}
+
+ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
+ .gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon.filled,
+ ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
+ .gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon.filled {
+ color: #92c1ff!important; /* custom value */
+}
+
+/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
+.gm-icons ec-thread-list material-checkbox .icon-container::after{
+ background-color: #dfdedb!important; /* custom value */
+}
+
/* Thread view (including review/live review components) */
ec-question, .heading + .group, ec-message {
background-color: var(--TWPT-secondary-background)!important;