Color coding workspace list items

fieldsnyc

Hi - it would be very nice if it was possible to color code the items in the workspace drop-down (the entire row). Currently it's possible to assign colored emoji to each item, but they are very small and not easy to visually distinguish. Thanks!

barbudo2005

@fieldsnyc

Look this post:

https://forum.vivaldi.net/topic/85585/tab-color-per-workspace/3

fieldsnyc

@barbudo2005 I tried this and it didn't work for me. Is there something I need to do besides enable it in settings and drop a css file in the directory I selected?

barbudo2005

@fieldsnyc

The team change the title of the workspace:

button class="workspace-item-wrapper draggable" title="SERIES, IMDB & YT 4 hibernated tabs"

They add the number of the tabs in the title, so you have to add an "*" after the word "title" in the code:

button.workspace-item-wrapper.draggable[title*="VARIOS"] .avatar.picker  svg

{filter: brightness(50%) sepia(100) saturate(60) hue-rotate(200deg) !important;}

button.workspace-item-wrapper.draggable[title*="VARIOS"]  .title p

{color: #0a57a7 !important;}



button.workspace-item-wrapper.draggable[title*="HISTORICA"] .avatar.picker  svg

{filter: brightness(50%) sepia(100) saturate(60) hue-rotate(100deg) !important;}

button.workspace-item-wrapper.draggable[title*="HISTORICA"] .title p

{color: #008b00 !important;}


button.workspace-item-wrapper.draggable[title*="SERIES, IMDB & YT"] .avatar.picker  svg

{filter: brightness(50%) sepia(100) saturate(60) hue-rotate(360deg) !important;}

button.workspace-item-wrapper.draggable[title*="SERIES, IMDB & YT"]  .title p

{color: #e72f04 !important;}

PS:

title*= "YT" means that the title contains the text "YT".

fieldsnyc

@barbudo2005 Awesome, that worked. Thanks!

Is there any way to refresh this on changes to this file other than by restarting the browser?

barbudo2005

@fieldsnyc

No.