We are currently planning to migrate to a different platform for the forum. We will announce this fact both here and on Twitter, once we have settled on a solution.

My Zettlr CSS

I want to share my CSS so others can use it also. Would be nice to see different kind of CSS customizations Zettlr users have created for themselves.

I copied some parts of this code from this discussion:
https://forum.zettlr.com/discussion/comment/524#Comment_524

This is how it looks:

I love how customizable Zettlr is. Big thank you to Hendrik!

Feel free to share your CSS with others. Seeing CSS from other users give some new ideas to improve the outlook of Zettlr.

Ps. does somebody have better idea; how to hide bold asterisks? I just make them really small and hide them. Kind of workaround.

The CSS code:

:root {
    --c-primary: #0077C8;
}

/* Text usually is a bit smaller*/
#editor * {
    font-family: 'Roboto Mono', 'Inconsolata Regular', monospace;
    font-size:0.98em;
}

/* Header 1 is the biggest*/
#editor .cm-header-1 {
  color: #000000;
  font-family: 'Overpass Nerd Font', 'JetBrains Mono', 'Inconsolata Regular', sans-serif;
  font-weight:600;
  font-size:2.0em;
}

/* Headers 2...6  are smaller than H1*/
#editor .cm-header-2,
#editor .cm-header-3,
#editor .cm-header-4,
#editor .cm-header-5,
#editor .cm-header-6 {
    color: #000000;
    font-family: 'Overpass Nerd Font', 'JetBrains Mono', 'Inconsolata Regular', sans-serif;
    font-weight:600;
    font-size:1.20em;
}

/* Current file ZK link is different from other ZK links*/
#editor .cm-zkn-id {
    color: #2A9D8F;
    font-weight: bold;
}

/* ZK link [[]] -characters are dimmed */
#editor .cm-zkn-link-formatting {
  color: #B1B1B1;
  font-weight: bold;
}

/* ZK link is less visible than tags*/
/* Bold */
#editor .cm-zkn-link {
    color: #F4A261;
    font-weight: bold;
}

/* Bold text is clearly visible */
#editor .cm-strong {
    color: #E76F51;
    font-weight: bold;
}

/* Asterisks around bold are suppressed */
#editor .cm-formatting.cm-formatting-strong.cm-strong {
    color: #E2E2E2;
    letter-spacing: 0px;
    font-size:0.1em;
    visibility: hidden;
}


/* Distraction free mode less transparent */
#editor .CodeMirror-code .mute {
    opacity: .6;
}

/* Hide the Toolbar in Distraction Free */
#editor.fullscreen, .CodeMirror-fullscreen {
    top: 0px; 
}

/* Smaller left margin */
#editor .CodeMirror {
margin-left: 10px;
}

/* #Tags */
body .cm-zkn-tag {
  color: #E76F51;
}

/* Quotes are dimmed */
body .cm-quote.cm-quote-1 {
    color: #A4A4A4;
}

/* Numberlist numbers are dimmed */
body .cm-formatting.cm-formatting-list.cm-formatting-list-ol {
    color: #E2E2E2;
}
Tagged:

Comments

  • Realy nice clean theme!

  • @danieltomasz said:
    Realy nice clean theme!

    Thank you. I think it still has some space for improvement. I have not specified all kind of things (italics etc). Just the things I use the most.

Sign In or Register to comment.