How to select past events in Thunderbird Calendar with CSS?

[mfessler 0]

Is this the right place to get help with CSS customization?

I'm trying to customize the Thunderbird calendar view for better usability. Specifically, I want to style past events and/or future events differently.

However, I can’t find any CSS class or attribute in the DOM that identifies whether a .calendar-color-box represents an event in the past or the future. Inspecting the elements doesn’t show anything like .past, .future, or a data-* attribute that would allow targeting them.

Before I go down the wrong path:
Is there any built‑in class, attribute, or selector that Thunderbird applies to past or upcoming events?
Or does this need to be handled with an add‑on rather than pure CSS?


For reference, here’s the CSS I have so far:

CSS:

/* Make read mail sender normal (not bold) */
tr[is="thread-card"]:not([data-properties~="unread"]) .card-container .sender {
  font-weight: normal !important;
}

/* Make calendar event a bit round. */
.calendar-color-box {
  border-radius: 6px !important;
}

/* FIXME Make past event faded .[data-is-past="true"] */
.calendar-color-box.past {
  opacity: 0.8;
}

Thanks for any guidance! I feel like I’m missing something obvious.