Fix dark mode timeline colors

[t-fritsch]

This PR fixes the dark mode's timeline colors as mentioned in #611 : too small events are displayed in black, giving the impression that no events at all occurred at that time. In the screenshot below, look at the right of the timeline :

before : lots of apparently empty time slots :

after : the events now appear correctly :

The problem was that too short events weren't appearing because rendered too small (0~1px width) and since the border-color was forced to dark grey by the dark.css file, the colors of the category that is applied to each event doesn't show. That grey border makes those events like "hidden".

The fix is to prevent the border override to apply to the events.
The css code of the fix is not the most beautiful, but the underlying problem is a quite old css rule (4 years old) that is too generic (#visualization * targets almost everything, this is bad) and that uses the !important keyword (this is very bad too ! 😄😅) :

https://github.com/ActivityWatch/aw-webui/blame/f38b119f0ad628dd8af6ddfaaaf89700b9290c06/static/dark.css#L173-L177

A nicer solution would be to remove this rule and rework dark mode styling from the ground up but this quick fix should be sufficient for now I hope 🙏

---

Important

Fixes dark mode timeline border color by modifying CSS selector in dark.css.

• CSS Fix:
  • In dark.css, modifies #visualization * selector to exclude elements with inline border or border-color styles, preventing unwanted border color application.
  • This change addresses the timeline border color issue in dark mode as reported in issue Dark mode overrides border color in timeline  #611.

^{This description was created by for cd045c8. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to cd045c8 in 35 seconds. Click for details.

• Reviewed 20 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 1 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. static/dark.css:173

• Draft comment:
  Using attribute selectors like :not([style*="border:"]):not([style*="border-color:"]) to filter out inline styles is a hacky quick fix. Please add a comment explaining the rationale and potential pitfalls (e.g., possible performance impact and that it might exclude elements unintentionally) so future maintainers understand this workaround.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_0rORtY7Tjmy2xvND

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[t-fritsch]

In case anyone wonders, I've been using the fix since approx. 10 days and seen no regression so far.