extensions/workflowy-helper/style.css

:root {
	--grey: rgb(158, 161, 162);
	--white: rgb(255, 255, 255);
	--dark-grey: rgb(92, 96, 98);
	--black: rgb(42, 49, 53);
	--highlight: rgb(47, 55, 60);
	--yellow: rgb(227, 160, 8);
	--orange: rgb(255, 138, 76);
	--red: #F74E5D; /* rgb(249, 128, 128); */
	--magenta: rgb(244, 114, 182);
	--violet: rgb(172, 148, 250);
	--blue: rgb(56, 189, 248);
	--cyan: rgb(45, 212, 191);
	--green: rgb(49, 196, 141);
}

body {
	--wf-tag-text-gray: var(--white) !important;
	--wf-tag-background-gray: var(--white) !important;
	--wf-tag-text-red: var(--red) !important;
	--wf-tag-background-red: var(--red) !important;
	--wf-tag-text-orange: var(--orange) !important;
	--wf-tag-background-orange: var(--orange) !important;
	--wf-tag-text-yellow: var(--yellow) !important;
	--wf-tag-background-yellow: var(--yellow) !important;
	--wf-tag-text-green: var(--green) !important;
	--wf-tag-background-green: var(--green) !important;
	--wf-tag-text-blue: var(--dark-grey) !important;
	--wf-tag-background-blue: var(--dark-grey) !important;
	--wf-tag-text-purple: var(--violet) !important;
	--wf-tag-background-purple: var(--violet) !important;
	--wf-tag-text-teal: var(--cyan) !important;
	--wf-tag-background-teal: var(--cyan) !important;
	--wf-tag-text-sky: var(--blue) !important;
	--wf-tag-background-sky: var(--blue) !important;
	--wf-tag-text-pink: var(--magenta) !important;
	--wf-tag-background-pink: var(--magenta) !important;
	--wf-tag-text: var(--black) !important;
	--wf-color-bullet: var(--white) !important;
	color: var(--grey) !important;
}

/* .root:not(.board) > .children, */
/* .root:not(.board) > .name { */
/* 	/1* max-width: 800px; *1/ */
/* } */
.name > .content > .innerContentContainer::before {
	margin-right: 4px;
}

body::-webkit-scrollbar {
  display: none;
}

.pageContainer {
	max-width: 100vw !important;
	overflow-x: hidden;
}
.page {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.mainTreeRoot > .name {
	height: 0 !important;
}

.name > .content > .innerContentContainer {
    overflow: hidden;
    text-overflow: ellipsis;
}

.link,
.contentTag {
	color: var(--dark-grey) !important;
	font-weight: normal !important;
}

.homeButton > svg {
	display: none;
}
.homeButton::after {
	content: "✞";
	font-size: 2em;
}

.header > :first-child {
	display: none !important;
}


.metaMatches * .innerContentContainer,
.contentMatch {
	background: none !important;
}

.project > .text-sm,
.paragraph {
	margin: 0 !important;
}
.project .breadcrumbs {
    position: absolute;
    z-index: 20;
	right: 25px;
    top: 10px;
}
.project .breadcrumbs > a,
.project .breadcrumbs > svg,
.project .breadcrumbs > .menu {
	display: none;
}
.project * .breadcrumbs > :nth-last-child(3) {
	font-size: 0;
	display: initial !important;
}
.project * .breadcrumbs > :nth-last-child(3)::after {
	font-size: 12px;
	content: "→";
}

.linked-xGOAL > .name .innerContentContainer,
.linked-xGOAL > .notes .innerContentContainer {
	color: var(--yellow);
}
.linked-xGOAL > .name .innerContentContainer {
	font-weight: bold;
}
.linked-xGOAL > .name > .content > .innerContentContainer::before {
	content: "★";
	color: var(--yellow);
}

.linked-xRESPONSIBILITY > .name > .content > .innerContentContainer::before {
	content: "✦";
	color: var(--red);
}

.linked-xRESPONSIBILITY > .name .innerContentContainer,
.linked-xRESPONSIBILITY > .notes .innerContentContainer {
	color: var(--red);
}

.linked-xRESPONSIBILITY > .name .innerContentContainer {
	font-weight: bold;
}

.linked-xVISUALISATION > .name > .content > .innerContentContainer::before {
	content: "☁︎";
	color: var(--green);
}

.linked-xVISUALISATION > .name .innerContentContainer,
.linked-xVISUALISATION > .notes .innerContentContainer {
	color: var(--green);
}

.linked-xVISUALISATION > .name .innerContentContainer {
	font-weight: bold;
}


.linked-xPROJECT > .name .innerContentContainer {
	font-weight: bold;
}
.linked-xPROJECT > .name > .content > .innerContentContainer::before {
	content: "⚑";
}
.linked-xPROJECT.tagged-ACTIVE > .name > .content > .innerContentContainer::before {
	/* filter: invert(50%) sepia(100%) saturate(300%) hue-rotate(300deg) brightness(100%) contrast(300%); */
	color: var(--magenta);
}
.linked-xPROJECT.tagged-ACTIVE > .name .innerContentContainer,
.linked-xPROJECT.tagged-ACTIVE > .notes .innerContentContainer {
	color: var(--magenta);
}
.linked-xPROJECT.tagged-PLANT > .name > .content > .innerContentContainer::before {
	/* filter: invert(50%) sepia(100%) saturate(300%) hue-rotate(340deg) brightness(100%) contrast(100%); */
	color: var(--orange);
}
.linked-xPROJECT.tagged-PLANT > .name .innerContentContainer,
.linked-xPROJECT.tagged-PLANT > .notes .innerContentContainer {
	color: var(--orange);
}
.linked-xPROJECT.tagged-STALLED > .name > .content > .innerContentContainer::before {
	/* filter: invert(50%) sepia(100%) saturate(300%) hue-rotate(120deg) brightness(100%) contrast(100%); */
	color: var(--cyan);
}
.linked-xPROJECT.tagged-STALLED > .name .innerContentContainer,
.linked-xPROJECT.tagged-STALLED > .notes .innerContentContainer {
	color: var(--cyan);
}
.linked-xPROJECT.tagged-SOMEDAY > .name > .content > .innerContentContainer::before {
	/* filter: invert(50%) sepia(100%) saturate(300%) hue-rotate(210deg) brightness(100%) contrast(100%); */
	color: var(--violet);
}
.linked-xPROJECT.tagged-SOMEDAY > .name .innerContentContainer,
.linked-xPROJECT.tagged-SOMEDAY > .notes .innerContentContainer {
	color: var(--violet);
}

.linked-xHABIT > .name > .content > .innerContentContainer::before {
	content: "↻";
	/* filter: invert(50%) sepia(100%) saturate(300%) hue-rotate(330deg) brightness(100%) contrast(100%); */
	color: var(--orange);
}


.linked-xHABIT > .name .innerContentContainer,
.linked-xHABIT > .notes .innerContentContainer {
	color: var(--orange);
}

.linked-xTASK > .name > .content > .innerContentContainer::before {
	/* content: "✔️"; */
	content: "✓";
}

.linked-xTASK.tagged-NEXT > .name > .content > .innerContentContainer::before {
	/* filter: invert(50%) sepia(100%) saturate(300%) hue-rotate(160deg) brightness(90%) contrast(100%); */
	color: var(--blue);
}
.linked-xTASK.tagged-NEXT > .name .innerContentContainer,
.linked-xTASK.tagged-NEXT > .notes .innerContentContainer {
	color: var(--blue);
}
.linked-xTASK.tagged-DAILY > .name > .content > .innerContentContainer::before,
.linked-xTASK.tagged-WEEKLY > .name > .content > .innerContentContainer::before,
.linked-xTASK.tagged-MONTHLY > .name > .content > .innerContentContainer::before,
.linked-xTASK.tagged-IRREGULAR > .name > .content > .innerContentContainer::before {
	content: "↻";
	color: var(--green);
}
.linked-xTASK.tagged-DAILY > .name .innerContentContainer,
.linked-xTASK.tagged-DAILY > .notes .innerContentContainer,
.linked-xTASK.tagged-WEEKLY > .name .innerContentContainer,
.linked-xTASK.tagged-WEEKLY > .notes .innerContentContainer,
.linked-xTASK.tagged-MONTHLY > .name .innerContentContainer,
.linked-xTASK.tagged-MONTHLY > .notes .innerContentContainer,
.linked-xTASK.tagged-IRREGULAR > .name .innerContentContainer,
.linked-xTASK.tagged-IRREGULAR > .notes .innerContentContainer {
	color: var(--green);
}
.linked-xTASK.tagged-WAITING > .name > .content > .innerContentContainer::before {
	color: var(--cyan);
}
.linked-xTASK.tagged-WAITING > .name .innerContentContainer,
.linked-xTASK.tagged-WAITING > .notes .innerContentContainer {
	color: var(--cyan);
}

.linked-xTASK.tagged-BLOCKED > .name > .content > .innerContentContainer::before {
	color: var(--red);
}
.linked-xTASK.tagged-BLOCKED > .name .innerContentContainer,
.linked-xTASK.tagged-BLOCKED > .notes .innerContentContainer {
	color: var(--red);
}

.linked-xTASK.tagged-MAYBE > .name > .content > .innerContentContainer::before {
	/* filter: invert(50%) sepia(100%) saturate(300%) hue-rotate(210deg) brightness(90%) contrast(100%); */
	color: var(--violet);
}
.linked-xTASK.tagged-MAYBE > .name .innerContentContainer,
.linked-xTASK.tagged-MAYBE > .notes .innerContentContainer {
	color: var(--violet);
}

.tag-DAILY {
	color: var(--blue) !important;
}
.tag-WEEKLY {
	color: var(--green) !important;
}
.tag-MONTHLY {
	color: var(--green) !important;
}
.tag-IRREGULAR {
	color: var(--green) !important;
}

.tag-WORK {
	color: var(--red) !important;
}

.tag-RELAX,
.tag-REVIEW {
	color: var(--yellow) !important;
}

.name .time > .content-wrapper {
	color: var(--grey) !important;
}

.name .time-today > .content-wrapper {
	color: var(--yellow) !important;
}

.notes .time-today > .content-wrapper {
	background-color: var(--white) !important;
	color: var(--black);
}

.name .time-tomorrow > .content-wrapper {
	color: var(--violet) !important;
}

.name .time-late > .content-wrapper,
.name .time-yesterday > .content-wrapper {
	color: var(--red) !important;
}

.matching-node {
	display: none !important;
}

.project.collapsed > .name,
.project.open > .name,
.root > .name {
	/* color: var(--white) !important; */
}

.tagged-done > .name > .content,
.tagged-done > .notes > .content,
.tagged-done > .name time > span,
.tagged-missed > .name > .content,
.tagged-missed > .notes > .content,
.tagged-missed > .name time > span,
.tagged-na > .name > .content,
.tagged-na > .notes > .content,
.tagged-na > .name time > span {
	/* opacity: 0.5 !important; */
	/* text-decoration: none !important; */
	text-decoration: line-through !important;
	text-decoration-thickness: 2px !important;
}

.tagged-done > .name > .content,
.tagged-done > .name time > span {
	text-decoration-color: var(--green) !important;
}

.tagged-missed > .name > .content,
.tagged-missed > .name time > span {
	text-decoration-color: var(--red) !important;
}

.tagged-na > .name > .content,
.tagged-na > .name time > span {
	text-decoration-color: var(--blue) !important;
}

.tag-new {
	color: var(--blue) !important;
}

.tagged-event > .name > .content > .innerContentContainer {
	color: var(--red) !important;
}

.tagged-note > .name > .content > .innerContentContainer {
	color: var(--blue) !important;
}

.tagged-gym > .name > .content > .innerContentContainer {
	color: var(--yellow) !important;
}

.tagged-holiday > .name > .content > .innerContentContainer {
	color: var(--orange) !important;
}

.tagged-plan > .name > .content > .innerContentContainer {
	color: var(--green) !important;
}

.tagged-birthday > .name > .content > .innerContentContainer {
	color: var(--violet) !important;
}

.half-open.tagged-a > .name > .bullet,
.collapsed.tagged-a > .name > .bullet,
.tagged-a > .name > .bullet {
	color: var(--red) !important;
}

.half-open.tagged-b > .name > .bullet,
.collapsed.tagged-b > .name > .bullet,
.tagged-b > .name > .bullet {
	color: var(--blue) !important;
}

.half-open.tagged-c > .name > .bullet,
.collapsed.tagged-c > .name > .bullet,
.tagged-c > .name > .bullet {
	color: var(--green) !important;
}

.half-open.tagged-d > .name > .bullet,
.collapsed.tagged-d > .name > .bullet,
.tagged-d > .name > .bullet {
	color: var(--violet) !important;
}

.timed-late:not(.tagged-TASK) > .name,
.timed-late:not(.tagged-TASK) > .notes,
.timed-late:not(.tagged-TASK) > .children > .project:not(.timed) {
    opacity: .5 !important;
}

.inject {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.inject > img {
	border-radius: 4px;
	border: 1px solid var(--dark-grey);
	cursor: pointer;
}

.inject > img:hover {
	border-color: var(--white);
}

.root > .inject {
	margin-left: 0;
}

.hotspot-admin > .name .innerContentContainer::after {
	content: "✏️";
	margin-left: 4px;
}

.hotspot-mind > .name .innerContentContainer::after {
	content: "🧠";
	margin-left: 4px;
}

.hotspot-health > .name .innerContentContainer::after {
	content: "💪";
	margin-left: 4px;
}

.hotspot-art > .name .innerContentContainer::after {
	content: "🎨";
	margin-left: 4px;
}

.hotspot-social > .name .innerContentContainer::after {
	content: "👥";
	margin-left: 4px;
}

.hotspot-career > .name .innerContentContainer::after {
	content: "💻";
	margin-left: 4px;
}

.hotspot-church > .name .innerContentContainer::after {
	content: "☦️";
	margin-left: 4px;
}

.hotspot-work > .name .innerContentContainer::after {
	content: "💼";
	margin-left: 4px;
}