-
-
Save jaykovski/7056e59ef89cd3c4c8285c63d49d6347 to your computer and use it in GitHub Desktop.
Dynalist Custom CSS #css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
: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: #282a3b; | |
--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: #9cd1bb; | |
} | |
::-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); | |
} | |
.set-color-label[data-color='1'], | |
.Node-contentContainer.mod-color-label-1 { | |
background-color: var(--node-red); | |
} | |
.set-color-label[data-color='2'], | |
.Node-contentContainer.mod-color-label-2 { | |
background-color: var(--node-orange); | |
} | |
.set-color-label[data-color='3'], | |
.Node-contentContainer.mod-color-label-3 { | |
background-color: var(--node-yellow); | |
} | |
.set-color-label[data-color='4'], | |
.Node-contentContainer.mod-color-label-4 { | |
background-color: var(--node-green); | |
} | |
.set-color-label[data-color='5'], | |
.Node-contentContainer.mod-color-label-5 { | |
background-color: var(--node-blue); | |
} | |
.set-color-label[data-color='6'], | |
.Node-contentContainer.mod-color-label-6 { | |
background-color: var(--node-purple); | |
} | |
.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-3); | |
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(--green); | |
text-decoration: none; | |
} | |
.node-link:hover { | |
text-decoration: underline; | |
} | |
.node-tag { | |
display: inline-block; | |
color: var(--orange); | |
text-decoration: none; | |
border-radius: 3px; | |
font-weight: normal; | |
padding-left: 3px; | |
padding-right: 3px; | |
max-width: 600px; | |
} | |
.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); | |
} | |
.node-inline-item, | |
.AppContainer.is-highlighting-overdue .Node.is-checked .node-time.is-overdue { | |
border: none; | |
padding-left: 3px; | |
padding-right: 3px; | |
} | |
.AppContainer.is-highlighting-overdue .Node .node-time.is-overdue { | |
border: none; | |
color: var(--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(--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; | |
} | |
.DocumentContainer.has-tagBackground .node-tag { | |
background: transparent; | |
} | |
.DocumentContainer.has-tagBackground .node-tag:hover { | |
background: rgba(255, 255, 255, 0.05); | |
} | |
.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(--yellow); | |
} | |
.pane-item-header:hover .pane-item-icon { | |
color: var(--gray-1); | |
} | |
.pane-item.DocumentItem.is-open > .pane-item-header .pane-item-icon { | |
color: var(--yellow); | |
} | |
.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(--yellow); | |
font-size: 18px; | |
} | |
.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(--red); | |
border-color: var(--red); | |
color: #fff; | |
} | |
.datepicker .day:hover { | |
background: var(--gray-7); | |
} | |
.datepicker td.active, | |
.datepicker td.active:hover { | |
background: var(--yellow); | |
color: var(--gray-7); | |
} | |
.button.mod-primary { | |
color: var(--gray-7); | |
background: var(--yellow); | |
border-color: var(--yellow); | |
} | |
.button.mod-primary:hover { | |
background: var(--yellow); | |
} | |
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(--yellow); | |
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(--yellow); | |
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(--red); | |
} | |
.MobileHeader-moreOption--saved.is-disabled { | |
display: block !important; | |
color: var(--red); | |
} | |
.MobileHeader-moreOption--synced.is-disabled { | |
display: block !important; | |
color: var(--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; | |
} | |
/* Hide folder and file icons */ | |
/* .DocumentItem { | |
margin: 1px 0; | |
} | |
.FolderItem-header { | |
padding-left: 10px; | |
} | |
.FolderItem .DocumentItem .DocumentItem-header { | |
padding-left: 47px; | |
} | |
.DocumentItem-title, | |
.FolderItem-title { | |
margin-left: 0; | |
} | |
.DocumentItem-icon, | |
.FolderItem-icon { | |
display: none; | |
} */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Looks great on desktop except the breadcrumb which is hardly readable. On Android, it's displayed as dark font on dark background, not legible at all.