StylishThemes / Wikipedia-Dark

:mortar_board: Dark Wikipedia
https://github.com/StylishThemes/Wikipedia-Dark/raw/master/wikipedia-dark.user.css
Other
486 stars 31 forks source link

Small fixes to the Current Events page on en.wikipedia.org #191

Closed saya-rbt closed 3 years ago

saya-rbt commented 3 years ago

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:

the-j0k3r commented 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

saya-rbt commented 3 years ago

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:

  1. Factorize them, since some of them share properties, even though I will do it whether we create new rules or not
  2. Maybe create a @-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!

the-j0k3r commented 3 years ago

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.

saya-rbt commented 3 years ago

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:

the-j0k3r commented 3 years ago

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 ;)

saya-rbt commented 3 years ago

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:

the-j0k3r commented 3 years ago

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,

image

But yea its not bright anymore... @AfroThundr3007730 take it away =)

saya-rbt commented 3 years ago

I fixed the bottom part, I didn't notice it at first. Thanks for the heads-up!

the-j0k3r commented 3 years ago

Everything gray again... =( at least its not white....