Workflowy Styleable Tags - Stylish/Stylus

workflowy-stylabe-tags.css

/* ================== OUTLINES ================== */

/* ===== UPPERCASE ===== */

div.project.uc-proj div.content {
    text-transform: uppercase;
}
.contentTag[title="Filter #uc"]:before {
    content: "◯";
    visibility: visible !important;
    color: rgba(0,0,0,0.0) !important;
    font-family: AvenirNext-UltraLight !important;
}
.contentTag[title="Filter #uc"]:hover:before {
    color: rgba(0,0,0, 1.0) !important;
}

span.contentTag[title="Filter #uc"] {
    visibility: hidden;
}

span.contentTag[title="Filter #uc"] span {
    display: none;
} 


/* ===== NO BULLETS ===== */

div.project.nb-proj .bullet {
     opacity: 0 !Important;
}

.contentTag[title="Filter #nb"]:before {
    content: "◯";
    visibility: visible !important;
    color: rgba(0,0,0,0.0) !important;
    font-family: AvenirNext-UltraLight !important;
}
.contentTag[title="Filter #nb"]:hover:before {
    color: rgba(0,0,0, 1.0) !important;
}

span.contentTag[title="Filter #nb"] {
    visibility: hidden;
}

span.contentTag[title="Filter #nb"] span {
    display: none;
}


/* ===== TEXT ALIGN: CENTER ===== */

div.project.center-proj div.content {
	text-align: center;
}

.contentTag[title="Filter #center"]:before {
    content: "◯";
    visibility: visible !important;
    color: rgba(0,0,0,0.0) !important;
    font-family: AvenirNext-UltraLight !important;
}
.contentTag[title="Filter #center"]:hover:before {
    color: rgba(0,0,0, 1.0) !important;
}

span.contentTag[title="Filter #center"] {
    visibility: hidden;
}

span.contentTag[title="Filter #center"] span {
    display: none;
} 


/* ================== LISTS ================== */


/* ===== BLINKING ===== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
}
.blink-proj > .name > .content {
    animation: fadeIn 2s infinite alternate;
}
.contentTag[title="Filter #blink"]:before {
    content: "◯";
    visibility: visible !important;
    color: rgba(0,0,0,0.0) !important;
    font-family: AvenirNext-UltraLight !important;
}
.contentTag[title="Filter #blink"]:hover:before {
    color: rgba(0,0,0, 1.0) !important;
}

span.contentTag[title="Filter #blink"] {
    visibility: hidden;
}

span.contentTag[title="Filter #blink"] span {
    display: none;
}

/* ===== BLOCK QUOTES ===== */

:root {
	--circle-opacity: rgba(0,0,0,0.0);
    --circle-hover-color: rgba(0,0,0, 0.5);
	--content: "◯";
	--font-family: AvenirNext-UltraLight;
}

span.contentTag[title="Filter #bq"] span {
	display: none;
}
.contentTag[title="Filter #bq"]:before {
	content: var(--content);
	display: inline !important;
	visibility: visible !important;
	color: var(--circle-opacity) !important;
	font-family: var(--font-family) !important;
    font-style: normal !important;
}
.contentTag[title="Filter #bq"]:hover:before {
	color: var(--circle-hover-color) !important;
}
span.contentTag[title="Filter #bq"] {
	visibility: hidden;
}
.bq-proj > .name > .content {
	border-left: 10px solid rgba(0,0,0, 0.06);
	border-radius: 0 !important;
	padding-left: 25px !important;
    margin: 3px 0 0 4px !important;
    font-style: italic !important;
}


/* MULTIPLE CHOICE REVEAL */

.yes-proj > .name > .content:hover {
    font-style: italic !important;
	border-left: 10px solid indianred;
	border-radius: 0 !important;
	padding-left: 8px;
	margin: 3px 0 0 4px;
}
.contentTag[title="Filter #yes"]:before {
    content: "◯";
    visibility: visible !important;
    color: rgba(0,0,0,0.0) !important;
    font-family: AvenirNext-UltraLight !important;
	font-style: normal !important;
}
.contentTag[title="Filter #yes"]:hover:before {
    color: rgba(0,0,0, 1.0) !important;
}

span.contentTag[title="Filter #yes"] {
    visibility: hidden;
}

span.contentTag[title="Filter #yes"] span {
    display: none;
}

WorkflowyStylableTags_big_old_version.js

// ==UserScript==
// @name           WorkflowyStylableTags
// @description    Gives each tag it's own css style, so you can style them with Stylish. I use Blank Canvas to manage my userscripts in Chrome.
// @author         Nigel Thorne
// @include        http*://*workflowy.com/*
// @version        1.0
// ==/UserScript==

String.prototype.endsWith = function(suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1;
};

var customClasses = function(index, old){
	var classes = old.split(" ");
	var custom = [];
	for( i = 0; i < classes.length; i++){
		if(classes[i].endsWith("-row")){ custom.push(classes[i]);};
		if(classes[i].endsWith("-span")){ custom.push(classes[i]);};
		if(classes[i].endsWith("-proj")){ custom.push(classes[i]);};
	};
	return custom.join(" ");
}

var StylableTagsCounter = 1;
setInterval(function(){
    StylableTagsCounter ++;
    if( StylableTagsCounter >= 3){
        $('.name').removeClass(customClasses);
        $('.content').removeClass(customClasses);
        $('.project').removeClass(customClasses);
        $('.pageContainer').removeClass(customClasses);
        StylableTagsCounter = 0;
    }
	$('span > .contentTagText').map( function(){
		var x = $(this).text();
		$(this).parent('.contentTag').addClass(x).parent().addClass(x+"-span").parent().addClass(x+"-row").parent().addClass(x+"-proj");}
	);
},1000);

WorkflowyStylableTags_slim_version.js

// ==UserScript==
// @name           WorkflowyStylableTags
// @description    Gives each tag it's own css style, so you can style them with Stylish. I use Blank Canvas to manage my userscripts in Chrome.
// @author         Nigel Thorne and LukeMT
// @include        http*://*workflowy.com/*
// @version        1.1
// ==/UserScript==

String.prototype.endsWith = function(suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1;
};

var customClasses = function(index, old){
	var classes = old.split(" ");
	var custom = [];
	for( i = 0; i < classes.length; i++){
		if(classes[i].endsWith("-proj")){ custom.push(classes[i]);};
	};
	return custom.join(" ");
}

var StylableTagsCounter = 1;
setInterval(function(){
    StylableTagsCounter ++;
    if( StylableTagsCounter >= 3){
        $('.project').removeClass(customClasses);
        $('.pageContainer').removeClass(customClasses);
        StylableTagsCounter = 0;
    }
	$('span > .contentTagText').map( function(){
		var x = $(this).text();
		$(this).parent('.contentTag').parent().parent().parent().addClass(x+"-proj");}
	);
},1000);