Skip to content

Instantly share code, notes, and snippets.

@foeken

foeken/tana.css

Created December 28, 2022 11:54
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save foeken/b102adaebf33cdd14ff3f3a4cf6c0898 to your computer and use it in GitHub Desktop.
Save foeken/b102adaebf33cdd14ff3f3a4cf6c0898 to your computer and use it in GitHub Desktop.
Download ZIP
Tana + FontAwesome
Raw
tana.css
/* ==UserStyle==
@name app.tana.inc - 10/21/2022, 9:02:58 PM
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
==/UserStyle== */
@-moz-document domain("app.tana.inc") {
:root {
--bulletDiameterInner: 6px;
--size300: 14.5px;
}
@media (min-width: 1000px) {
html.panelGrid .PanelStack-module_horizontalSplit__N2ysk>* {
min-width: 700px;
overflow-y: scroll;
max-height: calc(100vh - var(--topBarHeight) - var(--panelDividerSize) - var(--panelDividerSize));
}
.listContentItem span {
overflow-wrap: anywhere;
}
}
/* Side bar */
div[title="Calendar"] .contentSide:before {
content: "\f133";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: var(--colorUITextMuted);
}
div[title="Inbox"] .contentSide:before {
content: "\f01c";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: #d960699c;
color: var(--colorUITextMuted);
}
div[title="Open Tasks"] .contentSide:before {
content: "\f310";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: var(--colorUITextMuted);
}
div[title="Delegated Tasks"] .contentSide:before {
content: "\f007";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: #0078cc96;
color: var(--colorUITextMuted);
}
div[title="Open Questions"] .contentSide:before {
content: "\e243";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: var(--colorUITextMuted);
}
div[title="My People"] .contentSide:before {
content: "\e21b";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: var(--colorUITextMuted);
}
div[title="Projects"] .contentSide:before {
content: "\e488";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: var(--colorUITextMuted);
}
div[title^="Yearly Plan"] .contentSide:before {
content: "\e0d4";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: var(--colorUITextMuted);
color: #8451e0c4;
}
div[title^="Monthly Plan"] .contentSide:before {
content: "\f073";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: var(--colorUITextMuted);
color: #fea443ab;
}
div[title^="Weekly Plan"] .contentSide:before {
content: "\f784";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: var(--colorUITextMuted);
color: #8daa1a9e;
}
div[title="Other"] .contentSide:before {
content: "\f0c9";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
color: var(--colorUITextMuted);
}
/* End of Sidebar */
body {
font-family: 'IBM Plex Sans';
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14.5px !important;
}
mark {
background-color: hsl(51, 98%, 81%);
}
:has(span[data-tag="quote"]):not(.expandedNodeContent) > .listContentItem,
:has(span[data-tag="block-quote"]):not(.expandedNodeContent) > .listContentItem {
background-color: var(--colorReferenceMentionBackground);
border-left: 5px solid var(--colorUIStroke);
border-left-width: 3px;
border-radius: 3px;
padding: 8px 14px;
}
:has(span[data-tag="delegated"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "👤 ← ";
color: var(--colorUITextMuted);
}
:has(span[data-tag="discuss"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "💬 ← ";
color: var(--colorUITextMuted);
}
:has(span[data-tag="personal-goal"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "🎯 ";
content: "\f140";
font-family: 'Font Awesome 6 DuoTone';
margin-right: 5px;
color: #617901;
}
:has(span[data-tag="weekly-plan"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "\f784";
font-family: 'Font Awesome 6 DuoTone';
margin-right: 5px;
color: #617901;
}
:has(span[data-tag="monthly-plan"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "\f073";
font-family: 'Font Awesome 6 DuoTone';
margin-right: 5px;
color: #eb8f2a;
}
:has(span[data-tag="yearly-plan"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "\e0d4";
font-family: 'Font Awesome 6 DuoTone';
margin-right: 5px;
color: var(--colorUITextMuted);
color: #8451e0;
}
:has(span[data-tag="question"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "\e243";
font-family: 'Font Awesome 6 Pro';
margin-right: 5px;
font-size: 16.5px;
position: relative;
top: -1px;
vertical-align: top;
color: #ea0079;
}
:has(span[data-tag="annual-review"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "\f736";
font-family: 'Font Awesome 6 DuoTone';
margin-right: 5px;
color: #8451e0;
}
:has(span[data-tag="spotlight"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "💡 → ";
color: var(--colorUITextMuted);
content: "\f762";
font-family: 'Font Awesome 6 DuoTone';
margin-right: 5px;
color: #F2BD1D;
}
:has(span[data-tag="reminder"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "🧠 ← ";
color: var(--colorUITextMuted);
}
:has(span[data-tag="1-1"]):not(.expandedNodeContent) > span[data-role="editable"]:before,
:has(span[data-tag="3P"]):not(.expandedNodeContent) > span[data-role="editable"]:before,
:has(span[data-tag$="meeting"]):not(.expandedNodeContent) > span[data-role="editable"]:before {
content: "💬 ";
content: "\e0d5";
font-family: 'Font Awesome 6 DuoTone';
margin-right: 5px;
color: #e5b72c;
}
/* Sections */
.listContentItem:has(span[data-tag="highlights-section"]) span[data-role="editable"] {
background-color: #F2BD1D !important;
}
.listContentItem:has(span[data-tag="zettel-section"]) span[data-role="editable"] {
background-color: #8D6343 !important;
}
.listContentItem:has(span[data-tag="nedap-section"]) span[data-role="editable"] {
background-color: #12537A !important;
}
.listContentItem:has(span[data-tag="work-section"]) span[data-role="editable"] {
background-color: #12537A !important;
}
.listContentItem:has(span[data-tag="journal-section"]) span[data-role="editable"] {
background-color: #599CC6 !important;
}
.listContentItem:has(span[data-tag="中文-section"]) span[data-role="editable"] {
background-color: #FEA443 !important;
}
.listContentItem:has(span[data-tag="metrics-section"]) span[data-role="editable"] {
background-color: #565656 !important;
}
.listContentItem:has(span[data-tag="spotlight-section"]) span[data-role="editable"] {
background-color: #FEA443 !important;
}
.listContentItem:has(span[data-tag="personal-section"]) span[data-role="editable"] {
background-color: #1E86C7 !important;
}
.listContentItem:has(span[data-tag="inbox-section"]) span[data-role="editable"] {
background-color: #D95F69 !important;
}
.listContentItem:has(span[data-tag="literature-notes"]) span[data-role="editable"] {
background-color: #8F3B7B !important;
}
.listContentItem:has(span[data-tag="fleeting-notes"]) span[data-role="editable"] {
background-color: #DB86C7 !important;
}
.listContentItem:has(span[data-tag="zettel-notes"]) span[data-role="editable"] {
background-color: #73A867 !important;
}
.listContentItem:has(span[data-tag="literature-notes"]) .noInteractiveInline {
display: block;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 7px;
padding-left: 15px;
border-left: 1px solid var(--colorUITupleStroke);
font-style: italic;
}
.listContentItem:has(span[data-tag="highlights-section"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="zettel-section"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="nedap-section"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="work-section"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="journal-section"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="中文-section"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="spotlight-section"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="personal-section"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="inbox-section"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="metrics-section"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="literature-notes"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="zettel-notes"]) span[data-role="editable"],
.listContentItem:has(span[data-tag="fleeting-notes"]) span[data-role="editable"] {
padding: 3px 7px;
line-height: 2em;
border-radius: 3px;
color: white;
border: none;
margin-right: 2px;
}
.listContentItem:has(span[data-tag="highlights-section"]) .inlinerefnode span,
.listContentItem:has(span[data-tag="zettel-section"]) .inlinerefnode span,
.listContentItem:has(span[data-tag="personal-section"]) .inlinerefnode span,
.listContentItem:has(span[data-tag="journal-section"]) .inlinerefnode span,
.listContentItem:has(span[data-tag="inbox-section"]) .inlinerefnode span,
.listContentItem:has(span[data-tag="metrics-section"]) .inlinerefnode span,
.listContentItem:has(span[data-tag="中文-section"]) .inlinerefnode span,
.listContentItem:has(span[data-tag="spotlight-section"]) .inlinerefnode span,
.listContentItem:has(span[data-tag="work-section"]) .inlinerefnode span,
.listContentItem:has(span[data-tag="nedap-section"]) .inlinerefnode span {
background-color: inherit !important;
color: white;
border: none;
}
/* Low opacity tags */
.listContentItem span[data-tag="zettel"],
.listContentItem span[data-tag="missing"],
.listContentItem span[data-tag="highlights-section"],
.listContentItem span[data-tag="zettel-section"],
.listContentItem span[data-tag="personal-section"],
.listContentItem span[data-tag="nedap-section"],
.listContentItem span[data-tag="work-section"],
.listContentItem span[data-tag="journal-section"],
.listContentItem span[data-tag="inbox-section"],
.listContentItem span[data-tag="中文-section"],
.listContentItem span[data-tag="spotlight-section"],
.listContentItem span[data-tag="metrics-section"],
.listContentItem span[data-tag="literature-notes"],
.listContentItem span[data-tag="zettel-notes"],
.listContentItem span[data-tag="fleeting-notes"] {
opacity: 0.4
}
.listContentItem:hover span[data-tag="zettel"],
.listContentItem:hover span[data-tag="missing"],
.listContentItem:hover span[data-tag="highlights-section"],
.listContentItem:hover span[data-tag="zettel-section"],
.listContentItem:hover span[data-tag="personal-section"],
.listContentItem:hover span[data-tag="nedap-section"],
.listContentItem:hover span[data-tag="work-section"],
.listContentItem:hover span[data-tag="journal-section"],
.listContentItem:hover span[data-tag="inbox-section"],
.listContentItem:hover span[data-tag="metrics-section"],
.listContentItem:hover span[data-tag="中文-section"],
.listContentItem:hover span[data-tag="spotlight-section"],
.listContentItem:hover span[data-tag="literature-notes"],
.listContentItem:hover span[data-tag="zettel-notes"],
.listContentItem:hover span[data-tag="fleeting-notes"] {
opacity: 1
}
/* Custom Zettel Styling */
div[data-panel-content="true"] .listContentItem:has(span[data-tag="zettel"]) span[data-role="editable"] {
background: #95DB851E;
padding: 3px 10px 3px 75px;
line-height: 2em;
border-radius: 3px;
position: relative;
color: #58814F !important;
}
div[data-panel-content="true"] .listContentItem:has(span[data-tag="zettel"]) .outerEdgeActive .editable:not(.outerEdgeEditable) {
border: 1px solid #95db8578;
border-left: 0px;
box-shadow: none;
animation: none;
position: relative;
z-index: 1;
}
div[data-panel-content="true"] .listContentItem:has(span[data-tag="zettel"]) span[data-role="editable"]:before {
content: 'Zettel';
color: #FFFFFF;
background-color: #95DB85;
border-radius: 3px 0 0 3px;
padding-left: 10px;
line-height: 26px;
left: 0px;
top: 0%;
position: absolute;
pointer-events: none;
width: 55px;
}
.isDarkMode div[data-panel-content="true"] .listContentItem:has(span[data-tag="zettel"]) span[data-role="editable"]:before {
background-color: #95db857a;
color: #ffffffc4;
}
div[data-panel-content="true"] .listContentItem:has(span[data-tag="zettel"]) span[data-role="editable"]:after {
content: '';
color: #FFFFFF;
left: 55px;
top: 0%;
position: absolute;
pointer-events: none;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 13px solid #95DB85;
}
.isDarkMode div[data-panel-content="true"] .listContentItem:has(span[data-tag="zettel"]) span[data-role="editable"]:after {
border-left: 13px solid #95db857a;
}
div[data-panel-content="true"] .listContentItem:has(span[data-tag="missing"]) span[data-role="editable"] {
background: #FEA4431E;
padding: 3px 10px 3px 75px;
line-height: 2em;
border-radius: 3px;
position: relative;
color: #D78B37 !important;
}
div[data-panel-content="true"] .listContentItem:has(span[data-tag="missing"]) .outerEdgeActive .editable:not(.outerEdgeEditable) {
border: 1px solid #FEA44378;
border-left: 0px;
box-shadow: none;
animation: none;
position: relative;
z-index: 1;
}
div[data-panel-content="true"] .listContentItem:has(span[data-tag="missing"]) span[data-role="editable"]:before {
content: 'Zettel';
color: #FFFFFF;
background-color: #FEA443;
border-radius: 3px 0 0 3px;
padding-left: 10px;
line-height: 26px;
left: 0px;
top: 0%;
position: absolute;
pointer-events: none;
width: 55px;
}
.isDarkMode div[data-panel-content="true"] .listContentItem:has(span[data-tag="missing"]) span[data-role="editable"]:before {
background-color: #FEA4437a;
}
div[data-panel-content="true"] .listContentItem:has(span[data-tag="missing"]) span[data-role="editable"]:after {
content: '';
color: #FFFFFF;
left: 55px;
top: 0%;
position: absolute;
pointer-events: none;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 13px solid #FEA443;
}
.isDarkMode div[data-panel-content="true"] .listContentItem:has(span[data-tag="missing"]) span[data-role="editable"]:after {
border-left: 13px solid #FEA4437a;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment