Roam - color opacity by @CatoMinor3

Roam-color_opacity.css

/*
Author:: @CatoMinor3
Version:: 1
Date:: September 22nd, 2020
Changes log

Support: 
- Paypal: https://www.paypal.me/catominor3
- Patreon: https://www.patreon.com/catominor

What is this? 
A little custom CSS that allow you to define opacity for my C:COLOR custom css tags.

How to use this?
1) Download the latest version of Roam-colored_fonts.css - https://gist.github.com/ciceronianus/97d493cdc8d770e37ee0d085fc36ed3d
2) Simply add number after the #c:COLOR tag in this format #c:COLOR-NUMBER  (see supported colors below) and follow it with 
the highlighted text, bold text or emphasis. 
3) Supported are numbers from 1-10.


*/

/* ---------------- Roam colors -----------------*/

[data-tag$="-1"] + .roam-highlight,
[data-tag$="-1"] + .rm-page-ref-link-color,
[data-tag$="-1"] + em,
[data-tag$="-1"] + strong
{
 filter: opacity(10%);
  
}

[data-tag$="-2"] + .roam-highlight,
[data-tag$="-2"] + .rm-page-ref-link-color,
[data-tag$="-2"] + em,
[data-tag$="-2"] + strong
{
 filter: opacity(20%);
  
}


[data-tag$="-3"] + .roam-highlight,
[data-tag$="-3"] + .roam-highlight,
[data-tag$="-3"] + .rm-page-ref-link-color,
[data-tag$="-3"] + em,
[data-tag$="-3"] + strong
{

  filter: opacity(30%);
  
}


[data-tag$="-4"] + .roam-highlight,
[data-tag$="-4"] + .roam-highlight,
[data-tag$="-4"] + .rm-page-ref-link-color,
[data-tag$="-4"] + em,
[data-tag$="-4"] + strong
{
 filter: opacity(40%);
  
}

[data-tag$="-5"] + .roam-highlight,
[data-tag$="-5"] + .roam-highlight,
[data-tag$="-5"] + .rm-page-ref-link-color,
[data-tag$="-5"] + em,
[data-tag$="-5"] + strong
{
 filter: opacity(50%);
  
}

[data-tag$="-6"] + .roam-highlight,
[data-tag$="-6"] + .roam-highlight,
[data-tag$="-6"] + .rm-page-ref-link-color,
[data-tag$="-6"] + em,
[data-tag$="-6"] + strong
{
 filter: opacity(60%);
  
}

[data-tag$="-7"] + .roam-highlight,
[data-tag$="-7"] + .roam-highlight,
[data-tag$="-7"] + .rm-page-ref-link-color,
[data-tag$="-7"] + em,
[data-tag$="-7"] + strong
{
 filter: opacity(70%);
  
}

[data-tag$="-8"] + .roam-highlight,
[data-tag$="-8"] + .roam-highlight,
[data-tag$="-8"] + .rm-page-ref-link-color,
[data-tag$="-8"] + em,
[data-tag$="-8"] + strong
{
 filter: opacity(80%);
  
}


[data-tag$="-9"] + .roam-highlight,
[data-tag$="-9"] + .roam-highlight,
[data-tag$="-9"] + .rm-page-ref-link-color,
[data-tag$="-9"] + em,
[data-tag$="-9"] + strong
{
 filter: opacity(70%);
  
}

[data-tag$="-10"] + .roam-highlight,
[data-tag$="-10"] + .roam-highlight,
[data-tag$="-10"] + .rm-page-ref-link-color,
[data-tag$="-10"] + em,
[data-tag$="-10"] + strong {
 filter: opacity(100%);
  
}