Help With CSS Alpha Override

💬General
#1

The CSS below makes most of my tags less visible, and my #urgent tags have a pink background, except for when I use search. Search wants to highlight matched values with a yellow background. Most of the time my special tags show up with a pink background, but when they match a search, the pink I assign blends with the yellow assigned by search-match to give me orange.

How can I override the yellow of search-match, so that my #urgent tags are always pink?

.node-tag[title^="Filter #"] { 
  color: #C8C8C8;
  background-color: white !important;
}
.node-tag[title^="Filter #urgent"] { 
  color: black;
  background-color: rgba(223, 32, 32, 0.2) !important;
border: solid 1px #ef8f8f;
  border-radius: 4px;
}
#2

Try this - it makes the yellow fully transparent -

.search-match {
  background: rgba(255, 255, 0, 0);
}

How I found it -

Screen Recording 2021-04-25 at 10.30.34 AM 1

#3

Thank you. That has the side effect of turning off all search highlighting. I’d like to leave other search highlighting un-touched.

I want to leave other search highlighting in place. I just want #urgent tag to resemble the overdue date. Is that possible?

#5

I don’t have any way to test, but you can combine selectors so maybe try

.search-match.node-tag[title^="Filter #urgent"] { 
  color: black;
  background-color: rgba(223, 32, 32, 0.2) !important;
  border: solid 1px #ef8f8f;
  border-radius: 4px;
}
#6

Thank you. I too think that should work. The

.search-match.node-tag[title^="Filter #urgent"]

isn’t matching. I deleted all my other CSS (for testing), I applied your suggested CSS, I opened Chrome dev tools, and ‘.search-match.node-tag’ doesn’t show up in the styles for that element. (".search-match" does show up in the styles in the debugger, as does .node-tag.)

Just for the experiment, I tried matching on .node-tag.search-match and .search-match.node-tag without the title-match, but that doesn’t show up in the list of styles in the debugger either. :frowning:

#8

You could add a space to select search matches that are children of the tag

.node-tag[title^="Filter #urgent"] .search-match {
  color: black;
  background-color: rgba(223, 32, 32, 0.2) !important;
  border: solid 1px #ef8f8f;
  border-radius: 4px;
}
#9

Aha! Very good! The following is enough to make all of my #urgent, including search results, match my overdue date.

Thank you for your help!

.node-tag[title^="Filter #urgent"] .search-match {
  color: black;
  background-color: rgba(223, 32, 32, 0.2) !important;
  border: solid 1px #ef8f8f;
  border-radius: 4px;
}
.node-tag[title^="Filter #urgent"] { 
  color: black;
  background-color: rgba(223, 32, 32, 0.2) !important;
border: solid 1px #ef8f8f;
  border-radius: 4px;
}
1 Like