silverbullet/webapp/styles/editor.scss

.cm-editor {
  width: 100%;
  height: 100%;
  font-size: var(--ident);

  .cm-content {
    font-family: var(--editor-font);
    margin: auto;
    max-width: 800px;
  }

  .other-cursor {
    display: inline-block;
    width: 2px;
    margin-right: -2px;
    height: 1em;
  }

  .cursor-label-container {
    // display: none;
    position: relative;
    top: 2ch;
    float: left;
    width: 120px;
    height: 2.2ch;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    border: gray 1px solid;
    background-color: purple;
    // font-size: 0.5em;
  }

  .cursor-label-container label {
    margin: 0;
    padding: 0;
    font-size: 0.7em;
  }

  .cm-selectionBackground {
    background-color: #d7e1f6 !important;
  }

  .line-h1,
  .line-h2,
  .line-h3 {
    background-color: rgba(0, 15, 52, 0.6);
    color: #fff;
    font-weight: bold;
    padding: 2px 2px;

    .meta {
      color: orange;
    }
  }

  .line-h1 {
    font-size: 1.5em;
  }

  .line-h2 {
    font-size: 1.2em;
  }

  .line-h3 {
    font-size: 1.1em;
  }

  /* Color list item this way */
  .line-li .meta {
    color: rgb(0, 123, 19);
  }
  /* Then undo other meta */
  .line-li .meta ~ .meta {
    color: #650007;
  }

  .line-code {
    background-color: #efefef;
    margin-left: 30px;
  }

  .line-fenced-code {
    background-color: #efefef;
  }

  .meta {
    color: #650007;
  }

  .line-blockquote {
    background-color: rgba(220, 220, 220, 0.5);
    color: #676767;
    text-indent: -2ch;
    padding-left: 2ch;
  }

  .emphasis {
    font-style: italic;
  }

  .strong {
    font-weight: 900;
  }

  .link:not(.meta, .url) {
    color: #0330cb;
    text-decoration: underline;
  }

  .link.url {
    color: #7e7d7d;
  }

  .url:not(.link) {
    color: #0330cb;
    text-decoration: underline;
  }

  .wiki-link-page {
    color: #0330cb;
    text-decoration: underline;
  }
  .wiki-link {
    color: #808080;
  }

  .mention {
    color: #0330cb;
  }

  .tag {
    color: #8d8d8d;
  }

  .code {
    background-color: #efefef;
  }

  // Indentation of follow-up lines
  @mixin lineOverflow($baseIndent) {
    text-indent: -1 * ($baseIndent + 2ch);
    padding-left: $baseIndent + 2ch;

    &.line-task {
      text-indent: -1 * ($baseIndent + 6ch);
      padding-left: $baseIndent + 6ch;
    }

    &.line-blockquote {
      text-indent: -1 * ($baseIndent + 4ch);
      padding-left: $baseIndent + 4ch;
    }
  }

  .line-ul {
    &.line-li-1 {
      @include lineOverflow(0);
    }

    &.line-li-1.line-li-2 {
      @include lineOverflow(2);
    }

    &.line-li-1.line-li-2.line-li-3 {
      @include lineOverflow(4);
    }

    &.line-li-1.line-li-2.line-li-3.line-li-4 {
      @include lineOverflow(6);
    }

    &.line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 {
      @include lineOverflow(8);
    }
  }

  .line-ol {
    &.line-li-1 {
      @include lineOverflow(1);
    }

    &.line-li-1.line-li-2 {
      @include lineOverflow(2);
    }

    &.line-li-1.line-li-2.line-li-3 {
      @include lineOverflow(4);
    }

    &.line-li-1.line-li-2.line-li-3.line-li-4 {
      @include lineOverflow(6);
    }

    &.line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 {
      @include lineOverflow(8);
    }
  }

  .line-comment {
    text-indent: -1 * 3ch;
    padding-left: 3ch;
  }

  .task-marker {
    background-color: #ddd;
  }

  .line-comment {
    background-color: rgba(255, 255, 0, 0.5);
  }
}