Calendar Color Backgrounds Faded

[janrif]

@Pathduck I hear you; I understand. I've created some sample snippets to illustrate

Here's aa snippet from my Email View

Here's a snippet from my Vivaldi Calendar View

On the selected day, the cell header is ok but the item the cell is a non starter.

Here's a snippet from my Google Calendar view

The code I am using follows

.cal-event-header { color: var(--colorCalendarFg); background: var(--colorCalendarBg); }

I realize that Google is white bkground & Vivaldi calendar is not so here's Vivaldi with white background that I created for illustration purposes

If I scroll down, each item displays the color properly: Blue, Green, Red. Otherwise the colors are muted.

[Pathduck]

@janrif I don't know why you keep dragging Email Labels into this. These things are not related.

Here's a snippet from my Vivaldi Calendar View

Those are events from the 9th? Past events are faded, I would've thought that was obvious?

Just like they are in Google Calendar.
Your example from Gcal is 1/6 - these are not past events.

The code I am using follows
.cal-event-header { color: var(--colorCalendarFg); background: var(--colorCalendarBg); }

If that's the code you're using it's not working. If it's working it should look like:

I also realize now your CAROL->WORK events are actually all-day events which display differently than timed events, they have a full background, while timed have a dot - just like in Google Cal.

[janrif]

@Pathduck said in Calendar Color Backgrounds Faded:

If that's the code you're using it's not working. If it's working it should look like:

You make my point. Anyway, thank you. for your help.

[Pathduck]

@janrif If it's not working you should have a look at what CSS files you have added to the CSS Modifications folder.

Have you actually added the code you refer to in one of the CSS files there?

Please list the files in your CSS modifications folder and what they contain.
Make a screenshot of the file listing.

[janrif]

@Pathduck said in Calendar Color Backgrounds Faded:

If that's the code you're using it's not working. If it's working it should look like:

@Pathduck I am using:
.cal-event-header { color: var(--colorCalendarFg); background: var(--colorCalendarBg); }

[barbudo2005]

@janrif

Be careful, you seem "too" enthusiastic.

Playing with CSS code is addictive and there is no treatment that can reverse it.

[Pathduck]

@janrif said in Calendar Color Backgrounds Faded:

.cal-event-header { color: var(--colorCalendarFg); background: var(--colorCalendarBg); }

You keep saying that - but it's clearly not working for you, and there's nothing wrong with the code.

How about this:

/* Solid background colour for timed events and a radius */
.cal-event-header { 
    color: var(--colorCalendarFg);
    background: var(--colorCalendarBg);
    border-radius: var(--radius);
}

/* Solid background colour for all-day events */
.calendar-event.solid, .calendar-event.all-day {
    background-color: var(--colorCalendarBg);
}

Having taken another look at it, I realized the all-day events were dimmed because they used the alpha-transparency version of the CalendarBg colour variable.

The above CSS sets the background to the regular background for all-day events, as well as adds a radius that follows your theme corner rounding setting.

[janrif]

@Pathduck said in Calendar Color Backgrounds Faded:

How about this:

@Pathduck This works like a charm. Now I have a colorful & easy to see calendar. Thank you very, very much!

I found another mystery (to me) css file but I will start another thread.

[janrif]

@Pathduck said in Calendar Color Backgrounds Faded:

@janrif said in Calendar Color Backgrounds Faded:

.cal-event-header { color: var(--colorCalendarFg); background: var(--colorCalendarBg); }

You keep saying that - but it's clearly not working for you, and there's nothing wrong with the code.

How about this:

/* Solid background colour for timed events and a radius */
.cal-event-header { 
    color: var(--colorCalendarFg);
    background: var(--colorCalendarBg);
    border-radius: var(--radius);
}

/* Solid background colour for all-day events */
.calendar-event.solid, .calendar-event.all-day {
    background-color: var(--colorCalendarBg);
}

Having taken another look at it, I realized the all-day events were dimmed because they used the alpha-transparency version of the CalendarBg colour variable.

The above CSS sets the background to the regular background for all-day events, as well as adds a radius that follows your theme corner rounding setting.

@Pathduck It appears to me that the above CSS code works beautifully for all day events but not so for timed events, i.e. ex: 10:30am appt appears with colored circle to identify particular calendar but the event, itself, remains white / calendar background.

Am I missing something? TIA

[Pathduck]

@janrif Look, I don't even use the Vivaldi Calendar so there's limits to how much I'm going to go digging around there. I suggest you learn yourself the basics of CSS and inspecting the UI and figure this out on your own.

It's been four months, and for all I know they changed the code in the meantime.

EDIT: Just did a quick test with the same code, still works fine. So I don't know what you're doing wrong, it's not the code.

[janrif]

@Pathduck said in Calendar Color Backgrounds Faded:

@janrif Look, I don't even use the Vivaldi Calendar so there's limits to how much I'm going to go digging around there. I suggest you learn yourself the basics of CSS and inspecting the UI and figure this out on your own.

It's been four months, and for all I know they changed the code in the meantime.

EDIT: Just did a quick test with the same code, still works fine. So I don't know what you're doing wrong, it's not the code.

@Pathduck You never disappoint. Sorry I asked you. Have a restful day.

[janrif]

@Pathduck said in Calendar Color Backgrounds Faded:

EDIT: Just did a quick test with the same code, still works fine. So I don't know what you're doing wrong, it's not the code.

@Pathduck Just as an aside, you are wrong. The background for timed events only works if the event has focus.

[Pathduck]

@janrif Have you considered that simply your CSS mod folder is no longer correctly set up and that the code is doing nothing on your system?