Skip to content

Instantly share code, notes, and snippets.

@chroju
Last active May 12, 2022 02:56
Show Gist options
  • Save chroju/6b97e2fdec451b792c0194d5b56cf119 to your computer and use it in GitHub Desktop.
Save chroju/6b97e2fdec451b792c0194d5b56cf119 to your computer and use it in GitHub Desktop.
Dynalist css
/* https://userstyles.org/styles/177309/dynalist-candy-1-2 */
/* @import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap'); */
:root
{
--over: rgba(0,0,0,1);
--transparent: rgba(0,0,0,0);
--selected: rgba(0,0,0,.5);
--pink: #f20866;
--orange: #f59b47;
--yellow: #f9d851;
--green: #89f279;
--blue: #75dce6;
--purple: #c073c1;
}
/* change overdue colour */
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue
{
background: rgba(242, 8, 102, .2);
border: solid 1px var(--pink);
color: var(--pink);
}
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue:before
{
color: var(--pink);
}
.node-inline-item, .AppContainer.is-highlighting-overdue .Node.is-checked .node-time.is-overdue
{
color: #9A9A9A;
}
/* more date tweaks */
.is-largeFont .Node-contentContainer .node-inline-item
{
font-size: 0.6em;
letter-spacing: .005em;
line-height: 18px;
font-weight: bold;
color: #9A9A9A;
}
/* tweak codeblock formatting */
.node-inline-code
{
margin: 5px;
padding: 10px;
color: #f20866;
background-color: rgba(0,0,0,.1);
}
/* image tweaks */
.node-displayed-image
{
vertical-align: middle;
max-width: 750px;
max-height: 300px;
margin-bottom: 5px;
}
/* Images are shrunk to 50 pixel thumbnails */
/*
.node-displayed-image {
vertical-align: middle;
max-width: 100px;
max-height: 100px;
margin-bottom: 5px;
}
*/
/* Hovering over an image thumbnail enbiggens it */
/*
.node-displayed-image:hover {
vertical-align: middle;
max-width: 300px;
max-height: 300px;
}
*/
/* fancy inline images */
/*
.node-displayed-image {
box-shadow: 4px 4px;
}
*/
/* Set Up standard tag format */
.node-tag[title*="@"]
{
font-weight: normal;
color: white !important;
background-color: #666!important;
border-radius: 10px;
text-decoration: none;
padding: 1px 5px 1px 5px;
font-size: 0.8em;
font-weight: bolder;
opacity: 0.4;
font-size: 70%;
word-wrap: normal;
white-space: nowrap;
vertical-align: middle;
}
.node-tag[title*="#"]
{
color: black !important;
background-color: #ccc!important;
border-radius: 10px;
text-decoration: none;
padding: 1px 5px 1px 5px;
font-size: 0.8em;
font-weight: bold;
opacity: 0.4;
font-size: 70%;
word-wrap: normal;
white-space: nowrap;
vertical-align: middle;
}
/* Set up colored tags */
.node-tag[title*="@read"]
{
display: none;
}
.node-tag[title*="@time"]
{
color: white !important;
background-color: var(--pink) !important;
opacity: 1;
}
.node-tag[title*="@recurring"]
{
color: white !important;
background-color: var(--purple) !important;
opacity: 1;
}
.node-tag[title*="@waiting"]
{
color: white !important;
background-color: var(--blue) !important;
opacity: 1;
}
.node-tag[title*="@inProgress"]
{
color: white !important;
background-color: var(--pink) !important;
opacity: 1;
}
.node-tag[title*="@dnf"]
{
color: white !important;
opacity: .20;
}
.node-tag[title*="#💸"]
{
color: black !important;
background-color: var(--green) !important;
opacity: 1;
}
.node-tag[title*="#⭐"]
{
color: black !important;
background-color: var(--yellow) !important;
opacity: 1;
}
.node-tag[title*="#🔥"]
{
color: black !important;
background-color: var(--orange) !important;
opacity: 1;
}
.node-tag[title*="#5/5"]
{
color: white !important;
background-color: black !important;
opacity: 1;
}
.node-tag[title*="#4/5"]
{
color: white !important;
background-color: black !important;
opacity: .80;
filter: contrast(90%);
}
.node-tag[title*="#3/5"]
{
color: white !important;
background-color: black !important;
opacity: .60;
filter: contrast(80%);
}
.node-tag[title*="#2/5"]
{
color: white !important;
background-color: black !important;
opacity: .40;
filter: contrast(70%);
}
.node-tag[title*="#1/5"]
{
color: white !important;
background-color: black !important;
opacity: .20;
filter: contrast(60%);
}
.node-tag[title*="#?/5"]
{
color: white !important;
background-color: black !important;
opacity: .0;
filter: contrast(60%);
}
/* */
.DocumentContainer.is-centerDocument .Document
{
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.Node.is-currentRoot > .Node-self
{
font-weight: bold;
}
*
{
text-decoration-skip-ink: auto;
}
/* change color labels*/
/* red */
:not(.is-heading) > .Node-contentContainer.has-color,
.is-heading2 > .Node-contentContainer.has-color,
.is-heading3 > .Node-contentContainer.has-color
{
background: var(--transparent);
}
.set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1
{
border-radius: 0;
padding-left: 6px !important;
border-left: 5px solid #f20866;
max-width: 70%;
}
/* orange */
.set-color-label[data-color="2"], .Node-contentContainer.mod-color-label-2
{
padding-left: 6px !important;
border-left: 5px solid var(--orange);
border-radius: 0;
max-width: 70%;
}
/* yellow */
.set-color-label[data-color="3"], .Node-contentContainer.mod-color-label-3
{
padding-left: 6px !important;
border-left: 5px solid var(--yellow);
border-radius: 0;
max-width: 70%;
}
/* green */
.set-color-label[data-color="4"], .Node-contentContainer.mod-color-label-4
{
padding-left: 6px !important;
border-left: 5px solid var(--green);
border-radius: 0;
max-width: 70%;
}
/* blue */
.set-color-label[data-color="5"], .Node-contentContainer.mod-color-label-5
{
padding-left: 6px !important;
border-left: 5px solid #75dce6;
border-radius: 0;
max-width: 70%;
}
/* purple */
.set-color-label[data-color="6"], .Node-contentContainer.mod-color-label-6
{
padding-left: 6px !important;
border-left: 5px solid #c073c1;
border-radius: 0;
max-width: 70%;
}
/* disable note space & icon */
.Node-openNote
{
display: none !important;
}
/* font */
.u-use-pref-font
{
/*
font-family: 'Montserrat', sans-serif;
letter-spacing: -.02em;
*/
}
/* font size */
.is-largeFont .Node-contentContainer
{
font-size: 21px;
}
/* always hide scrollbars but allow scrolling */
html
{
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar
{
width: 0px;
/* Remove scrollbar space */
height: 0px;
background: transparent;
/* Optional: just make scrollbar invisible */;
}
/* layout tweaks */
.DocumentItem
{
margin: 1px 0;
}
.FolderItem-header
{
padding-left: 30px;
}
.FolderItem .DocumentItem .DocumentItem-header
{
padding-left: 30px;
}
.DocumentItem-title,
.FolderItem-title
{
margin-left: 0;
}
.DocumentItem-icon,
.FolderItem-icon,
.BookmarkItem-icon
{
display: none;
}
.AppHeader
{
background-color: var(--transparent);
box-shadow: none;
}
.LeftPaneSplitter
{
display: none;
}
.is-desktop .Pane-header,
.is-desktop .popup-message-banner
{
background-color: rgba(0, 0, 0, 0);
}
.is-desktop .LeftPaneContainer-navItem
{
background: rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
}
.is-desktop .LeftPaneContainer-navItem.is-active, .is-desktop .LeftPaneContainer-navItem:hover
{
color: #4e4e4e;
}
.is-desktop .LeftPaneSlidebarContainer
{
box-shadow: none;
}
.is-desktop .LeftPaneContainer-nav
{
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
/* visibility: hidden; */
}
.Pane-header
{
visibility: hidden;
}
.is-compactDensity.is-article-view .Node-self
{
padding-top: 5px;
padding-bottom: 5px;
}
.is-desktop .main-container
{
margin-top: -32px;
}
.is-desktop .DocumentTools
{
margin-top: 32px;
}
.DocumentTools-overlay
{
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
}
.DocumentTools-icon
{
}
.DocumentContainer
{
height: calc(100% + 32px) !important;
}
.AppHeader-icon
{
}
.AppHeader-icon:hover
{
border: none;
box-shadow: none;
}
.header-sync-state.mod-synced,
.header-sync-state.mod-saved,
.header-sync-state.mod-sync-now,
.header-sync-state.mod-syncing
{
visibility: visible;
}
textarea.setting-text-field
{
width: 200% !important;
height: 500px !important;
}
.Node-checkbox:before {
background: #f5f5f5;
border: 2px solid #ccc;
box-shadow: inset 0 1px 1px #fff;
border-radius: 5px;
background-color: transparent;
}
:root {
--font: 'FiraCode-Retina', Menlo, Monaco, 'Courier New', monospace;
--node-red: rgba(172, 30, 43, 0.6);
--node-orange: rgba(184, 98, 0, 0.6);
--node-yellow: rgba(205, 159, 0, 0.6);
--node-green: rgba(33, 117, 18, 0.6);
--node-blue: rgba(0, 86, 168, 0.6);
--node-purple: rgba(134, 46, 156, 0.6);
--gray-9: #161821;
--gray-8: #1e1f2b;
--gray-7: #151721;
--gray-6: #3a3d4c;
--gray-5: #535763;
--gray-4: #888d94;
--gray-3: #b2b9bd;
--gray-2: #cdd4d7;
--gray-1: #eaf2f1;
--red: #ff657a;
--orange: #ff9b5e;
--green: #bad761;
--yellow: #ffd76d;
--purple: #c39ac9;
--green-light: #89b8c2;
--iceberg-red: #e27878;
--iceberg-orange: #e1a478;
--iceberg-green: #b4be82;
--iceberg-sky: #89b8c2;
--iceberg-navy: #84a0c6;
--iceberg-purple: #a093c6;
--iceberg-bg1: #151721;
--iceberg-bg2: #1e2133;
--iceberg-white: #c7c8d0;
}
::-webkit-scrollbar {
background-color: transparent;
width: 4px;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: var(--gray-5);
}
body {
color: var(--gray-3);
}
.Node-contentContainer {
border-radius: 0;
}
.set-color-label[data-color='1'],
.Node-contentContainer.mod-color-label-1 {
color: var(--iceberg-red);
background-color: rgba(0, 0, 0, 0);
font-weight: bold;
}
.is-heading1 .mod-color-label-1 {
color: var(--iceberg-bg2);
background-color: var(--iceberg-red);
}
.is-heading2 .mod-color-label-1 {
color: var(--iceberg-red);
background-color: rgba(0, 0, 0, 0);
border-left: var(--iceberg-red) solid 8px;
padding: 2px 10px;
}
.set-color-label[data-color='2'],
.Node-contentContainer.mod-color-label-2 {
color: var(--iceberg-orange);
background-color: rgba(0, 0, 0, 0);
font-weight: bold;
}
.is-heading1 .mod-color-label-2 {
color: var(--iceberg-bg2);
background-color: var(--iceberg-orange);
}
.is-heading2 .mod-color-label-2 {
color: var(--iceberg-orange);
background-color: rgba(0, 0, 0, 0);
border-left: var(--iceberg-orange) solid 8px;
padding: 2px 10px;
}
.set-color-label[data-color='3'],
.Node-contentContainer.mod-color-label-3 {
color: var(--iceberg-purple);
background-color: rgba(0, 0, 0, 0);
font-weight: bold;
}
.is-heading1 .mod-color-label-3 {
color: var(--iceberg-bg2);
background-color: var(--iceberg-purple);
}
.is-heading2 .mod-color-label-3 {
color: var(--iceberg-purple);
border-left: var(--iceberg-purple) solid 8px;
background-color: rgba(0, 0, 0, 0);
padding: 2px 10px;
}
.set-color-label[data-color='4'],
.Node-contentContainer.mod-color-label-4 {
color: var(--iceberg-sky);
background-color: rgba(0, 0, 0, 0);
font-weight: bold;
}
.is-heading1 .mod-color-label-4 {
background-color: var(--iceberg-sky);
color: var(--iceberg-bg2);
}
.is-heading2 .mod-color-label-4 {
color: var(--iceberg-sky);
border-left: var(--iceberg-sky) solid 8px;
background-color: rgba(0, 0, 0, 0);
padding: 2px 10px;
}
.set-color-label[data-color='5'],
.Node-contentContainer.mod-color-label-5 {
color: var(--iceberg-navy);
background-color: rgba(0, 0, 0, 0);
font-weight: bold;
}
.is-heading1 .mod-color-label-5 {
background-color: var(--iceberg-navy);
color: var(--iceberg-bg2);
}
.is-heading2 .mod-color-label-5 {
color: var(--iceberg-navy);
border-left: var(--iceberg-navy) solid 8px;
background-color: rgba(0, 0, 0, 0);
padding: 2px 10px;
}
.set-color-label[data-color='6'],
.Node-contentContainer.mod-color-label-6 {
color: var(--iceberg-green);
background-color: rgba(0, 0, 0, 0);
font-weight: bold;
}
.is-heading1 .mod-color-label-6 {
background-color: var(--iceberg-green);
color: var(--iceberg-bg2);
}
.is-heading2 .mod-color-label-6 {
color: var(--iceberg-green);
border-left: var(--iceberg-green) solid 8px;
background-color: rgba(0, 0, 0, 0);
padding: 2px 10px;
}
.Node-checkbox:before {
border: 1px solid var(--gray-5);
border-radius: 3px;
background: var(--gray-5);
box-shadow: none;
}
.Node-checkbox:after {
width: 10px;
height: 6px;
left: 3px;
top: 4px;
border-color: var(--gray-1);
border-width: 2px;
}
.Node-noteContainer > .Node-renderedNote {
color: var(--green-light);
/* font-family: var(--font); */
/* font-size: 12px; */
}
.Node.is-currentRoot > .Node-self .Node-contentContainer,
.Node.is-currentRoot > .Node-self.is-heading .Node-contentContainer {
color: var(--gray-1);
font-weight: bold;
/* font-size: 22px; */
}
.is-mediumFont .Node-contentContainer {
color: var(--gray-1);
font-size: 16px;
}
.Node-contentContainer > .gray-6 {
/* font-family: var(--font); */
/* font-size: 14px; */
}
.Node-content {
/* font-family: var(--font); */
/* font-size: 14px; */
}
.AppContainer,
.DocumentContainer {
background-color: var(--gray-7);
}
.Document,
.Document-bottomSpace,
.Document-rootNode,
.is-CurrentRoot,
.Node-zoomIcon,
.Node-menuIcon,
.Node-menuIcon:before,
.Node-zoomIcon:before {
background-color: var(--gray-7);
}
.Node.is-checked .node-link,
.Node.is-checked .node-tag,
.Node.is-checked .node-time,
.Node.is-checked .Node-content,
.Node.is-checked .Node-renderedContent {
color: var(--gray-5);
text-decoration: line-through;
}
.Node.is-selected {
background: var(--gray-6);
}
.CurrentLineHighlight {
background: rgba(255, 255, 255, 0.05);
}
.node-inline-image {
color: var(--green);
}
.node-inline-image:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.node-link {
color: var(--iceberg-navy);
text-decoration: none;
}
.node-link:hover {
text-decoration: underline;
}
.DocumentContainer.has-tagBackground .node-tag {
display: inline-block;
color: var(--iceberg-bg1);
background-color: var(--iceberg-green);
text-decoration: none;
border-radius: 10px;
font-weight: normal;
padding-left: 3px;
padding-right: 3px;
max-width: 600px;
}
.DocumentContainer.has-tagBackground .node-tag:hover {
background: var(--iceberg-green);
opacity: 0.7;
}
.is-mediumFont .Node-contentContainer .node-inline-item,
.is-mediumFont .Node-contentContainer .node-inline-code {
line-height: 22px;
}
.node-inline-item {
margin-left: 4px;
border-radius: 3px;
color: var(--gray-4);
background: var(--gray-9);
background: var(--iceberg-bg2);
border: var(--gray-6) solid 0.5px;
}
.node-inline-item,
.AppContainer.is-highlighting-overdue .Node.is-checked .node-time.is-overdue {
padding: 1px 3px;
}
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue {
color: var(--iceberg-red);
background: var(--gray-9);
}
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue:before,
.AppContainer.is-highlighting-overdue
.Node.is-checked
.node-time.is-overdue:before {
color: var(--iceberg-red);
}
.AppContainer.is-highlighting-overdue .Node.is-checked .node-time.is-overdue {
background: rgba(255, 255, 255, 0.05);
}
.is-cozyDensity .Node-self {
padding-top: 4px;
padding-bottom: 4px;
}
.Node.is-checklist > .Node-self.is-numbered .Node-contentContainer,
.Node.is-checklist > .Node-self.is-numbered .Node-noteContainer {
width: calc(100% - 58px);
}
.Node.is-checklist .Node-contentContainer {
width: calc(100% - 50px);
margin-left: 8px;
margin-bottom: 4px;
}
.Node.is-checklist .Node-noteContainer {
margin-left: 50px;
}
.Document-rootNode {
margin-top: 0;
}
.Node.is-currentRoot > .Node-self {
margin-bottom: 20px;
}
.node-inline-code {
font-family: var(--font);
color: var(--red);
background: rgba(255, 255, 255, 0.05);
}
.is-desktop .LeftPaneSlidebarContainer {
box-shadow: none;
}
.is-desktop .LeftPaneContainer,
.is-desktop .Pane {
background: var(--gray-8);
}
.DocumentTools-overlay {
background: var(--gray-7);
}
.is-desktop .LeftPaneSplitter:after {
border-right: 1px solid transparent;
}
.is-desktop .Pane-header {
background: var(--gray-8);
color: var(--gray-4);
}
.is-desktop .Pane-headerToolbarItem {
color: var(--gray-5);
}
.is-desktop .Pane-headerToolbarItem:hover {
color: var(--gray-3);
}
.AppHeader {
box-shadow: none;
color: var(--gray-5);
background: var(--gray-9);
border-bottom: 1px solid var(--gray-9);
}
.AppHeader-icon {
color: var(--gray-5);
border: none;
}
.AppHeader-icon:hover {
color: var(--gray-3);
box-shadow: none;
border: none;
}
.AppHeader-syncStatus {
bottom: 3px;
}
.DocumentTools-overlay {
box-shadow: none;
}
.is-desktop .LeftPaneContainer-nav {
background: var(--gray-9);
top: -1px;
width: 24px;
}
.is-desktop .LeftPaneContainer-panes {
width: calc(100% - 24px);
}
.is-desktop .LeftPaneContainer-navItem {
background: var(--gray-9);
color: var(--gray-5);
padding: 7px 0;
width: 24px;
}
.is-desktop .LeftPaneContainer-navItem.is-active,
.is-desktop .LeftPaneContainer-navItem:hover {
background: var(--gray-9);
color: var(--gray-3);
}
.pane-item.DocumentItem.is-open > .pane-item-header {
background: var(--gray-7);
color: var(--iceberg-orange);
}
.pane-item-header:hover .pane-item-icon {
color: var(--gray-1);
}
.pane-item.DocumentItem.is-open > .pane-item-header .pane-item-icon {
color: var(--iceberg-orange);
}
.pane-item-header {
color: var(--gray-4);
}
.pane-item-header:hover {
background: var(--gray-7);
color: var(--gray-1);
}
.DocumentItem.is-open .DocumentItem-title {
font-weight: normal;
}
.Pane-content {
padding: 4px 0 50px 0;
}
.Node-children {
border-color: var(--gray-6);
}
.DocumentTools-icon {
color: var(--gray-5);
}
.DocumentTools-icon:hover {
color: var(--gray-3);
}
.ContextMenu {
background: var(--gray-9);
color: var(--gray-4);
border-color: var(--gray-9);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.MenuItem:not(.MenuItem--noHighlight):not(.is-disabled):hover,
.MenuItem.mod-activated {
background: var(--gray-7);
color: var(--gray-1);
}
.MenuItem:not(.MenuItem--noHighlight):not(.is-disabled):hover .MenuItem-icon,
.MenuItem:not(.MenuItem--noHighlight):not(.is-disabled):hover
.MenuItem.mod-contains-second-level:after,
.MenuItem.mod-activated .MenuItem-icon,
.MenuItem.mod-activated .MenuItem.mod-contains-second-level:after {
color: var(--gray-1);
}
.MenuGroup + .MenuGroup {
border-color: var(--gray-6);
}
.Node-bullet:before {
color: var(--gray-4);
font-size: 13px;
}
.Node-self.is-collapsed.is-parent > .Node-bullet:before {
color: var(--iceberg-orange);
font-size: 16px;
}
.popover,
.datepicker {
background: var(--gray-9);
border: none;
border-radius: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.datepicker-dropdown:before {
border-bottom: none;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
background: var(--iceberg-red);
border-color: var(--iceberg-red);
color: #fff;
}
.datepicker .day:hover {
background: var(--gray-7);
}
.datepicker td.active,
.datepicker td.active:hover {
background: var(--iceberg-orange);
color: var(--gray-7);
}
.button.mod-primary {
color: var(--gray-7);
background: var(--iceberg-orange);
border-color: var(--iceberg-orange);
}
.button.mod-primary:hover {
background: var(--iceberg-orange);
}
input,
textarea,
select {
border-color: var(--gray-6);
color: var(--gray-1);
}
input,
textarea,
select {
border-radius: none;
background: var(--gray-8);
}
input:focus,
textarea:focus,
select:focus,
input:hover,
textarea:hover,
select:hover {
border-color: var(--gray-5);
}
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker .datepicker-switch:hover,
.datepicker .day:hover,
.datepicker tfoot th:hover,
.datepicker span:hover,
.datepicker .prev.focused,
.datepicker .next.focused,
.datepicker .datepicker-switch.focused,
.datepicker .day.focused,
.datepicker tfoot th.focused,
.datepicker span.focused {
background: var(--gray-7);
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
background: var(--iceberg-orange);
text-shadow: none;
}
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active {
color: var(--gray-7);
}
.datepicker table tr td span.active.active:hover,
.datepicker table tr td span.active:hover.active:hover {
background: var(--iceberg-orange);
color: var(--gray-7);
}
.Node-self.is-numbered > .Node-bullet:after {
background: transparent;
}
.Pane-headerText {
display: none;
}
.pane-item-toggler {
color: var(--gray-1);
}
.DocumentBreadcrumb {
display: flex;
align-items: baseline;
}
.MobileHeader-moreOption--saveNow {
display: block !important;
color: var(--iceberg-red);
}
.MobileHeader-moreOption--saved.is-disabled {
display: block !important;
color: var(--iceberg-red);
}
.MobileHeader-moreOption--synced.is-disabled {
display: block !important;
color: var(--iceberg-green);
}
.MobileHeader-moreOptions {
display: block;
top: -1px;
left: 40px;
right: auto;
background: transparent;
box-shadow: none;
}
.is-moreOptionsOpen .MobileHeader-moreOptions {
top: 5px;
left: auto;
right: 5px;
background: var(--gray-9);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.MobileHeader-moreOption {
display: none !important;
}
.is-moreOptionsOpen .MobileHeader-moreOption {
display: block !important;
}
.MobileHeader-moreOption--saveNow[style*='display: none'] {
display: none !important;
}
.MobileHeader-moreOption--saved[style*='display: none'] {
display: none !important;
}
.MobileHeader-moreOption--synced[style*='display: none'] {
display: none !important;
}
textarea.setting-text-field {
width: 200% !important;
height: 500px !important;
}
/* Hide folder and file icons */
.DocumentItem {
margin: 1px 0;
}
.BookmarkItem-header {
padding-left: 47px;
}
.FolderItem-header {
padding-left: 10px;
}
.FolderItem .DocumentItem .DocumentItem-header {
padding-left: 47px;
}
.BookmarkItem-title,
.DocumentItem-title,
.FolderItem-title {
margin-left: 0;
}
.BookmarkItem-icon,
.DocumentItem-icon,
.FolderItem-icon {
display: none;
}
.is-mobile .LeftPaneContainer-header {
background: var(--iceberg-navy);
}
.is-mobile .LeftPaneContainer-nav {
background-color: var(--iceberg-navy);
}
.is-mobile .LeftPaneContainer-navItem {
border-bottom: 3px solid var(--iceberg-navy);
}
/* https://userstyles.org/styles/177309/dynalist-candy-1-2 */
/* @import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap'); */
.AppContainer {
background-color: rgba(33,37,42,1);
}
.search-match {
background: rgb(97 97 14 / 40%);
}
.Node-bullet::before {
color: #565656;
}
.is-desktop .LeftPaneContainer, .is-desktop .Pane {
background-color: rgba(25,29,34,1) !important;
}
.LeftPaneSlidebarContainer {
background-color: rgba(25,29,34,1);
}
body {
color: rgba(189,189,200,1);
}
.Node.is-checked > .Node-self .Node-content, .Node.is-checked > .Node-self .Node-renderedContent > .node-inline-item {
text-decoration: line-through;
}
:root
{
--over: rgba(0,0,0,1);
--transparent: rgba(0,0,0,0);
--selected: rgba(0,0,0,.5);
--black: #333742;
--pink: #ee3a52;
--orange: #f1a258;
--yellow: #f3d971;
--green: #80d174;
--blue: #6ddbe6;
--purple: #e6a2e6;
}
.is-compactDensity.is-article-view .Node-self,
.is-cozyDensity.is-article-view .Node-self,
.is-comfortableDensity.is-article-view .Node-self {
padding-top: 0px;
padding-bottom: 0px;
}
/* change date colour */
.is-smallFont .Node-contentContainer .node-inline-item, .is-smallFont .Node-contentContainer .node-inline-code, .is-smallFont .Node-contentContainer .node-multiline-code {
padding: 2px;
font-weight: bold;
border: 0px;
}
.AppContainer.is-highlighting-overdue .Node .node-time,
.is-checked > .AppContainer.is-highlighting-overdue .Node .node-time
{
background-color: var(--black);
}
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue
{
color: white;
background-color: var(--pink);
padding: 2px 4px;
}
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue:before
{
color: white !important;
}
.node-inline-item, .AppContainer.is-highlighting-overdue .Node.is-checked .node-time.is-overdue
{
color: #9A9A9A;
border: 0px;
}
/* more date tweaks */
.is-largeFont .Node-contentContainer .node-inline-item
{
font-size: 0.6em;
letter-spacing: .005em;
line-height: 18px;
font-weight: bold;
color: #9A9A9A;
}
/* tweak codeblock formatting */
.node-inline-code
{
margin: 5px;
color: #f20866;
background-color: rgba(0,0,0,.1);
}
/* image tweaks */
.node-displayed-image
{
vertical-align: middle;
max-width: 750px;
max-height: 300px;
margin-bottom: 5px;
}
/* Images are shrunk to 50 pixel thumbnails */
/*
.node-displayed-image {
vertical-align: middle;
max-width: 100px;
max-height: 100px;
margin-bottom: 5px;
}
*/
/* Hovering over an image thumbnail enbiggens it */
/*
.node-displayed-image:hover {
vertical-align: middle;
max-width: 300px;
max-height: 300px;
}
*/
/* fancy inline images */
/*
.node-displayed-image {
box-shadow: 4px 4px;
}
*/
/* Set Up standard tag format */
.node-tag[title*="@"]
{
font-weight: normal;
color: white !important;
background-color: #333!important;
border-radius: 10px;
text-decoration: none;
padding: 1px 5px 1px 5px;
font-size: 0.9em;
font-weight: bolder;
opacity: 0.4;
word-wrap: normal;
white-space: nowrap;
vertical-align: middle;
}
.node-tag[title*="#"]
{
color: black !important;
background-color: #ccc!important;
border-radius: 10px;
text-decoration: none;
padding: 1px 5px 1px 5px;
font-size: 0.9em;
font-weight: bold;
opacity: 0.4;
word-wrap: normal;
white-space: nowrap;
vertical-align: middle;
}
/* Set up colored tags */
.node-tag[title*="@read"]
{
color: white !important;
background-color: var(--blue) !important;
opacity: 1;
}
.node-tag[title*="@today"]
{
color: var(--pink) !important;
background-color: var(--transparent) !important;
opacity: 1;
}
.node-tag[title*="@next"]
{
color: var(--orange) !important;
background-color: var(--transparent) !important;
opacity: 1;
}
.node-tag[title*="@waiting"]
{
color: white !important;
opacity: 1;
}
.node-tag[title*="@inProgress"]
{
color: white !important;
background-color: var(--pink) !important;
opacity: 1;
}
.node-tag[title*="@dnf"]
{
color: white !important;
opacity: .20;
}
.node-tag[title*="#💸"]
{
color: black !important;
background-color: var(--green) !important;
opacity: 1;
}
.node-tag[title*="#⭐"]
{
color: black !important;
background-color: var(--yellow) !important;
opacity: 1;
}
.node-tag[title*="#🔥"]
{
color: black !important;
background-color: var(--orange) !important;
opacity: 1;
}
.node-tag[title*="#5/5"]
{
color: white !important;
background-color: black !important;
opacity: 1;
}
.node-tag[title*="#4/5"]
{
color: white !important;
background-color: black !important;
opacity: .80;
filter: contrast(90%);
}
.node-tag[title*="#3/5"]
{
color: white !important;
background-color: black !important;
opacity: .60;
filter: contrast(80%);
}
.node-tag[title*="#2/5"]
{
color: white !important;
background-color: black !important;
opacity: .40;
filter: contrast(70%);
}
.node-tag[title*="#1/5"]
{
color: white !important;
background-color: black !important;
opacity: .20;
filter: contrast(60%);
}
.node-tag[title*="#?/5"]
{
color: white !important;
background-color: black !important;
opacity: .0;
filter: contrast(60%);
}
/* */
.DocumentContainer.is-centerDocument .Document
{
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.Node.is-currentRoot > .Node-self
{
font-weight: bold;
}
*
{
text-decoration-skip-ink: auto;
}
/* change color labels*/
.Node-self.is-heading3
{
color: #5180df;
font-feature-settings: "palt";
}
/* red */
:not(.is-heading) > .Node-contentContainer.has-color,
.is-heading2 > .Node-contentContainer.has-color
/* .is-heading3 > .Node-contentContainer.has-color */
{
background: var(--transparent);
}
.set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1
{
border-radius: 0;
padding-left: 6px !important;
border-left: 3px solid #f20866;
max-width: 70%;
}
/* orange */
.set-color-label[data-color="2"], .Node-contentContainer.mod-color-label-2
{
padding-left: 6px !important;
border-left: 3px solid var(--orange);
border-radius: 0;
max-width: 70%;
}
/* yellow */
.set-color-label[data-color="3"], .Node-contentContainer.mod-color-label-3
{
padding-left: 6px !important;
border-left: 3px solid var(--yellow);
border-radius: 0;
max-width: 70%;
}
/* green */
.set-color-label[data-color="4"], .Node-contentContainer.mod-color-label-4
{
padding-left: 6px !important;
border-left: 3px solid var(--green);
border-radius: 0;
max-width: 70%;
}
/* blue */
.set-color-label[data-color="5"], .Node-contentContainer.mod-color-label-5
{
padding-left: 6px !important;
border-left: 3px solid var(--blue);
border-radius: 0;
max-width: 70%;
}
/* purple */
.set-color-label[data-color="6"], .Node-contentContainer.mod-color-label-6
{
padding-left: 6px !important;
border-left: 3px solid var(--purple);
border-radius: 0;
max-width: 70%;
}
/* disable note space & icon */
.Node-openNote
{
display: none !important;
}
/* font */
.u-use-pref-font
{
/*
font-family: 'Montserrat', sans-serif;
letter-spacing: -.02em;
*/
}
/* font size */
.is-largeFont .Node-contentContainer
{
font-size: 21px;
}
/* always hide scrollbars but allow scrolling */
html
{
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar
{
width: 0px;
/* Remove scrollbar space */
height: 0px;
background: transparent;
/* Optional: just make scrollbar invisible */;
}
/* layout tweaks */
.DocumentItem
{
margin: 1px 0;
}
.FolderItem-header
{
padding-left: 30px;
}
.FolderItem .DocumentItem .DocumentItem-header
{
padding-left: 30px;
}
.DocumentItem-title,
.FolderItem-title
{
margin-left: 0;
}
.DocumentItem-icon,
.FolderItem-icon,
.BookmarkItem-icon
{
display: none;
}
.AppHeader
{
background-color: var(--transparent);
box-shadow: none;
}
.LeftPaneSplitter
{
display: none;
}
.is-desktop .Pane-header,
.is-desktop .popup-message-banner
{
background-color: rgba(0, 0, 0, 0);
}
.is-desktop .LeftPaneContainer-navItem
{
background: rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
}
.is-desktop .LeftPaneContainer-navItem.is-active, .is-desktop .LeftPaneContainer-navItem:hover
{
color: #4e4e4e;
background: rgba(0,0,0,0);
}
.is-desktop .LeftPaneSlidebarContainer
{
box-shadow: none;
}
.is-desktop .LeftPaneContainer-nav
{
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
/* visibility: hidden; */
}
.Pane-header
{
visibility: hidden;
}
.is-compactDensity.is-article-view .Node-self
{
padding-top: 5px;
padding-bottom: 5px;
}
.is-desktop .main-container
{
margin-top: -32px;
}
.is-desktop .DocumentTools
{
margin-top: 32px;
}
.DocumentTools-overlay
{
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
}
.DocumentTools-icon
{
}
.DocumentContainer
{
height: calc(100% + 32px) !important;
}
.AppHeader-icon
{
}
.AppHeader-icon:hover
{
border: none;
box-shadow: none;
}
.header-sync-state.mod-synced,
.header-sync-state.mod-saved,
.header-sync-state.mod-sync-now,
.header-sync-state.mod-syncing
{
visibility: visible;
}
textarea.setting-text-field
{
width: 200% !important;
height: 500px !important;
}
.Node-checkbox:before {
background: #f5f5f5;
border: 1.5px solid #999;
border-radius: 5px;
background-color: transparent;
}
.Node-checkbox {
margin-right: 4px;
}
.Node.has-checkbox > .Node-self .Node-contentContainer, .Node.has-checkbox > .Node-self .Node-noteContainer {
width: calc(100% - 50px);
}
.is-smallFont .Node-self.is-heading3 .Node-contentContainer {
border-bottom: #777 solid 1px;
padding-bottom: 3px;
border-radius: 0;
}
:root
{
--transparent: rgba(0,0,0,0);
--background: #161821;
--linenr-bg: #1e2132;
--linenr-fg: #444b71;
--status-line: #5e6379;
--foreground: #a1a8bc;
--line-highlight: rgba(14, 42, 66);
--line-highlight-border: rgba(29,62,83);
--pink: #E27878;
--orange: #E2A478;
--green: #B4BE82;
--blue: #84a0c6;
--sky-blue: #89B8C2;
--purple: #A093C7;
}
a {
text-decoration-color: var(--status-line);
}
.AppContainer,
.Node.is-currentRoot > .Node-self {
background-color: var(--background);
color: var(--foreground);
}
.Node-self.is-heading {
color: var(--foreground);
}
.Node.is-currentRoot > .Node-self
{
font-weight: bold;
}
.is-desktop .Pane,
.is-desktop .LeftPaneContainer-nav,
.is-desktop .Pane-header {
background-color: var(--linenr-bg);
color: var(--linenr-fg);
}
.Node.is-checked .Node-content {
color: var(--status-line);
}
.Node-bullet::before {
color: var(--linenr-fg);
}
.Node-self.is-collapsed.is-parent > .Node-bullet:before {
color: var(--status-line);
}
.CurrentLineHighlight {
background: var(--line-highlight);
z-index: -1;
}
.is-smallFont .Node-contentContainer .node-inline-code {
color: var(--green);
background: var(--transparent);
font-size: 16px;
line-height: 20px;
}
:not(.is-heading) > .Node-contentContainer.has-color,
.is-heading1 > .Node-contentContainer.has-color,
.is-heading2 > .Node-contentContainer.has-color,
.is-heading3 > .Node-contentContainer.has-color
{
background: var(--transparent);
}
/* .Node-contentContainer.has-color
{
padding: 0;
} */
.set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1
{
border-radius: 0;
padding-left: 6px !important;
border-left: 2.5px solid var(--pink);
max-width: 70%;
}
/* .mod-color-label-1 > div > span {
border-bottom: 2.5px solid var(--pink);
padding-right: 2px;
} */
/* orange */
.set-color-label[data-color="2"], .Node-contentContainer.mod-color-label-2
{
padding-left: 6px !important;
border-left: 2.5px solid var(--orange);
border-radius: 0;
max-width: 70%;
}
/* .mod-color-label-2 > div > span {
border-bottom: 2.5px solid var(--orange);
padding-right: 2px;
} */
/* yellow */
.set-color-label[data-color="3"], .Node-contentContainer.mod-color-label-3
{
padding-left: 6px !important;
border-left: 2.5px solid var(--sky-blue);
border-radius: 0;
max-width: 70%;
}
/* .mod-color-label-3 > div > span {
border-bottom: 2.5px solid var(--sky-blue);
padding-right: 2px;
} */
/* green */
.set-color-label[data-color="4"], .Node-contentContainer.mod-color-label-4
{
padding-left: 6px !important;
border-left: 2.5px solid var(--green);
border-radius: 0;
max-width: 70%;
}
/* .mod-color-label-4 > div > span {
border-bottom: 2.5px solid var(--green);
padding-right: 2px;
} */
/* blue */
.set-color-label[data-color="5"], .Node-contentContainer.mod-color-label-5
{
padding-left: 6px !important;
border-left: 2.5px solid var(--blue);
border-radius: 0;
max-width: 70%;
}
/* .mod-color-label-5 > div > span {
border-bottom: 2.5px solid var(--blue);
padding-right: 2px;
} */
/* purple */
.set-color-label[data-color="6"], .Node-contentContainer.mod-color-label-6
{
padding-left: 6px !important;
border-left: 2.5px solid var(--purple);
border-radius: 0;
max-width: 70%;
}
/* .mod-color-label-6 > div > span {
border-bottom: 2.5px solid var(--purple);
padding-right: 2px;
} */
/* change date colour */
.is-smallFont .Node-contentContainer .node-inline-item,
.is-smallFont .Node-contentContainer .node-multiline-code {
font-weight: bold;
font-size: 14px;
border: 0.5px solid var(--status-line);
padding: 0 10px;
opacity: 0.8;
color: var(--status-line);
/* background: var(--transparent); */
}
.AppContainer.is-highlighting-overdue .Node .node-time,
.is-checked > .AppContainer.is-highlighting-overdue .Node .node-time
{
background: var(--transparent);
}
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue
{
border: 0.5px solid var(--pink);
color: var(--pink);
background: var(--transparent);
}
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue:before
{
color: var(--pink);
}
.node-inline-item, .AppContainer.is-highlighting-overdue .Node.is-checked .node-time.is-overdue
{
color: var(--status-line);
}
.Node-checkbox:before {
background: #f5f5f5;
border: 1px solid var(--foreground);
border-radius: 5px;
background-color: transparent;
}
.Node-checkbox {
margin-right: 4px;
}
.Node.has-checkbox > .Node-self .Node-contentContainer, .Node.has-checkbox > .Node-self .Node-noteContainer {
width: calc(100% - 50px);
}
.is-hovering > .node-tag {
background: var(--transparent);
}
.node-tag[title*="@"]
{
color: var(--sky-blue);
border-radius: 10px;
text-decoration: none;
/* padding: 1px 5px 1px 5px; */
font-weight: bolder;
}
.node-tag[title*="#"]
{
color: var(--blue);
border-radius: 10px;
text-decoration: none;
/* padding: 1px 5px 1px 5px; */
font-weight: bold;
}
.node-tag[title*="#important"]
{
color: var(--pink) !important;
}
.node-tag[title*="#new"]
{
color: var(--orange) !important;
}
.node-tag[title*="#---"]
{
visibility: hidden;
position: relative;
margin-right: -50px;
}
.node-tag[title*="#---"]::before
{
visibility: visible;
content: "~~~~~~~~~~~~~~~~~~~~~~~~~~";
color: var(--blue) !important;
background: var(--transparent);
}
/* expand custom css textarea */
textarea.setting-text-field
{
width: 200% !important;
height: 500px !important;
}
/* hide file icons */
.DocumentItem-icon.pane-item-icon,
.BookmarkItem-icon.pane-item-icon {
display: none;
}
.LeftPaneSlidebarContainer,
.LeftPaneSplitter,
.AppHeader,
.DocumentTools-icon
{
opacity: 0;
}
.LeftPaneSlidebarContainer:hover,
.LeftPaneSplitter:hover,
.AppHeader:hover,
.DocumentTools-icon:hover
{
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.DocumentBreadcrumb {
color: var(--status-line);
}
.Node.is-checked > .Node-self > .Node-checkbox:before {
background: var(--linenr-fg);
}
.Node.is-checked > .Node-self .Node-renderedContent {
text-decoration: line-through solid var(--status-line);
color: var(--status-line);
}
.Node-checkbox:after {
border: 2px solid var(--foreground);
border-top: none;
border-right: none;
}
.node-bold {
color: var(--orange);
/* background: linear-gradient(transparent 80%, var(--pink) 0%); */
}
.node-italics {
font-weight: bold;
font-style: normal;
color: var(--sky-blue);
/* background: linear-gradient(transparent 80%, var(--sky-blue) 0%); */
}
:root {
--light1: #ECEFF4;
--light2: #E5E9F0;
--light3: #D8DEE9;
--dark1: #2E3440;
--dark2: #3B4252;
--dark3: #434C5E;
--dark4: #4C566A;
--frost1: #8FBCBB;
--frost2: #88C0D0;
--frost3: #81A1C1;
--frost4: #5E81AC;
--red: #BF616A;
--orange: #D08770;
--yellow: #EBCB8B;
--green: #A3BE8C;
--purple: #B48EAD;
}
/* Expand custom CSS field */
textarea.setting-text-field {
width: 200% !important;
height: 500px !important;
}
/* entire setting */
.u-use-pref-font {
font-family: "Helvetica", "Hiragino Sans";
font-weight: 300;
}
.is-comfortableDensity .Node-self {
padding-top: 10px;
}
.Node-bullet::before {
color: var(--dark4);
}
.Node-self.is-collapsed.is-parent>.Node-bullet:before {
color: var(--frost4);
font-size: 14px;
}
.node-link {
color: var(--light2);
}
.node-bold {
font-weight: 800;
}
.node-italics {
font-style: normal;
font-weight: 400;
}
.node-inline-code {
color: var(--green);
background-color: var(--dark4);
}
/* tag */
.is-hovering>.node-tag {
background: var(--transparent);
}
.node-tag {
text-decoration: none;
font-weight: bold;
}
.node-tag[title*="@"] {
color: var(--purple);
}
.node-tag[title*="#"] {
color: var(--green);
}
.node-tag[title*="#---"] {
visibility: hidden;
position: relative;
margin-right: -50px;
}
.node-tag[title*="#---"]::before {
visibility: visible;
content: "----------------------------------------------------";
color: var(--light1) !important;
background: var(--transparent);
}
.AppContainer,
.Node.is-currentRoot>.Node-self {
background: var(--dark1);
color: var(--light3);
}
.Node.is-currentRoot>.Node-self {
font-weight: bold;
}
.DocumentBreadcrumb {
color: var(--frost4);
}
.CurrentLineHighlight {
z-index: -1;
}
.CurrentLineHighlight .Node-renderedContent {
color: var(--light1);
}
.DocumentItem-icon.pane-item-icon,
.BookmarkItem-icon.pane-item-icon {
display: none;
}
.LeftPaneSlidebarContainer,
.LeftPaneSplitter,
.AppHeader,
.DocumentTools-icon {
opacity: 0;
}
.LeftPaneSlidebarContainer:hover,
.LeftPaneSplitter:hover,
.AppHeader:hover,
.DocumentTools-icon:hover {
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.DocumentTools-overlay {
background-color: transparent;
box-shadow: none;
}
/* .is-smallFont .Node-contentContainer .node-inline-item,
.is-smallFont .Node-contentContainer .node-multiline-code {
font-weight: bold;
font-size: 14px;
border: 0.5px solid var(--status-line);
padding: 0 10px;
opacity: 0.8;
color: var(--status-line);
background: var(--transparent);
} */
.AppContainer.is-highlighting-overdue .Node .node-time,
.is-checked>.AppContainer.is-highlighting-overdue .Node .node-time {
background: var(--transparent);
}
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue {
border: 0.5px solid var(--red);
color: var(--red);
background: var(--transparent);
}
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue:before {
color: var(--red);
}
/* 見出し */
:not(.is-heading)>.Node-contentContainer.has-color,
.is-heading1>.Node-contentContainer.has-color,
.is-heading2>.Node-contentContainer.has-color,
.is-heading3>.Node-contentContainer.has-color {
background: var(--transparent);
}
.is-heading3>.Node-contentContainer {
border-bottom: 1px var(--dark4) solid;
}
/* red */
.Node-contentContainer.mod-color-label-1 {
padding-left: 0px !important;
font-weight: 500;
color: var(--frost1);
}
/* orange */
.Node-contentContainer.mod-color-label-2 {
padding-left: 0px !important;
font-weight: 500;
color: var(--frost2);
}
/* yellow */
.Node-contentContainer.mod-color-label-3 {
padding-left: 0px !important;
font-weight: 500;
color: var(--frost3);
}
/* green */
.Node-contentContainer.mod-color-label-4 {
padding-left: 0px !important;
font-weight: 500;
color: var(--frost4);
}
/* frost */
.Node-contentContainer.mod-color-label-5 {
padding-left: 0px !important;
font-weight: 500;
color: var(--orange);
}
/* purple */
.Node-contentContainer.mod-color-label-6 {
padding-left: 0px !important;
font-weight: 500;
color: var(--yellow);
}
/* checkbox */
.Node-checkbox:before {
background: transparent;
border: 1px solid var(--light3);
border-radius: 5px;
background-color: transparent;
}
.Node-checkbox {
margin-right: 3px;
}
.Node.has-checkbox>.Node-self .Node-contentContainer, .Node.has-checkbox>.Node-self .Node-noteContainer {
width: calc(100% - 50px);
}
.Node.is-checked>.Node-self .Node-content, .Node.is-checked>.Node-self .Node-renderedContent {
color: var(--frost4);
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment