Fixed: Dark mode failing on "Astrolabe" homepage.

[MohitMaliFtechiz]

Fixes #3965

• Removed the unnecessary rule that was inverting the header image. Since the image was already inverted, there is no need to apply the filter again.
• The poster image was being inverted due to the first rule being applied to the poster element, which caused the image and video inside the poster to be inverted. To correct this, a CSS rule is added to prevent the inversion of the poster's image and video.

https://github.com/user-attachments/assets/23be058d-f6d0-472d-874b-540d7ac277af

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 53.71%. Comparing base (78e6349) to head (68137fb). Report is 2 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #3974 +/- ## ============================================ - Coverage 53.80% 53.71% -0.09% + Complexity 1487 1484 -3 ============================================ Files 309 309 Lines 12271 12271 Branches 1617 1617 ============================================ - Hits 6602 6591 -11 - Misses 4618 4627 +9 - Partials 1051 1053 +2 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[kelson42]

@MohitMaliFtechiz You should not develop content specific rules here. The .vjs-poster rule in not acceptable.

In general images should not be inverted, this is base on tag name, so you shoukd do the same for posters.

[MohitMaliFtechiz]

@kelson42 Thanks for your suggestion, I have removed the content-specific rules from the code and refactored the CSS according to your suggestion.

[kelson42]

@MohitMaliDeveloper Why these rules are so specific!!! We just don't want to invert img and poster! div have nothing to do with it!

[MohitMaliFtechiz]

@MohitMaliDeveloper Why these rules are so specific!!! We just don't want to invert images and posters! div have nothing to do with it!

@kelson42 These rules are for preventing the inversion of images, videos, and posters that are already inverted by the DarkModeViewPainter see this and this. So the whole webView is already inverted in night mode, and now we have to revert the inversion of image, video, and posters. In the below CSS, the first rule is reverting the inversion from image, video, and poster.

private val INVERT_IMAGES_VIDEO =
      """
        img, video, div[poster] { 
           -webkit-filter: invert(1); 
           filter: invert(1); 
        }
        div[poster] img, div[poster] video {
          -webkit-filter: invert(0); 
          filter: invert(0); 
        }
      """.trimIndent()

Since the poster is used in a div tag so we are inverting the like this in the first rule, if we do not revert the inversion of this div[poster] then the video controls are showing like they are showing in the light mode, and a white border on the top and bottom of the video is visible.

Without inversion of div[poster]	Without inversion of div[poster]

And because of the first CSS rule, the internal image and video are also inverted so to revert back the inversion on that image and video we have added the second CSS rule.

Please let me know if still anything is unclear.