Mobile / small screen left menu is purple, not blue

[Amousey]

Setup

• occurs on Pivot demo website
• when on screen size width 600px or less
• MediaWiki version: 1.30, 1.31, possibly all
• Pivot version: 2.1, 2.2, possibly all

Issue

Purples are used for the left side bar on small screens including cell phones, and small tablets. Does not match desktops or other colors in theme (dark slate blue etc). Shade #8c489f is particularly bright and unpleasant.

Left menu that is always visible on desktops is blue.

Problem code appears to be in pivot.css ul.off-canvas-list li label { background: #c3c3e5; border: none; color: #222; } ul.off-canvas-list li a { border: none; background: transparent; color: #8c489f; } ul.off-canvas-list li a:hover { background: #eeffee; } .right-off-canvas-menu, .left-off-canvas-menu { background: #f1f0ff; }

Potential improvement

A branch with a grayscale sidebar would be very welcome, or separate CSS in which to set all colors in the theme.

[designnerd]

You can override colors by creating the page MediaWiki:Pivot.css, then using your browser's web inspector to find the css style names to target, by adding something like:

ul.off-canvas-list li label {
    background: #c3c3c3;
}
.right-off-canvas-menu, .left-off-canvas-menu {
    background: #f9f9f9;
}
ul.off-canvas-list li a {
    color: #2f2f2f;
}

(Or whatever colors you prefer, the purples aren't overbright on my device screens, so not sure why they are on yours. Easy to override for anyone that wants to override it.)