Coloured Email Labels

[Denyerec]

Came here to suggest exactly this.

A frustration is that the classes assigned to the row elements are not at the row level, such as it is, we're not able to apply our own styles to labelled mails to solve the problem in the short term.

EG:

<div class="mail_entry unread" data-id="32409"><label><span class="mail-status-indicator read-status"><svg ... />
            <circle strokewidth="2" cx="8" cy="8" r="3"></circle>
            </svg>
        </span></label><label class="subject" style="width: var(--subjectWidth); margin-left: 0px;"><span>Yesterday's
            Forum Activity (from UKworkshop.co.uk)</span></label><label
        class="from"><span>UKworkshop.co.uk</span></label><label class="labels">
        <div class="adjustment-mail-labels">
            <div>
                <div class="MailLabels-Observer">
                    <ul class="MailLabels-Container" style="padding-left: unset;">
                        <li title="Important" class="MailLabels-Label MailLabels-Tooltip">+1</li>
                    </ul>
                </div>
            </div>
        </div>
    </label><label class="mail-status-indicator"></label><label class="maildate"><span>05:19</span></label></div>

The key bit being:

<li title="Important" class="MailLabels-Label MailLabels-Tooltip">+1</li>

Obviously at this point in the chrome generation, we know we've got labels and we know what they are. Now if that could just be applied to the container like so... :

<div class="mail_entry unread MailLabels-Important MailLabels-ToDo" data-id="32409"> ...

We could do whatever we want with the emails.
This issue of burying status classes at the bottom of the element heirarchy rather than the top crops up all over the place, and it's frustrated the hell out of me. Wouldn't be a problem if Chromium supported :has() pseudoselector, but as of yet it does not.

[thetrigger]

I just found a way https://github.com/thetrigger/Vivaldi-colored-labels

we can use :has selector supported by chromium to get the whole row

[jumpsq]

Thank you

[floresarts]

@wanageeska As a graphic designer and very visual learner, I applaud your use of color as a wayfinding technique but mostly because I just happen to organize my in-box the same way. Sadly, I deleted the default labels too quickly, thinking I could edit the names while the colors would remain. Sad face.

[shifte]

Hmm, that should do.

#mail_view div.tree-item:has(li[title='Important']) { color:red; }
#mail_view div.tree-item:has(li[title='Work']) { color:orange; }
#mail_view div.tree-item:has(li[title='Personal']) { color:green; }
#mail_view div.tree-item:has(li[title='To Do']) { color:blue; }
#mail_view div.tree-item:has(li[title='Later']) { color:violet; }

[VAIO73]

@shifte how it works?as I set it up???

[shifte]

@VAIO73
https://forum.vivaldi.net/topic/10549/modding-vivaldi
Open vivaldi://experiments
Enable "Allow for using CSS modifications"
Open Appearance section in settings
Choose the folder you want to use
Place your CSS files inside it
Restart Vivaldi to see them in effect

[VAIO73]

@shifte

I have enabled and add custom.css on directory, and not works

SORRY..., WORKS ony English version, but when I switch vivaldi to another language it doesn't work that way...

[Zalex108]

@shifte said in Coloured Email Labels:

Open Appearance section in settings
Choose the folder you want to use
Place your CSS files inside it
Restart Vivaldi to see them in effect

@VAIO73

[VAIO73]

@Zalex108 works only English version vivaldi, but when I switch vivaldi to another language it doesn't work that way...

[VAIO73]

@Zalex108 colored label works only in English language mutation, when I switch it to another language, you are all in black and white

[Zalex108]

@VAIO73

Finding the Language Name for that Labels and Duplicating the code for those and replacing the names should work.

Keeping English also in case of future Language toggle.

[Zalex108]

@VAIO73

https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools/

[VAIO73]

@Zalex108 Great, works, but only line, not label...

[shifte]

@VAIO73

Great, works, but only line, not label...

You're right!
Labels color doesn't change in Slovak UI.
Probably it's a Vivaldi bug.

↓ Slovak version

#mail_view div.tree-item:has(li[title='Dôležité']) { color:red; }
#mail_view div.tree-item:has(li[title='Práca']) { color:orange; }
#mail_view div.tree-item:has(li[title='Osobné']) { color:green; }
#mail_view div.tree-item:has(li[title='Urobiť']) { color:blue; }
#mail_view div.tree-item:has(li[title='Na neskôr']) { color:violet; }

.MailLabels-Label[title='Dôležité'] { background-color:red; }
.MailLabels-Label[title='Práca'] { background-color:orange; }
.MailLabels-Label[title='Osobné'] { background-color:green; }
.MailLabels-Label[title='Urobiť'] { background-color:blue; }
.MailLabels-Label[title='Na neskôr'] { background-color:violet; }

.mail_entry.mail_entry.unread .from,
.mail_entry.mail_entry.unseen .from,
.mail_entry.mail_entry.unread .subject,
.mail_entry.mail_entry.unseen .subject {
font-weight: 700;
}

[VAIO73]

@shifte YOU ARE THE BEST....!!! THANK YOU...

[shifte]

(VB-94848) Labels color does not change In non-English UI.

[VAIO73]

@shifte , Yes, it's probably vivaldi's bug

[gmg]

@shifte
You're right. I'll take a look Monday

[shifte]

@gmg
Thanks!
Have a nice weekend!