Evernote theme for Trilium Notes

evernote.css

@font-face {
  font-family: 'Roboto-Regular';
  font-style: normal;
  font-weight: 400;
  src: url('/custom/fonts/Roboto-Regular.woff2') format('woff2');
}

:root {
    --main-bg:         var(--white);
    --main-text:       #000;
    --bg-accent:       #f1f1f1;
    --bg-more-accent:  #f0f0f0;
    --accent:          #2dbe60;
    --accent-darker:   #2d9c53;
    --accent-inverted: #fefefe;
    --color-yellow-darker: #ecb400;
    --color-gray: #d6d6d6;
    --color-gray-light: #f5f5f5;
    --color-gray-text-code: #555;
    --color-paper-text: #555;
    --color-blue-light-alpha: #3cad9e70;
    --color-blue-light: #3cad9e;
    --color-yellow-text: #63583c;
    --color-orange-dark: #e76f51;
    --white: #fbfbfb;
} 

:root {
    --main-font-family: 'Roboto-Regular' !important;
    --main-font-size: normal;
    --tree-font-family: inherit;
    --tree-font-size: normal;
    --detail-font-family: inherit;
    --detail-font-size: normal;
    --detail-text-font-family: 'Roboto-Regular' !important;

    --main-background-color: var(--main-bg);
    --left-pane-background-color: var(--main-bg);
    --main-text-color: var(--main-text);
    --launcher-pane-background-color: var(--bg-accent);
    --launcher-pane-text-color: var(--accent);
    
    --main-border-color: #AFB8C6;
    --accented-background-color: var(--bg-accent);
    --more-accented-background-color: var(--bg-more-accent);
    --header-background-color: #383C4A;
    --button-background-color: var(--bg-accent);
    --button-disabled-background-color: #404552;
    --button-border-color: #333;
    --button-text-color: #AFB8C6;
    --button-border-radius: 2px;
    --primary-button-background-color: var(--accent);
    --primary-button-text-color: var(--accent-inverted);
    --primary-button-border-color: #6c757d;
    --muted-text-color: gray
    --input-text-color: var(--accent);
    --input-background-color: #404552;
    --active-tab-background-color: var(--accent);
    --active-tab-text-color: var(--accent-inverted);
    --hover-item-text-color: var(--accent-inverted);
    --hover-item-background-color: var(--accent);
    --active-item-text-color: var(--white);
    --active-item-background-color: var(--accent);
    --menu-text-color: var(--main-text);
    --menu-background-color: var(--bg-accent);
    --tooltip-background-color: var(--main-bg);
    --link-color: var(--accent);
    --modal-background-color: var(--main-bg);
    --modal-backdrop-color: black;
    --scrollbar-border-color: rgba(175, 184, 198, 0.5);
}

body .note-detail-text {
    font-size: 120%;
}

body .CodeMirror {
    filter: invert(0%) hue-rotate(180deg);
}

.fancytree-node {
    border-radius: 0 !important;
    border: 0 !important;
}


.fancytree-node:hover {
    /* background-color: var(--accent); */
    color: var(--accent);
}

.fancytree-active {
    color: var(--accent);
    background-color: none !important;
}

.input-group-prepend {
   margin-right: 0 !important;
}

.quick-search {
    margin: 10px 0 !important;
}

.quick-search button {
    background-color: var(--main-bg) !important;
}

li > span.fancytree-active, li > span.fancytree-active.fancytree-selected {
    background-color: unset !important;
    color: var(--accent) !important;
}

.note-tab-wrapper:hover {
    background-color: var(--accent-darker) !important;
    color: var(--accent-inverted) !important;
}

#launcher-pane .icon-action:hover {
    color: var(--hover-item-text-color);
}

.note-title {
    color: var(--accent) !important;   
}

button.note-icon {
    color: var(--accent) !important;   
}

.ck-editor__editable .todo-list .todo-list__label>input {
    border-radius: 2px;
    outline: 2px solid var(--accent) !important;
}

/* ----------------------------------------------------------------------------- */
/* Typography 
/* ----------------------------------------------------------------------------- */
.note-detail p, 
.note-detail h1, 
.note-detail h2,
.note-detail h3,
.note-detail h4,
.note-detail h5,
.note-detail h6 {
    line-height: 1.57rem !important;
    margin-bottom: 1rem !important;
}

.note-detail h1,
.note-detail .text-big{
    font-weight: bold !important;
}


/* ----------------------------------------------------------------------------- */
/* CodeMirror 
/* ----------------------------------------------------------------------------- */

div#root-widget div#rest-pane div#center-pane div.note-detail div.note-detail-code div.note-detail-code-editor div.CodeMirror-code span {
  /*color: var(--color-gray-text-code);*/
    /* font-family: var(--font-code); */
}

.CodeMirror-cursor { border-color: #bdbcbc; }
.cm-s-default .cm-qualifier { color: #07f2ff; }
.cm-s-default .cm-number { color: #23d08b; }
.cm-atom { color: #c8c1ff; }

span.cm-keyword { color: #ffffffed !important; } 
span.cm-builtin { color: #ff8de6 !important; }
span.cm-tag { color: #ff7a9e !important; }
span.cm-variable-2 { color: #ffdcfae6 !important; }
span.cm-variable-3 { color: #49e040 !important; }


/* Make the code editor readable */
.cm-s-default .cm-builtin { color: #9368f7 !important; }
.cm-s-default .cm-qualifier { color: #4d9c28 !important; }
.cm-s-default .cm-atom { color: #d23a8c !important; }
.cm-s-default .cm-def, .cm-s-default .cm-variable-2 { color: var(--accent) !important}
.cm-s-default .cm-string { color: #ad5858 !important}
.cm-s-default .cm-keyword { color: #e17eef !important}

.cm-comment {
  color: var(--color-yellow-darker);
  padding: 5px 2px;
  margin: -5px -2px;
}

div.CodeMirror span.cm-def {
  color: var(--color-gray-text-code);  
}
div.CodeMirror span.cm-keyword {
  color: var(--color-gray-text-code);  
}
div.CodeMirror span.cm-matchhighlight {
  color: var(--color-gray-text-code);  
}
div.CodeMirror span.cm-number {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-operator {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-overlay {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-property {
    color: var(--color-paper-text);
    text-decoration: underline;
    text-decoration-color: var(--color-gray);
    text-decoration-style: dotted;
}
div.CodeMirror span.cm-variable {
  color: var(--color-blue-dark);
}
div.CodeMirror span.cm-variable-2 {
  color: var(--color-blue-light);
}
div.CodeMirror span.cm-variable-3 {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-qualifier {
  color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-string {
  color: var(--color-orange-dark);  
}
div.CodeMirror span.cm-string-2 {
  color: var(--color-gray-text-code);  
}
div.CodeMirror span.cm-tag {
  color: var(--color-gray-text-code);
}
.CodeMirror-line {
    color: var(--color-gray-text-code) !important;
}

.note-detail-code-editor div.CodeMirror-selected,
.note-detail-code-editor div.CodeMirror-line::selection {
  background-color: var(--color-blue-light-alpha);
}

.CodeMirror-matchingbracket { 
  text-decoration: none; 
  color: var(--color-orange-dark) !important;
  border: 1px solid var(--color-gray);
}