styles.less

@base-background-color: rgba(30, 32, 34, 1.0);
@dark-background-color: rgba(44, 45, 47, 1.00);
@base-text-color: rgba(221, 221, 221, 1.0);
@markdown-formatting-text: rgba(91, 91, 91, 1.0);
@selected-text-background-color: rgba(55, 63, 73, 1.00);
@selected-note-color: rgba(25, 25, 28, 1.0);
@title-text-color-app: rgba(173, 192, 200, 1.00);
@title-text-color-text: rgba(203, 219, 229, 1.00);
@label-color: rgba(111, 115, 115, 1.0);
@code-inline-color: rgba(255, 254, 255, 1.00);
@code-keyword: rgba(174, 237, 218, 1.0);
@light-blue: rgba(74, 168, 251, 1.0);
@code-link: rgba(107, 202, 251, 1.0);
@code-define: rgba(209, 160, 105, 1.0);
@code-variable: rgba(255, 205, 120, 1.0);
@code-background: rgba(36, 36, 36, 1.00);
@code-border: rgba(87, 87, 87, 1.00);
@code-color: rgba(169, 183, 198, 1.0);
@code-property: rgba(218, 136, 179, 1.0);
@code-string: rgba(230, 119, 47, 1.00);
@code-comment: rgba(127, 140, 151, 1.0);
@code-number: rgba(170, 201, 127, 1.0);
@code-operator: rgba(23, 168, 219, 1.00);
@code-font: Menlo-Regular;
@code-font-size: 12px;
@note-list-font: AvenirNext-Medium;
@note-list-font-size: 14px;
@note-font: "Helvetica Neue";
@note-font-size: 14px;

// AvenirNext-Medium AvenirNext-Regular


.note-list-header {
    background-color: @base-background-color;

    .note-list-header-title-bar {
        display: none; //hide the notebook title
    }
}

.note-list-search-bar {
  background-color: @base-background-color;

  .ui.input>input {
    background-color: @dark-background-color
  }
}

.note-tags-bar-input .ui.input > input {
  background-color: @base-background-color;
  color: @label-color
}

.tag-list .ui.label, .note-tags-bar-item .ui.label {
  padding: 4px 8px 4px 8px;  //padding: 6px 8px 6px 8px;
  font-size: .9em;
  border-radius: 4px;
}


// top left
.app-control-view {
  background-color: @dark-background-color
}

.sidebar-layout {
  border-right: 1px solid #000000;
  background-color: @dark-background-color;
}

.sidebar-workspace-title {
  .content {
    color: rgba(163, 164, 164, 1.0);
  }
}

//notebooks sidebar
// .sidebar-menu {
//   background-color: @dark-background-color;
// }

.sidebar-menu-item {
  color: rgba(163, 164, 164, 1.0);
  font-family: AvenirNext-Regular;

  .disclosure {
    display: none;
    border: 0;
  }

  .disclosure > .disclosure-label {
    display: none;
  }
  .disclosure > i.disclosure-icon.icon {
    display: none;
  }

  .accessory-count {
    opacity: 1;
  }
}

.sidebar-menu-item.selectable {
  color: rgba(163, 164, 164, 1.0)
}

.sidebar-menu-item.active {
  background-color: rgba(39, 106, 179, 1.00);
  color: rgba(217, 216, 218, 1.00);
  border-radius: 6px;
}

.sidebar-menu-book-list-item.sidebar-menu-item.with-disclosure:hover .accessory-count {
  display: inline;
}

.note-list-bar {
  background-color: @base-background-color;
  color: rgb(169, 183, 198);
  // font-family: @note-list-font;
  font-family: @note-font;
  font-size: @note-list-font-size;
}

.sidebar-sync-status-view {
  // display: none;
  // border-top: 1px solid #000000;
}

/* Border = Accent Text Color */
.note-list-bar-item {
  border-right: 1px solid #000000;

  .note-list-item-view.active {
    background-color: @selected-note-color;
    border-left: 5px solid @light-blue;
    color: rgb(169, 183, 198);
    // font-size: 16px;
  }

  .note-list-item-view {
    background-color: @base-background-color;
    color: rgb(169, 183, 198);
    border-bottom: 1px solid #000000;
    padding: 2px 0px 10px 20px;

    .content {
      .header {
        // margin: 12px 12px 12px 0;
        font-weight: 400;
        margin: 8px 12px 8px 0px;
        font-size: 1.10em;
        color: @title-text-color-app;
      }

      .description {
        // description text, non-focused notes

        .text {
          color: @label-color;
          white-space: normal;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          line-height: 1.3em;
        }

        .date {
          display: none; //hide modified date
        }
      }
    }
  }

  .note-list-item-view.active {
    box-shadow: none !important;
  }

  .note-list-item-view.active.focused {
    padding: 2px 0px 10px 15px; // above -5 for blue mark
  }
}

.editor-blank-slate {
  background-color: @base-background-color;
  opacity: 1;
}

.editor-layout {
  border-left: 1px solid #000000;

  // note info (three vertical dots)
  .editor-header-layout {
    background-color: @base-background-color;
  }
}

// note title, note category
.editor-header-title-input.ui.input .editor-header-top-spacer, .editor-header-title-input.ui.input input[type='text'], .editor-meta-layout {
  background-color: @base-background-color;
}

button.mde-toolbar-item {
  width: 1.5em;
  height: 1.5em;
}

.mde-search-bar {
  background-color: @code-background;
  width: 95%;

  .search-fields {
    .search-text-boxes {
      input {
        background-color: @dark-background-color;
      }
    }
  }
}

.editor-layout {
  background-color: @base-background-color;
}

.editor-floating-actions {
  right: 10px;

  .background {
    background-color: @base-background-color;
  }
}


//toolbar for adding bold, italics, etc
.mde-toolbar {
  background-color: @base-background-color;
  opacity: 1;
}

// markdown preview/regular view
.mde-preview {
  font-size: @note-font-size;
  border-left: 1px;
  background-color: @base-background-color;
  font-family: @note-font;
  padding-left: 16px;
  padding-right: 16px;
  color: inherit !important;

  a {
    color: @code-link !important;
  }

  code {
    background-color: @code-background;
    border: 1px solid @code-border;
    padding-left: 8px;
    padding-right: 8px;
    color: @code-inline-color;
    font-size: @code-font-size;
    font-family: @code-font;
  }

  pre {
    background: @code-background !important;
    border: 1px solid @code-border;
    padding: 8px !important;
    border-radius: 0px !important;

    code {
      background: @code-background;
      // border-radius: 2px;
      font-family: @code-font;
      font-size: @code-font-size;
      word-spacing: 2px;
      // padding-left: 10px;
      // padding-right: 10px;
    }
  }

  .cm-keyword {
    color: @code-keyword !important;
  }

  .cm-type {
    color: @code-keyword !important;
  }

  .cm-def {
    color: @code-define !important;
  }

  .cm-property, .cm-def {
    color: @code-keyword !important;
  }

  .cm-string {
    color: @code-string !important;
  }

  .cm-quote {
    color: inherit;
  }

  blockquote {
    border-left: 2px solid @light-blue !important;
    color: inherit !important;
    padding-left: 15px;
  }

  .cm-variable {
    color: inherit !important;
  }

  .cm-atom {
    color: inherit !important;
  }

  .cm-number {
    color: @code-number !important;
  }

  .cm-comment {
    color: @code-comment !important;
  }

  .cm-operator {
    color: @code-operator !important;
  }
}

.mde-cm-wrapper {
  // note area
  .CodeMirror {
    background-color: @base-background-color;
    font-family: @note-font;
    font-size: @note-font-size;
    padding-left: 16px;
    padding-right: 16px;

    .CodeMirror-code {
      .cm-header-1 {
        font-size: 1.5em;
        font-weight: normal;
        color: @title-text-color-text;
      }

      .cm-header-2 {
        font-size: 1.3em;
        font-weight: normal;
        color: @title-text-color-text;
      }

      .cm-header-3 {
        font-size: 1.1em;
        font-weight: normal;
        color: @title-text-color-text;
      }
      .cm-header-4 {
        font-size: 1.05em;
        font-weight: normal;
        color: @title-text-color-text;
      }
    }

    .list-line.list-line-1.CodeMirror-line {
      padding-left: 1.5em;
      text-indent: -1.3em;
    }

    .list-line.list-line-2.CodeMirror-line {
      padding-left: 3em;
      text-indent: -1.3em;
    }

    .list-line.list-line-3.CodeMirror-line {
      padding-left: 4.5em;
      text-indent: -1.3em;
    }

    .list-line.list-line-4.CodeMirror-line {
      padding-left: 6em;
      text-indent: -1.3em;
    }

    .list-line.list-line-5.CodeMirror-line {
      padding-left: 7.5em;
      text-indent: -1.3em;
    }

    .list-line.list-line-6.CodeMirror-line {
      padding-left: 9em;
      text-indent: -1.3em;
    }

    .list-line.list-line-7.CodeMirror-line {
      padding-left: 11.5em;
      text-indent: -1.3em;
    }

    .list-line.list-line-8.CodeMirror-line {
      padding-left: 13em;
      text-indent: -1.3em;
    }

    .list-line.list-line-9.CodeMirror-line {
      padding-left: 14.5em;
      text-indent: -1.3em;
    }


    // .list-line.list-line-3.CodeMirror-line {
    //   padding-left: 5.5em;
    //   text-indent: -4.0em;
    // }

    // .list-line.list-line-2.CodeMirror-line {
    //   padding-left: 3.9em;
    //   text-indent: -1.9em;
    // }

    // .list-line.list-line-3.CodeMirror-line {
    //   padding-left: 5.1em;
    //   text-indent: -1.2em;
    // }

    // .list-line.list-line-4.CodeMirror-line {
    //   padding-left: 3.9em;
    //   text-indent: 0em;
    // }

    // .list-line.list-line-5.CodeMirror-line {
    //   padding-left: 3.9em;
    //   text-indent: 1.2em;
    // }

    // .list-line.list-line-6.CodeMirror-line {
    //   padding-left: 3.9em;
    //   text-indent: 2.4em;
    // }

    // .list-line.list-line-7.CodeMirror-line {
    //   padding-left: 3.9em;
    //   text-indent: 3.6em;
    // }

    // .list-line.list-line-8.CodeMirror-line {
    //   padding-left: 3.9em;
    //   text-indent: 4.8em;
    // }

    // .list-line.list-line-9.CodeMirror-line {
    //   padding-left: 3.9em;
    //   text-indent: 6.0em;
    // }
  }
}

.note-list-bar-blank-slate {
  background-color: @base-background-color;
  opacity: 1;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  // background: @base-background-color;
}

::-webkit-scrollbar-thumb {
  background: @label-color;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: @label-color
}

.sidebar-menu-section-status, .sidebar-menu-status-list-item {
  display: none;
}

.editor {
  .CodeMirror div.CodeMirror-selected {
    background: @selected-text-background-color;
  }

  .CodeMirror .CodeMirror-line::selection,
  .CodeMirror-line>span::selection,
  .CodeMirror-line>span>span::selection {
    background: @selected-text-background-color;
  }

  .CodeMirror .CodeMirror-line::-moz-selection,
  .cm-s-ligh .CodeMirror-line>span::-moz-selection,
  .cm-s-ligh .CodeMirror-line>span>span::-moz-selection {
    background: @selected-text-background-color;
  }

  .CodeMirror {
    background-color: @base-background-color;
    color: @base-text-color;

    .CodeMirror-code {
      .cm-header-1 {
        font-size: 1.5em;
        font-weight: normal;
        color: @title-text-color-text;
      }

      .cm-header-2 {
        font-size: 1.3em;
        font-weight: normal;
        color: @title-text-color-text;
      }

      .cm-header-3 {
        font-size: 1.1em;
        font-weight: normal;
        color: @title-text-color-text;
      }
      .cm-header-4 {
        font-size: 1.05em;
        font-weight: normal;
        color: @title-text-color-text;
      }

      // CodeMirror within inkdrop likes to assign an unordered list at a certain depth with the keyword class
      // Override the color so that such ocurrances don't cause the note to look funky
      .list-line {
        span[role=presentation] {
          .cm-keyword {
            color: inherit;
          }
        }
      }

      .cm-formatting {
        border: 0px;
        padding: 0px;
        color: @markdown-formatting-text;
        // color: @title-text-color-text;
      }

      .cm-math {
        color: @base-text-color;
      }
    }


    .cm-inline-code {
      // background-color: @code-background;
      border: 1px solid @code-border;
      padding-left: 8px;
      padding-right: 8px;
      color: @code-inline-color;
      font-size: @code-font-size;
      font-family: @code-font;
      padding-top: 2px;
      padding-bottom: 2px;
    }

    .cm-formatting {
      border: 0px;
      padding: 0px;
    }

    .cm-formatting-header {
      opacity: 1;
    }

    .cm-strong {
      color: @base-text-color;
    }

    .cm-link {
      color: @base-text-color;
    }

    .cm-url {
      color: @code-link !important;
    }

    .cm-bracket {
      color: @light-blue;
    }

    .cm-formatting-list {
      color: @light-blue !important;
    }

    .gfm-codeblock-bg.CodeMirror-linebackground {
      background: @code-background;
      // border-radius: 2px;
      border-left: 1px solid @code-border;
      border-right: 1px solid @code-border;
    }

    .gfm-codeblock.CodeMirror-line {
      font-family: @code-font;
      font-size: @code-font-size;
      word-spacing: 2px;

      [role=presentation] {
        padding-left: 10px;
        padding-right: 10px;
      }
    }

    .gfm-codeblock-begin-bg {
      border-top: 1px solid @code-border;
    }

    .gfm-codeblock-end-bg {
      border-bottom: 1px solid @code-border;
    }

    .cm-keyword {
      color: @code-keyword;
    }

    .cm-type {
      color: @code-keyword;
    }

    .cm-def {
      color: @code-define;
    }

    .cm-property, .cm-def {
      color: @code-keyword;
    }

    .cm-string {
      color: @code-string;
    }

    .cm-quote {
      color: inherit;
      font-style: normal;
    }

    .quote.CodeMirror-line {
      border-left: 2px solid @light-blue;
      padding-left: 15px;

      [role=presentation] {
        .cm-quote {
        }
      }
    }

    .cm-variable {
      color: inherit;
    }

    .cm-atom {
      color: inherit;
    }

    .cm-number {
      color: @code-number;;
    }

    .cm-comment {
      color: @code-comment;
    }

    .cm-operator {
      color: @code-operator;
    }
  }

}