darkDynalist.user.css

/* ==UserStyle==
@name           Dark Dynalist by keystoneclimber
@namespace      http://www.brandontarr.com
@version        1.0.2
@description    dark style for Dynalist
@author         keystoneclimber
@homepageURL    https://github.com/keystoneclimber/stylus_scripts/
==/UserStyle== */

@-moz-document url-prefix("https://dynalist.io/") {
:root {

/* --color-background: #191919;   */
--color-background: #111111; 
--color-flyout: #171717;
--color-tooltip: #222222;
--color-button: #262626;
--color-dropdown: #262626;  
--color-button-highlight: #343434;
--color-flyout-highlight: #343434;
--color-checkboxes: #343434;
--color-checkmarks: #A7A7A7;
--color-borders: #444444;  
--color-button-text: #A7A7A7;
--color-button-hover: #7A7A7A;
--color-button-active: #000000;  
--color-text-subdued: #666666;
--color-text-menus: #A4A4A4;  
--color-text-names: #A4A4A4;
--color-text-hover: #BBBBBB; 
--color-text-heading: #EEEEEE;  
--color-text-content: #EEEEEE;
--color-text-title: #A1BADF;
--color-id: chartreuse;
  
}

/* 
To do:
  task list title disapear on left hand pane resize
*/


/* -------------------------------- */
/* general                          */
/* -------------------------------- */

/* linked pages... account settings, tell a friend, download the apps,  */
html, body, .static-header, .download-container {
  background: var(--color-background);
}

li, p {
  color: var(--color-text-menus);
}

/* tutorial */
.popover, .datepicker {
  background: var(--color-dropdown);
  border: 1px solid var(--color-dropdown);
}

/* tooltip popup dialog bubble */
.tooltip:before {
  background-color:  var(--color-tooltip);
  color: var(--color-text-menus);
}

/* tooltip popup dialog bubble arrow */
.tooltip:before, .tooltip:after {
  border-bottom: 5px solid var(--color-tooltip);
}

/* download backup button */
.button {
  background-color: var(--color-button);
  color: var(--color-button-text);
  border: none;
}

.button:hover {
  background-color: var(--color-button-highlight);
}


/* -------------------------------- */
/* header                           */
/* -------------------------------- */

/* header color and box shadow */
.AppHeader {
  background-color: var(--color-background);  
/*   box-shadow: none; */
/*     box-shadow: 0 1px 3px var(--color-background); */
    box-shadow: 0 1px 3px rgb(0 0 0 / 100%);
}

/* remove padding before header */
.DocumentBreadcrumb {
  padding: 0;
  min-height: 35px;
/*     min-height: 0px; */
}

/* hide header icons... sync status, what's new, settings, view options */
.AppHeader-syncStatus, .AppHeader-notifications, .DocumentTools-filterView:before {
  display: none;
}

/* menu button */
.AppHeader-icon {
  color: var(--color-button-text);
}

/* menu button */
.AppHeader-icon.active {
  background-color: var(--color-flyout-highlight);
  box-shadow: none;
}

/* menu button */
.AppHeader-icon:hover {
/*   border: 1px solid var(--color-button); */
  color: var(--color-button-hover);
  border: none;
}


/* -------------------------------- */
/* search                     */
/* -------------------------------- */

/* search button */
.DocumentTools-overlay {
  background-color: var(--color-background);
  box-shadow: none;
}

/* search button icon */
.DocumentSearch-icon {
  position: absolute;
  right: -55px;
}

/* hide bookmark search star */
.DocumentTools-bookmarkSearch:before {
  display: none;
}

/* focus text color */
input:focus, textarea:focus {
  color: var(--color-text-heading);
}

/* remove focus highlight border */
input:focus, textarea:focus, select:focus, input:hover, textarea:hover, select:hover {
  border-color: var(--color-background);
}

/* search background */
.DocumentSearch {
  background: var(--color-dropdown);
  right: -47px;
}

/* search clear X button */
.DocumentSearch-clear {
  color: var(--color-button-hover);
  right: -50px;
}

/* search tip */
.search-tip {
  right: -45px;
}

/* tooltip search all documents hover color */
.search-tip-section.mod-global-search .search-tip-header:hover {
  background-color: var(--color-button-highlight);
}

/* tooltip divider color */
.search-tip-section.mod-filters {
  border-top: 1px solid var(--color-borders);
}

/* tooltip arrow */
.search-tip-arrow:after, .search-tip-arrow-shadow:after {
  background-color: var(--color-dropdown);
}

/* tooltip arrow */
.search-tip-arrow-shadow:after {
  box-shadow: -1px -1px 0 0 var(--color-dropdown), -1px -1px 2px rgba(0, 0, 0, 0.08);
}

/* tooltip arrow */
.search-tip-arrow-shadow {
  background: var(--color-dropdown);
}




/* -------------------------------- */
/* context menu                     */
/* -------------------------------- */
.ContextMenu {
  background-color: var(--color-flyout); 
  border: 1px solid var(--color-flyout); 
}

.MenuGroup {
  border-top: 1px solid var(--color-flyout) !important;
}

.MenuItem {
  color: var(--color-text-menus);
}

.MenuItem:not(.MenuItem--noHighlight):not(.is-disabled):hover, .MenuItem.mod-activated {
  background: var(--color-flyout-highlight);
  color: var(--color-text-menus);
}



/* -------------------------------- */
/* settings menu                    */
/* -------------------------------- */

.settings-nav-item.js-switch-setting-tab {
  background-color: var(--color-button);
  color: var(--color-text-heading);
}

.settings-nav-item.js-switch-setting-tab.is-selected {
  background-color: var(--color-button-highlight);
}

h1, h3, .setting, .settings-show-advanced-options-link {
  color: var(--color-text-heading);
}

.modal {
  background-color: var(--color-flyout);
  box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.15);
}

.is-desktop .setting, .is-desktop .setting-section-title {
  border-bottom: 1px solid var(--color-borders);
}

input, textarea, select {
  background-color: var(--color-dropdown);
  border: 1px solid var(--color-dropdown);
  color: var(--color-text-heading);
}

.keymap-shortcut-name {
  color: var(--color-text-menus);
}

.keymap-shortcut-combo.js-change-shortcut {
  background: var(--color-button);
  color: var(--color-text-heading);
}


/* -------------------------------- */
/* left hand side pane               */
/* -------------------------------- */

/* hide old title */
.Pane-headerText {
  visibility: hidden;
}

/* add Task Lists: title */
.Pane-headerText:before {
  content:  "Task Lists:";
  visibility: visible;
  color: var(--color-text-title);
}

/* hide open file & capture to inbox icons */
.js-open-file-finder, .js-open-inbox-capture {
  display: none;  
}

/* hide left nav pane */
.LeftPaneContainer-nav {
  width: 0 !important;
}

/* hide file icons */
.DocumentItem-icon.pane-item-icon {
  display: none;
}

/* collapsed file pane */
.LeftPaneSlidebarContainer.is-closed {
  width: 0px !important;
}


/* remove left padding */
.FolderItem-header, .DocumentItem-header, .BookmarkItem-header {
  display: inline-block;
  padding: 2px 5px 2px 5px;
}
  
/* maximize left-hand list in pane */
.LeftPaneContainer-panes {
  position: relative !important;
  width: 100% !important;
}

/* right hand resizing border */
.is-desktop .LeftPaneSplitter:after {
  border-right: 1px solid var(--color-flyout);
}

/* header */
.Pane-header {
  background: var(--color-background) !important; 
}

/* body */
.Pane {
  background-color: var(--color-background) !important; 
}

/* list items */
.pane-item-header {
  color: var(--color-text-names);
}

/* currently selected list item */
.pane-item.DocumentItem.is-open > .pane-item-header {
  background-color: var(--color-background); 
  color: var(--color-text-heading);
}

/* list item hover */
.pane-item-header.hover, .TagPane-tags .pane-item-header:hover {
  color: var(--color-text-hover);
  background: var(--color-background);
}

/* renaming lists */
.pane-item-title.is-beingEdited {
    background: var(--color-background);
}


/* -------------------------------- */
/* right hand shortcuts flyout      */
/* -------------------------------- */

/* shortcuts */
.ShortcutHelp {
  background-color: var(--color-background); 
  color: var(--color-text-subdued);
}

/* formatting tags */
.KeyboardShortcut, .node-inline-code {
  background: var(--color-background);   
}

/* inline image links */
.node-inline-item {
  background-color: var(--color-background); 
  border-color: var(--color-background) 
}


/* -------------------------------- */
/* body                             */
/* -------------------------------- */

.Document-rootNode.u-use-pref-font.is-calibriLight {
  font-size: 13px;
/*   font-family: "Calibri Light"; */
}
    
/* get rid of redundant task list name header */
div.Document-rootNode.u-use-pref-font.is-calibriLight > div > div.Node-self.is-noteEmpty.is-parent.is-noteRendered > div.node-line.Node-contentContainer {
  display: none;
}
    
    
/* main body padding */
.DocumentContainer {
    padding: 0;
    padding-right: 10px
}

/* checkbox */
.Node-checkbox:before {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    border-radius: 1px;
}
    
/* body top border */
.main-container {
  background: var(--color-borders);
}

/* body background */
.normal-view {
  background: var(--color-background);
  color: var(--color-text-content);
}


/* remove list and heading padding */
.Document, .Document-rootNode {
  margin: 0 !important;
  border: none !important;
}
    
/*     remove borders between line items to decrease spacing */
.Node {
    border-top: none;
    border-bottom: none;
}

/* remove margin between title and list */
.is-parent {
  margin-bottom: 0 !important;
}

/* hide bookmark star, line item mod menu & zoom icon */
.node-line-strict.node-hover {
  display: none !important; 
}

/* hide bullets while retaining move functionality*/
.Node-bullet:before {
  display: none;
}

/* hide indent indicator */
.Node-children {
  border-left: none;
}

/* reduce list left-hand padding */
.Document-rootNode {
  padding: 0 0px !important;
}

.Node-checkbox:before {
  border: 1px solid #444;
  background: linear-gradient(#262626 0%, #343434 40%, #343434 100%);
  box-shadow: inset 0 1px 1px #181818;
}
}