Closed saya-rbt closed 3 years ago
Thank you for your contribution and hello ;)
I don't know what caused it, but a lot of the elements on the Current Events page recently all turned to white background and borders.
I would say that what happened is the css rules that were in place no longer work for these areas and they need to be updated.
This is a small, kind-of-lazy fix (as in, "I think there are better ways to do what I did, but I didn't want to spend too much time on it nor do I know CSS enough"
It seems you know enough to make the contrib, the only observation I have is in reusing existing rules Most of what you did just makes things gray that arent gray, the proper-way would be to use the existing rules we have for these areas.
It would be preferable not to add new rules and reuse existing and where possible.
Would you like to try again?
@AfroThundr3007730 for review
It would be preferable not to add new rules and reuse existing and where possible.
I tried, but there is not any rule for the current events for now. There are no rules for any class named *current-events*
, so I thought I could create new ones.
I looked for .mw-parser-output
results in the file, but they are more about very specific tags, as well as being for other wikipedia.org URLs (the localized subdomains like es, de, etc.).
These subdomains even have specific classes and IDs like #hauptseite
or .rahmenfarbe
for de.wikipedia.org
, hence why I thought the new rules that I created would be relevant.
However, I can also:
@-moz-document domain("en.wikipedia.org")
since the Current Events page is for the English Wikipedia website, and putting my rules there. I don't know how relevant it would be, though.Please let me know what you think!
for instance... you add overrides for;
.mw-parser-output .current-events-heading
That rule has the default properties like so.
background-color: #cef2e0;
font-weight: bold;
Searching for this #cef2e0
color I can see, we have a rules that overrides this color and property matches, so as long as were are replacing a like for like color and property match in this case background/background-color property
this existing rule for instance looks pretty good.for .mw-parser-output .current-events-heading
- div[style*="background-color:#cef2e0"], th[style*="background: #CFC;"] {
+ div[style*="background-color:#cef2e0"], th[style*="background: #CFC;"] ,
+ .mw-parser-output .current-events-heading {
background: var(--green-2) !important;
}
So if you follow this logic for other entries, you will already use both the correct colors and not create new rules.
At the end the page will look like it was intended originally when we did it.
TL;DR So the trick is search for the colors in existing rules that override that property and match the color you searched
There are occasions where you cant help but create a new rule, but its best avoided , else maintenance which is already heavy will not be made any better, and its currently insane =)
Any questions let me know.
Ah, I see! Thanks a lot for the clarification, I'll get right to it when I get some time in the next few days :blush:
Ah, I see! Thanks a lot for the clarification, I'll get right to it when I get some time in the next few days blush
No problem, looking forward till then ;)
I pushed a new commit making all the changes you mentioned. There's only one I had to create a new rule but I genuinely didn't find another way to put it, sorry.
Please let me know what you think :blush:
Please let me know what you think blush
Its much better though all tables that were green/blue are now blue and gray
the part at bottom still bright,
But yea its not bright anymore... @AfroThundr3007730 take it away =)
I fixed the bottom part, I didn't notice it at first. Thanks for the heads-up!
Everything gray again... =( at least its not white....
Hello,
I don't know what caused it, but a lot of the elements on the Current Events page recently all turned to white background and borders.
This is a small, kind-of-lazy fix (as in, "I think there are better ways to do what I did, but I didn't want to spend too much time on it nor do I know CSS enough". Not lazy as in "I can't be bothered to even read the contributing guidelines and respect them" because I did) that hopefully addresses it properly.
Feel free to make any feedback (as this is my first time contributing to a CSS project) and I hope it helps :blush: