- An update a month ago made the bottom border of <h3 id="p-lang-label"> can not include the gear icon. .portal h3 {overflow: visible;} may fix this.
- CSS keyword transparent can still not be well calculated in Safari, leading to linear-gradient(to right, transparent 0, #c8ccd1 35%, #c8ccd1 70%, transparent 100%) looks weird (see below). Replacing transparent by rgb(200, 204, 209, 0) can fix it.
- The background color of body is pure gray without a slight blue tint (#f6f6f6). Does this conflict with Wikimedia Design Style Guide?
Description
Description
Details
Details
Related Objects
Related Objects
- Mentioned Here
- T153043: Align Vector skin with WikimediaUI color palette
Event Timeline
Comment Actions
One can see the uneven border line like a wave form of contrast
- overflow: visible would risk the label in languages with more characters to reach into the settings icon. Having the border not take up all the width seems acceptable
- Do you have a screenshot
Safari currently shows
One can see the uneven border line like a wave form of contrast
Comment Actions
Change 603613 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Fix portal heading border in Safari
Comment Actions
- An update a month ago made the bottom border of <h3 id="p-lang-label"> can not include the gear icon.
Caused by patch 589433 and the UniversalLanguageSelector's gear icon element being added above the h3, not in it (code).
Initial testing shows moving the icon inside h3#p-lang-label and removing the top margin (code) solves this.
This also fixes the same issue in Modern. Monobook is unaffected. Timeless and Minerva lacks this gear icon.
Any concerns?
Comment Actions
Change 603665 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/extensions/UniversalLanguageSelector@master] Move the settings icon into the portal heading
Comment Actions
@Demian Thanks for the comparison, as shared on the patch: This might result in unwanted accessibility side-effect, having read out the button title additionally to the heading level 3. Although I thought it might be an interesting approach in my first reaction, I don't think it's reasonable to move the button into the heading for this small visual glitch.
I know that @santhosh has been fiddling around quite a bit to come to the current result. One idea that I'd be curious why it wasn't considered in the end would be absolute positioning and padding of the h3?
Comment Actions
Yes. I'll test it with screen-reader. If that happens, I'll try aria-hidden as B plan, I wonder how that would behave when focused.
I know that @santhosh has been fiddling around quite a bit to come to the current result. One idea that I'd be curious why it wasn't considered in the end would be absolute positioning and padding of the h3?
Why not absolute position the gear icon? That's my C plan.
Comment Actions
aria-hidden would exclude screen readers completely from exposing the button, don't think that's what you want…
Comment Actions
Change 603613 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Fix portal heading border in Safari
Comment Actions
Removing Vector (legacy skin) and Desktop Improvements (Vector 2022) from task leaving to UniversalLanguageSelector team to decide on last part.
Comment Actions
Change 603665 abandoned by Aron Manning:
Move the settings icon into the portal heading
Reason:
In favor of https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UniversalLanguageSelector/ /597401