Module talk:Message box

Protected edit request on 4 May 2024

This ombox defines a backgroundcolor, without defining a text color, which is problematic in the new darkmod. I suggest we add color: #202122 to the first styling block to. —TheDJ (talk • contribs) 15:58, 4 May 2024 (UTC)

 Done — Martin (MSGJ · talk) 20:54, 6 May 2024 (UTC)

Ick, dark grey instead of ordinary black. I suppose that matches the same done in Vector, but it mismatches other skins. Anomie⚔ 11:50, 7 May 2024 (UTC)

Yes, this is one reason I've been leery of fixing dark mode by adding color: definite_color... Izno (talk) 04:10, 21 May 2024 (UTC)

Edit request 8 May 2024

Description of suggested change: Add CSS styling for night mode to the ombox styles.css. Diff:

−

.ombox { margin: 4px 0; border-collapse: collapse; border: 1px solid #a2a9b1; /* Default "notice" gray */ background-color: #f8f9fa; box-sizing: border-box; color: #202122; } /* For the "small=yes" option. */ .ombox.mbox-small { font-size: 88%; line-height: 1.25em; } .ombox-speedy { border: 2px solid #b32424; /* Red */ background-color: #fee7e6; /* Pink */ } .ombox-delete { border: 2px solid #b32424; /* Red */ } .ombox-content { border: 1px solid #f28500; /* Orange */ } .ombox-style { border: 1px solid #fc3; /* Yellow */ } .ombox-move { border: 1px solid #9932cc; /* Purple */ } .ombox-protection { border: 2px solid #a2a9b1; /* Gray-gold */ }

+

.ombox { margin: 4px 0; border-collapse: collapse; border: 1px solid #a2a9b1; /* Default "notice" gray */ background-color: #f8f9fa; box-sizing: border-box; } html.skin-theme-clientpref-night .ombox { margin: 4px 0; border-collapse: collapse; border: 1px solid #f8f9fa; /* Off-white */ background-color: #00143d; /* Dark blue */ box-sizing: border-box; } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox { margin: 4px 0; border-collapse: collapse; border: 1px solid #f8f9fa; /* Off-white */ background-color: #00143d; /* Dark blue */ box-sizing: border-box; } } /* For the "small=yes" option. */ .ombox.mbox-small { font-size: 88%; line-height: 1.25em; } .ombox-speedy { border: 2px solid #b32424; /* Red */ background-color: #fee7e6; /* Pink */ } html.skin-theme-clientpref-night .ombox-speedy { border: 2px solid #ffdbdb; /* Light pink */ background-color: #b32424; /* Red */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-speedy { border: 2px solid #ffdbdb; /* Light pink */ background-color: #b32424; /* Red */ } } .ombox-delete { border: 2px solid #b32424; /* Red */ } html.skin-theme-clientpref-night .ombox-delete { border: 2px solid #ff6961; /* Pink */ background-color: #b32424; /* Red */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-delete { border: 2px solid #ff6961; /* Pink */ background-color: #b32424; /* Red */ } } .ombox-content { border: 1px solid #f28500; /* Orange */ } html.skin-theme-clientpref-night .ombox-content { border: 1px solid #ffe7ce; /* Off-white */ background-color: #ff8f05; /* Orange */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-content { border: 1px solid #ffe7ce; /* Off-white */ background-color: #ff8f05; /* Orange */ } } .ombox-style { border: 1px solid #fc3; /* Yellow */ } html.skin-theme-clientpref-night .ombox-style { border: 1px solid #fff9db; /* Off-white */ background-color: #fad000; /* Yellow */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-style { border: 1px solid #fff9db; /* Off-white */ background-color: #fad000; /* Yellow */ } } .ombox-move { border: 1px solid #9932cc; /* Purple */ } html.skin-theme-clientpref-night .ombox-move { border: 1px solid #c9b3ff; /* Light purple */ background-color: #7500db; /* Purple */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-move { border: 1px solid #c9b3ff; /* Light purple */ background-color: #7500db; /* Purple */ } } .ombox-protection { border: 2px solid #a2a9b1; /* Gray-gold */ } html.skin-theme-clientpref-night .ombox-protection { border: 1px solid #fff; /* White */ background-color: #a2a9b1; /* Blueish-light gray */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-protection { border: 1px solid #fff; /* White */ background-color: #a2a9b1; /* Blueish-light gray */ } }

Andumé (talk) 23:45, 8 May 2024 (UTC)

Another option with a darker/higher contrast/more consistent color scheme would be this:

−

.ombox { margin: 4px 0; border-collapse: collapse; border: 1px solid #a2a9b1; /* Default "notice" gray */ background-color: #f8f9fa; box-sizing: border-box; color: #202122; } /* For the "small=yes" option. */ .ombox.mbox-small { font-size: 88%; line-height: 1.25em; } .ombox-speedy { border: 2px solid #b32424; /* Red */ background-color: #fee7e6; /* Pink */ } .ombox-delete { border: 2px solid #b32424; /* Red */ } .ombox-content { border: 1px solid #f28500; /* Orange */ } .ombox-style { border: 1px solid #fc3; /* Yellow */ } .ombox-move { border: 1px solid #9932cc; /* Purple */ } .ombox-protection { border: 2px solid #a2a9b1; /* Gray-gold */ }

+

.ombox { margin: 4px 0; border-collapse: collapse; border: 1px solid #a2a9b1; /* Default "notice" gray */ background-color: #f8f9fa; box-sizing: border-box; } html.skin-theme-clientpref-night .ombox { margin: 4px 0; border-collapse: collapse; border: 1px solid #f8f9fa; /* Off-white */ background-color: #00143d; /* Dark blue */ box-sizing: border-box; } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox { margin: 4px 0; border-collapse: collapse; border: 1px solid #f8f9fa; /* Off-white */ background-color: #00143d; /* Dark blue */ box-sizing: border-box; } } /* For the "small=yes" option. */ .ombox.mbox-small { font-size: 88%; line-height: 1.25em; } .ombox-speedy { border: 2px solid #b32424; /* Red */ background-color: #fee7e6; /* Pink */ } html.skin-theme-clientpref-night .ombox-speedy { border: 2px solid #ffdbdb; /* Light pink */ background-color: #571818; /* Dark red */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-speedy { border: 2px solid #ffdbdb; /* Light pink */ background-color: #571818; /* Dark red */ } } .ombox-delete { border: 2px solid #b32424; /* Red */ } html.skin-theme-clientpref-night .ombox-delete { border: 2px solid #ff6961; /* Pink */ background-color: #571818; /* Dark red */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-delete { border: 2px solid #ff6961; /* Pink */ background-color: #571818; /* Dark red */ } } .ombox-content { border: 1px solid #f28500; /* Orange */ } html.skin-theme-clientpref-night .ombox-content { border: 1px solid #ffe7ce; /* Off-white */ background-color: #955200; /* Dark orange */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-content { border: 1px solid #ffe7ce; /* Off-white */ background-color: #955200; /* Dark orange */ } } .ombox-style { border: 1px solid #fc3; /* Yellow */ } html.skin-theme-clientpref-night .ombox-style { border: 1px solid #fff9db; /* Off-white */ background-color: #9d7900; /* Dark yellow */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-style { border: 1px solid #fff9db; /* Off-white */ background-color: #9d7900; /* Dark yellow */ } } .ombox-move { border: 1px solid #9932cc; /* Purple */ } html.skin-theme-clientpref-night .ombox-move { border: 1px solid #c9b3ff; /* Light purple */ background-color: #2d0055; /* Dark purple */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-move { border: 1px solid #c9b3ff; /* Light purple */ background-color: #2d0055; /* Dark purple */ } } .ombox-protection { border: 2px solid #a2a9b1; /* Blue-gray */ } html.skin-theme-clientpref-night .ombox-protection { border: 1px solid #fff; /* White */ background-color: #3b3d40; /* Blueish-dark gray */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-night .ombox-protection { border: 1px solid #fff; /* White */ background-color: #3b3d40; /* Blueish-dark gray */ } }

Andumé (talk) 17:37, 11 May 2024 (UTC)

 Not done: These diffs introduce duplicate styles and more color styles than are necessary to deal with the issue of dark mode. Thanks for throwing something up though, I will take a look. Izno (talk) 04:06, 21 May 2024 (UTC)

@I Am Andumé For the first, you copy-pasted the full .ombox definition in the context of the color CSS, which is surely not intended. For the second, you typoed the prefers-color-scheme dark selector (it should be -os, not -night), made multiple separate blocks for the prefers-color scheme (perhaps to show that you were consistent between -dark and -os settings, IDK), and more concerningly you strayed to changing the background rather than changing just the border. We should do something which matches the earlier rules in what is being set, which for most of these cases is just the border. Izno (talk) 04:22, 21 May 2024 (UTC)

Actually taking a look what happens when the background is dark, I don't think we need to change the border colors at all and can leave those the same as the base colors. That simplifies maintenance tremendously. We need to pick a good dark color for the typical background, as well as the speedy color. Izno (talk) 04:37, 21 May 2024 (UTC)

I put those in the official sandbox and loaded that so now you can see them on Template:Ombox/testcases#name=_text=text. Izno (talk) 04:55, 21 May 2024 (UTC)

@Izno:

Thanks for taking a look at my request. Here are a few things I'd like to mention:

1. The reason I copy-pasted the full .ombox definition, instead of just the styling that needed to be different in night mode was because I was afraid the other CSS would not be applied to the night mode version of the template if I omitted it.
2. That was a typo, yes.
3. I made separate block for the prefers-color-scheme as I was not yet aware it was possible to combine it all into one.
4. Changing the background color was necessary as otherwise it would have been very bright (as you seem to have noticed). Also, without either defining color or changing background color, the text would not have been readable.

Anyways, I wrote this CSS quite a while ago, so I was very inexperienced at the time, which explains a lot of the mistakes I made. Andumé (talk) 05:07, 21 May 2024 (UTC)

No worries. Yes, it was necessary to change the background, but only for the broad .ombox and for the more narrow .ombox-speedy. You included background colors elsewhere. Which can reasonably be explained by your inexperience with CSS as you explained. Izno (talk) 05:16, 21 May 2024 (UTC)

@Izno: iirc, the addition of the other background colors was also because I first worked on the cmbox CSS, and then reused much of the styling for ombox. Andumé (talk) 05:36, 21 May 2024 (UTC)

That would explain the blue! Izno (talk) 05:54, 21 May 2024 (UTC)

Protected edit request on 14 June 2024

Please add:

/** T367463 */
body.skin--responsive table.ombox img {
	max-width: none !important;
}

to Module:Message box/ombox.css as a workaround for phab:T367463, similar to {{tmbox}}'s Special:Diff/1228936760. I've applied the change to the sandbox (Special:Diff/1228972046/1229011205), but looking at testcases won't be helpful, because the sandbox template styles affect both live and sandbox versions of the template. Instead, compare Template:Wikibreak/testcases (uses live template styles as of Special:Diff/1229011841) and Template:Sockpuppet/testcases (uses sandbox styles as of Special:Diff/1229011265). See also Wikipedia:Village pump (technical)#Ombox images sometimes not showing. —⁠andrybak (talk) 10:41, 14 June 2024 (UTC)

Ping for awareness: User:Jon (WMF). —⁠andrybak (talk) 13:08, 14 June 2024 (UTC)

 Done — Preceding unsigned comment added by Jon (WMF) (talk • contribs) 15:59, 14 June 2024 (UTC)

Protected edit request on 25 June 2024

Change fmbox-warning background-color to #300 in night mode for consistency with other mboxes.

Diff:

−

html.skin-theme-clientpref-night .fmbox-warning { background-color: #683131; /* Reddish, same hue/saturation as light */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-os .fmbox-warning { background-color: #683131; /* Reddish, same hue/saturation as light */ } }

+

html.skin-theme-clientpref-night .fmbox-warning { background-color: #300; /* Reddish, same hue/saturation as light */ } @media (prefers-color-scheme: dark) { html.skin-theme-clientpref-os .fmbox-warning { background-color: #300; /* Reddish, same hue/saturation as light */ } }

Andumé (talk) 04:52, 25 June 2024 (UTC)

No opinion on the change request, but presumably if you want to change the bg color, then you'd want to change the comment to match? Mathglot (talk) 18:09, 25 June 2024 (UTC)

That would probably be a good idea, although those comments are often inaccurate anyway, especially on Module:Message box/cmbox.css. Andumé (talk) 21:30, 25 June 2024 (UTC)