improve theme compability

Author: korelstar

css/notes.css renamed to css/notes.scss

@@ -1,5 +1,6 @@
 /**
  * Copyright (c) 2013, Jan-Christoph Borchardt http://jancborchardt.net
+ *                     and others
  * This file is licensed under the Affero General Public License version 3 or later.
  * See the COPYING file.
  */
@@ -12,7 +13,7 @@
 }
 
 #app-navigation > ul > li.has-error a{
-    color:#f00;
+    color: var(--color-error);
 }
 .app-content-list-button {
 	display: block;
@@ -30,7 +31,7 @@
 	box-sizing: border-box;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	color: #000;
+	color: var(--color-main-text);
 	opacity: .57;
 }
 
@@ -95,6 +96,7 @@
     padding-top: 2ex;
 }
 
+/* old style search (before NC14) */
 .note-search span {
     background-position: 0 center;
     background-origin: content-box;
@@ -142,6 +144,7 @@
 /* enable clickthrough for links */
 .CodeMirror-cursor {
     pointer-events: none;
+    border-color: var(--color-main-text);
 }
 
 #app-content .note-meta {
@@ -150,7 +153,7 @@
     width: 100%;
     padding: 0 45px 0px 45px;
     margin: -10px 0 0;
-    background-color: white; /* TODO Theming! */
+    background-color: var(--color-main-background);
     -ms-user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -166,8 +169,8 @@
 
 #app-content .note-meta > .note-error {
     opacity: 1;
-    background-color: #e00;
-    color: #fff;
+    background-color: var(--color-error);
+    color: var(--color-primary-text);
     border-radius: 0.5ex;
     padding: 0.5ex 1ex;
 }
@@ -242,6 +245,10 @@ form.category .icon-confirm {
 
 
 /* markdown styling */
+.CodeMirror {
+	background: transparent;
+	color: inherit;
+}
 
 .CodeMirror .CodeMirror-code {
 	width: 100%;
@@ -318,19 +325,19 @@ form.category .icon-confirm {
 /* distraction free styles */
 :-webkit-full-screen {
 	width: 100%;
-	background-color: white;
+	background-color: var(--color-main-background);
 }
 :-moz-full-screen {
 	width: 100%;
-	background-color: white;
+	background-color: var(--color-main-background);
 }
 :-ms-fullscreen {
 	width: 100%;
-	background-color: white;
+	background-color: var(--color-main-background);
 }
 :fullscreen {
 	width: 100%;
-	background-color: white;
+	background-color: var(--color-main-background);
 }
 
 :-webkit-full-screen #app-content-container {
@@ -358,20 +365,17 @@ form.category .icon-confirm {
 
 
 /* icons for sidebar */
-.nav-icon-emptyfolder {
-        background-image: url('../img/folder-empty.svg?v=1');
-}
 .nav-icon-files {
-        background-image: url('../img/folder.svg?v=1');
+	@include icon-color('folder', 'notes', $color-black);
+}
+.nav-icon-emptyfolder {
+	@include icon-color('folder-empty', 'notes', $color-black);
 }
 .nav-icon-recent {
-        background-image: url('../img/recent.svg?v=1');
+	@include icon-color('recent', 'notes', $color-black);
 }
 .nav-icon-search {
-        background-image: url('../img/search.svg?v=1');
-}
-.nav-icon-favorites {
-        background-image: url('../img/star.svg?v=1');
+	@include icon-color('search', 'notes', $color-black);
 }
 
 

img/folder-empty.svg

@@ -2,10 +2,10 @@
 	<div class="note-meta" ng-if="note!==false">
 		<span class="note-category" ng-class="{ uncategorized: !note.category }" title="<?php p($l->t('Category')); ?>" ng-show="!editCategory" ng-click="showEditCategory()">{{ note.category || '<?php p($l->t('Uncategorized')) ?>' | categoryTitle}} <input type="button" class="edit icon icon-rename" title="<?php p($l->t('Edit category')); ?>"></span>
 		<span class="note-category" title="<?php p($l->t('Edit category')); ?>" ng-show="editCategory"><form class="category" ng-submit="closeCategory()"><input type="text" id="category" name="category" ng-blur="closeCategory()" placeholder="<?php p($l->t('Uncategorized')); ?>"><input type="submit" class="icon-confirm" value=""></form></span>
-		<span class="note-word-count" ng-if="note.content.length > 0">{{note.content | wordCount}}</span>
-		<span class="note-unsaved" ng-if="note.unsaved" title="<?php p($l->t('The note has unsaved changes.')); ?>">*</span>
-		<span class="note-error" ng-if="note.error" ng-click="manualSave()" title="<?php p($l->t('Click here to try again')); ?>"><?php p($l->t('Saving failed!')); ?></span>
-		<span class="saving" ng-if="isManualSaving()" title="<?php p($l->t('Note saved')); ?>"></span>
+		<span class="note-word-count" ng-show="note.content.length > 0">{{note.content | wordCount}}</span>
+		<span class="note-unsaved" ng-show="note.unsaved" title="<?php p($l->t('The note has unsaved changes.')); ?>">*</span>
+		<span class="note-error" ng-show="note.error" ng-click="manualSave()" title="<?php p($l->t('Click here to try again')); ?>"><?php p($l->t('Saving failed!')); ?></span>
+		<span class="saving" ng-show="isManualSaving()" title="<?php p($l->t('Note saved')); ?>"></span>
 		<span class="note-meta-right">
 			<button class="icon-fullscreen has-tooltip btn-fullscreen" notes-tooltip ng-click="toggleDistractionFree()"></button>
 		</span>