Tana Nodes CSS Snippets

tana.css

/* custom font */
html {
    --colorEditorText: var(--colorGray700);
    font-family: Chivo;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

html.isDarkMode {
    --colorEditorText: var(--colorGray300);
    font-family: Chivo;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

/* 100% width content */
div[class^=Panel].panelWidthLarge .contentFromTemplate>div {
    width: 100%;
}

/* panel owner button */
.paneOwnerButton {
    display: block;
}

/* notifications box padding */ 
.NotificationList-module_notificationListPane__-H04L {
    padding: 40px;
}

/* message module clean-up */
.Message-module_el__hrXRU.Message-module_regular__RO0-i.Message-module_deprecatedOuterMargins__0oWTS {
    margin-top: 10px !important;
    margin-bottom: 0px !important;
    padding: 10px !important;
    background: transparent;
}

.Message-module_icon__TpJjJ {
    display: none !important;
}

.Message-module_el__hrXRU .Message-module_body__KXKqH {
    flex-direction: row !important;
}

html.isDarkMode .Message-module_el__hrXRU.Message-module_info__SUFMT {
    border: 1px solid var(--colorGray700);
    color: var(--colorGray600);
}

.Message-module_el__hrXRU.Message-module_info__SUFMT {
    border: 1px solid var(--colorGray300);
    color: var(--colorGray500);
}

html.isDarkMode .Button-module_button__WROwO.Button-module_active__fBFYg.Button-module_default__1yrxS,
html.isDarkMode .Button-module_button__WROwO.Button-module_active__fBFYg.Button-module_outline__1Dt0H {
    color: var(--colorGray600);
    border-color: var(--colorGray700);
}

.Button-module_button__WROwO.Button-module_active__fBFYg.Button-module_default__1yrxS,
.Button-module_button__WROwO.Button-module_active__fBFYg.Button-module_outline__1Dt0H {
    color: var(--colorGray500);
    border-color: var(--colorGray300);
}

html.isDarkMode .Button-module_button__WROwO.Button-module_active__fBFYg.Button-module_default__1yrxS:hover,
html.isDarkMode .Button-module_button__WROwO.Button-module_active__fBFYg.Button-module_outline__1Dt0H:hover {
    border-color: var(--colorGray600);
}

.Button-module_button__WROwO.Button-module_active__fBFYg.Button-module_default__1yrxS:hover,
.Button-module_button__WROwO.Button-module_active__fBFYg.Button-module_outline__1Dt0H:hover {
    border-color: var(--colorGray500);
}

.contentSide > .expandedNodeContent {
    margin-left: 0;
}

/* live search pulsing dot no animation */
.SearchRefreshButton-module_searchRefreshButton__PK-X8.SearchRefreshButton-module_searchActive__zneUT .SearchRefreshButton-module_searchIndicator__077KE:before {
    animation: none !important;
}

/* checkbox shadow + light gray background */
.doneCheckbox input[type=checkbox]:checked:focus {
    background-color: var(--colorGray500);
    box-shadow: 0 0 0 1px var(--colorGray500), inset 0 0 0 2px var(--colorEditorBackground);
    background-position: top;
}
.doneCheckbox input[type=checkbox]:focus {
    box-shadow: 0 0 0 1px var(--colorUIStrokeHover), inset 0 0 0 2px var(--colorEditorBackground);
    background-position: top;
}
.doneCheckbox input[type=checkbox]:checked {
    background-color: var(--colorGray500);
    box-shadow: 0 0 0 1px var(--colorEditorBackground), inset 0 0 0 2px var(--colorEditorBackground);
    background-position: top;
}

/* done checkbox title strikethrough */
.itemdone-checkbox .wrapEditableAndMenu .editable {
     text-decoration: line-through;
}

/* layout button */
div[data-panel-id="sidepanel"] button {
  color: rgb(158, 161, 162);
}
div[data-panel-id="sidepanel"] button:hover {
  color: rgb(217, 219, 219);
}

/* top-bar no borders + search bar radius */
header {
  border-top: none!important;
  box-shadow: none!important;
}
header > div,
header div[class^="TopBar-module_separator"] {
  border-left: none!important;
}
input[id="searchquery"],
div[class^="TopBar-module_searchBarContainer"] {
  border-radius: 2rem!important;
}

/* hide switch calendars button */
.Button-module_buttonGroup__6YO55:nth-child(4) {
    display: none;
}

Great work! Thank you very much