CSS to make the Zettlr editor look prettier

zettlr.css

/*
Use paired with Bielefeld theme in dark mode 
See also: https://github.com/Zettlr/Zettlr/discussions/2863
*/

/* Disable upper green menu bar */
#menubar {
  background-color: rgba(32, 33, 37, 1) !important;  /* grey background */
}

/* Remove annoying "h1", "h2", etc */
.cm-heading-gutter {
  color: transparent;
}

/* ---------------- */
/* Dark mode styles */
/* ---------------- */

/* Background color */
body.dark .cm-editor {
   background-color: rgba(32, 33, 37, 1);
}

/* Generic tags */
/*   - Outer element */
body.dark [class*="cm-zkn-tag-"]:not(.cm-zkn-tag-mark) {
   background-color: rgba(200, 200, 200, 1);
   padding: 0px 2px;
   border-radius:5px;
}
/*   - Apply font color to all children */
body.dark [class*="cm-zkn-tag-"]:not(.cm-zkn-tag-mark) * {
   color: rgba(74, 74, 74, 1);
}
/*   - Smaller hastags */
.cm-zkn-tag-mark {
   font-size: 0.85em;
}

/* Custom tag colors */
body.dark .cm-zkn-tag-todo,
body.dark .cm-zkn-tag-todo * {
  background-color: rgba(275,171,171, 1) !important;
  color: rgba(138,0,0, 1) !important;
}

body.dark .cm-zkn-tag-software,
body.dark .cm-zkn-tag-software * {
  background-color: #ffe599 !important;
  color: #7e6100 !important;
}

body.dark .cm-zkn-tag-done,
body.dark .cm-zkn-tag-done * {
  background-color: #d8ead2 !important;
  color: #274e13 !important;
}

body.dark .cm-zkn-tag-aka,
body.dark .cm-zkn-tag-aka * {
  background-color: #d8d3e9 !important;
  color: #21134d !important;
}

body.dark .cm-zkn-tag-resources,
body.dark .cm-zkn-tag-resources * {
  background-color: #c8daf9 !important;
  color: #1c4587 !important;
}

/* Quotes */
body.dark .cm-editor .cm-quote {
   color: rgba(250, 160, 85, 1);
}

/* Bold */
body.dark .cm-editor .cm-strong {
   color: rgba(182, 249, 250, 1);
}

/* Italics */
body.dark .cm-editor .cm-emphasis {
  color: rgba(255, 165, 230, 1);
}

/* Monospace */
body.dark .cm-editor .cm-monospace {
   color: rgba(255, 255, 255, 1);
   background-color: rgba(70, 70, 70, 1);
   padding: 2px 5px;
   border-radius: 5px;
}

.code-block-line {
   background-color: rgba(70, 70, 70, 1);
}

/* Links: .cm-link (markdown link), .cm-url (plain URL) */
body.dark .cm-editor :is(.cm-link, .cm-url) {
   color: rgba(0,204,153, 1);
   text-decoration: none;
}

:is(.cm-link,.cm-url):hover {
  cursor: pointer;
}

/* Bullet points */
/* We explicitely exclude coloring other code marks (bold, tags, italics) when they are part of a list */
body.dark .cm-editor .cm-list.cm-code-mark:not(.cm-zkn-tag, .cm-strong, .cm-emphasis) {
   color: rgba(255, 242, 0, 0.8);
}

/* Bold marks */
body.dark .cm-editor .cm-strong.cm-code-mark {
   color: rgba(204, 204, 204, 0.4);
}

/* Italic marks */
body.dark .cm-editor .cm-emphasis.cm-code-mark {
   color: rgba(204, 204, 204, 0.4);
}

/* Horizontal rule */
body.dark .cm-editor hr {
    border: none; /* Remove default browser styling */
    height: 3px;    
    background: linear-gradient(90deg, #7fe5f5, #7beac3, transparent);    
    display: block; 
    width: 100%;
}

/** Customize scrollbar
- nice grey color that fits dark theme
- bigger size when hovering

ref: https://stackoverflow.com/a/70089996
------------------------------------------------------------*/

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background: #ababab;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover{
  border: 0;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Internal links */
body.dark .cm-editor .cm-zkn-link:not(:hover) {
	font-size: .01em;
  	visibility: hidden;
    color: rgba(0,204,153, 1);
}
body.dark .cm-editor .cm-zkn-link:not(:hover)::after {
    font-size: 100em;
    content: '↗';
    visibility: visible;
    color: rgba(0,204,153, 1);
}
body.dark .cm-editor .cm-zkn-link {
    color: rgba(0,204,153, 1) !important;
}

/* IDs */
body.dark .cm-editor .cm-zkn-id:not(:hover) {
	font-size: .01em;
  	visibility: hidden;
    color: rgba(252, 186, 3, 1);
}
body.dark .cm-editor .cm-zkn-id:not(:hover)::after {
    font-size: 100em;
    /*content: '\1F194';*/
    content: '\1F3F7 ID';
    visibility: visible;
    font-weight: bold;
    color: rgba(252, 186, 3, 1);
}
body.dark .cm-editor .CodeMirror .cm-zkn-id {
    color: rgba(252, 186, 3, 1);
}

/* In the file tree, color dirs in grey */
.tree-item-container .tree-item span.dir {
  color: rgba(180, 180, 180, 1);
}

This is how the result is rendered:

Updated for zettlr 3.6.0

How do i type a horizontal ruler in the last version? I tried both *** and --- to no avail despite having added the CSS with both .cm-editor and .cm-content

@lordofscripts I've updated now with the last version of my CSS

@IgnacioHeredia Gracias Thanks :) BTW, is there a way I can achieve big quotes as in this article ? I tried it but since Markdown isn't HTML it cannot interpret the blockquote HTML element. But I wonder if there are some internal classes that would let me achieve that for adding quotes to my article.

Likewise, I tried indenting the first line of a text paragraph to no avail:

/* Indent first line of paragraph */
body .main-editor-wrapper .cm-content p {
     text-indent: 2em;
}

I more or less got the blockquote artifact working as a code markdown:

/* Big Quotes <blockquote><h3>quote text. ~Author</h3></blockquote> */

span.cm-monospace {
font-size:21px;
}

span.cm-monospace:before { 
content: open-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
}

span.cm-monospace:after { 
content: close-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
}

However, it the quote is short (usually isn't) it will fit in one line and look good. However, if it isn't there will be a large space between the lines due to the big quotes font size. A workaround to get it more visually pleasing without that issue, is to omit the :after class so the only big quote would be the opening quote. But I think that is okay, I have seen some websites where only the opening big quote is used.