(deprecated) Roam - colored bold, italics and highlight by @CatoMinor3

Roam-colored_fonts.css

/*
Author:: @CatoMinor3
Version:: 3.0
Date:: Sept.rm-italicsber 22nd, 2020
Changes log:
- 3.0 - code adapted for the new classes in Roam
- 2.1 - code adaptated for future support of colour shades (different opacity), 
download the additonal CSS here: https://gist.github.com/ciceronianus/5d7b224658b7a9832a6249a13091aa9d

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

How to use this? Simply write c:COLOR (see supported colors below) and follow it with 
the highlighted text, bold text or .rm-italicsphasis. 
*/

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

/*Supporter colors:
https://github.com/mrmrs/colors

.navy { color: #001F3F; }
.blue { color: #0074D9; }
.aqua { color: #7FDBFF; }
.teal { color: #39CCCC; }
.olive { color: #3D9970; }
.green { color: #2ECC40; }
.lime { color: #01FF70; }
.yellow { color: #FFDC00; }
.orange { color: #FF851B; }
.red { color: #FF4136; }
.fuchsia { color: #F012BE; }
.purple { color: #B10DC9; }
.maroon { color: #85144B; }
.silver { color: #DDDDDD; }
.gray { color: #AAAAAA; }
.black { color: #111111; }

*/
[data-tag^="c:"] {
    	display:none !important;  
}

[data-tag^="c:"] + .rm-highlight, 
[data-tag^="c:"] + span > .rm-page-ref--link {
    color: white !important;
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: bold;
}

[data-tag^="c:navy"] + .rm-highlight,
[data-tag^="c:navy"] + span > .rm-page-ref--link {
	background-color: #001F3F !important;
}

[data-tag^="c:navy"] + .rm-italics, 
[data-tag^="c:navy"] + .rm-bold 
{color: #001F3F; }

[data-tag^="c:blue"] + .rm-highlight,
[data-tag^="c:blue"] + span > .rm-page-ref--link {
	background-color: #0074D9 !important;
}


[data-tag^="c:blue"] + .rm-italics, 
[data-tag^="c:blue"] + .rm-bold {
    color: #0074D9;
    
}

[data-tag^="c:aqua"] + .rm-highlight,
[data-tag^="c:aqua"] + span > .rm-page-ref--link {
	background-color: #7FDBFF !important;
}

[data-tag^="c:aqua"] + .rm-italics, 
[data-tag^="c:aqua"] + .rm-bold {
    color: #7FDBFF;
    
}

[data-tag^="c:teal"] + .rm-highlight,
[data-tag^="c:teal"] + span > .rm-page-ref--link {
	background-color: #39CCCC !important;
}


[data-tag^="c:teal"] + .rm-italics,
[data-tag^="c:teal"] + .rm-bold {
    color: #39CCCC;
    
}


[data-tag^="c:olive"] + .rm-highlight,
[data-tag^="c:olive"] + span > .rm-page-ref--link {
	background-color: #3D9970 !important;
}

[data-tag^="c:olive"] + .rm-italics,
[data-tag^="c:olive"] + .rm-bold {
    color: #3D9970;
    
}

[data-tag^="c:green"] + .rm-highlight,
[data-tag^="c:green"] + span > .rm-page-ref--link {
	background-color: #2ECC40 !important;
}

[data-tag^="c:green"] + .rm-italics,
[data-tag^="c:green"] + .rm-bold {
    color: #2ECC40;
    
}


[data-tag^="c:lime"] + .rm-highlight,
[data-tag^="c:lime"] + span > .rm-page-ref--link {

	background-color: #01FF70 !important;

}

[data-tag^="c:lime"] + .rm-italics,
[data-tag^="c:lime"] + .rm-bold {
    color: #01FF70;
    
}

[data-tag^="c:yellow"] + .rm-highlight,
[data-tag^="c:yellow"] + span > .rm-page-ref--link {

	background-color: #FFDC00 !important;

}

[data-tag^="c:yellow"] + .rm-italics,
[data-tag^="c:yellow"] + .rm-bold {
    color: #FFDC00;
    
}

[data-tag^="c:orange"] + .rm-highlight,
[data-tag^="c:orange"] + span > .rm-page-ref--link {

	background-color: #FF851B !important;

}

[data-tag^="c:orange"] + .rm-italics,
[data-tag^="c:orange"] + .rm-bold {
    color: #FF851B;
    
}


[data-tag^="c:red"] + .rm-highlight,
[data-tag^="c:red"] + span > .rm-page-ref--link {

	background-color: #FF4136 !important;

}

[data-tag^="c:red"] + .rm-italics,
[data-tag^="c:red"] + .rm-bold
{
    color: #FF4136;
    
}

 







[data-tag^="c:fuchsia"] + .rm-highlight,
[data-tag^="c:fuchsia"] + span > .rm-page-ref--link {

	background-color: #F012BE !important;

}

[data-tag^="c:fuchsia"] + .rm-italics, 
[data-tag^="c:fuchsia"] + .rm-bold {
    color: #F012BE;
    
}

[data-tag^="c:purple"] + .rm-highlight,
[data-tag^="c:purple"] + span > .rm-page-ref--link {

	background-color: #B10DC9 !important;

}

[data-tag^="c:purple"] + .rm-italics,
[data-tag^="c:purple"] + .rm-bold {
    
    color: #B10DC9;
}

[data-tag^="c:maroon"] + .rm-highlight,
[data-tag^="c:maroon"] + span > .rm-page-ref--link {

	background-color: #85144B !important;

}

[data-tag^="c:maroon"] + .rm-italics,
[data-tag^="c:maroon"] + .rm-bold {
    color: #85144B;
    
}

[data-tag^="c:silver"] + .rm-highlight,
[data-tag^="c:silver"] + span > .rm-page-ref--link {

	background-color: #DDDDDD !important;

}

[data-tag^="c:silver"] + .rm-italics,
[data-tag^="c:silver"] + .rm-bold {
    color: #DDDDDD;
    
}

[data-tag^="c:gray"] + .rm-highlight,
[data-tag^="c:gray"] + span > .rm-page-ref--link {

	background-color: #AAAAAA !important;

}

[data-tag^="c:gray"] + .rm-italics,
[data-tag^="c:gray"] + .rm-bold {
    color: #AAAAAA;
    
}

[data-tag^="c:black"] + .rm-highlight,
[data-tag^="c:black"] + span > .rm-page-ref--link {

	background-color: #111111 !important;

}

[data-tag^="c:black"] + .rm-italics,
[data-tag^="c:black"] + .rm-bold {
    color: #111111;
    
}	

Have you tried #c-red ^^text^^ ? :)

Yay. Thank you so much. I'm so excited. I love the colors.That worked.

…

On Wed, Apr 21, 2021 at 7:58 AM Cato Minor ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Have you tried #c-red ^^text^^ ? :) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3714357>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATYR5M3B6QPNNSK3NVKH2VLTJ24XDANCNFSM4Q73XM6A> .

-- Notice of Confidentiality: This email, and any attachments, is intended only for use by the addressee(s) and may contain privileged or confidential information. Any distribution, reading, copying or use of this communication and any attachments by anyone other than the addressee, is strictly prohibited and may be unlawful. If you have received this email in error, please immediately notify me by email (by replying to this message) or telephone (704) 523 -0112 and permanently destroy or delete the original and any copies or printouts of this email and any attachments. It is important to be aware that email communication can be relatively easily accessed by unauthorized people and hence can compromise the privacy and confidentiality of such communication. Emails, in particular, are vulnerable to such unauthorized access due to the fact that servers have unlimited and direct access to all emails that go through them. A non-encrypted email, such as this, is even more vulnerable to unauthorized access. Please notify Kristen if you decide to avoid or limit, in any way, the use of email. Unless I hear from you otherwise, I will continue to communicate with you via email when necessary or appropriate. Please do not use email for emergencies. In the event of an emergency dial 911 or go to your nearest emergency room. Kristen McClure MSW, LCSW Licensed Clinical Therapist 5200 Park Road Suite 117 Charlotte NC 28209 http://www. <http://www.charlotte-anxiety-and-depression-treatment.com> kristen-mcclure-therapist.com Like my page on Facebook <https://www.facebook.com/kristenmccluremswlcsw>

Hi there, This is literally the 1st time entering a comment on Github so please forgive my ignorance.
I just installed the CSS and it's pretty darn good. I just have 1 question.
Is there any way to actually hide the #c:"COLOR" in the actual roam text?
I can see that it's hidden in the image above. Was this a feature that was lost with the recent update?
Or is there still a way to use color highlights without the #c:"COLOR" showing up in the text?

You can hide all data tags starting with "c:", for example:

span.rm-page-ref[data-tag^="c:"] {
  display: none;
}

I'm not able to get version 3.6 of this to work, after pasting the code in roam/css (I've not used css before, so probably doing something wrong).

I'm trying #c-red ^^test^^ and having no luck. Any pointers?

@bambooboy10001 : Sorry for late reply! Please, feel free to write me DM on Twitter, if you have any issues.
Installation:

• open [[roam/css]]
• create a new block like "Colored fonts"
• create a "code block" and set it up to CSS
• copy and paste the version 3.6 there :)

@ciceronianus Thank you for this css!
One quick question: what was the reasoning behind your decision to change the syntax from c: to c-(an update in version 3.5)?