new text editor: tinyMCE

style/_page_course.scss

@@ -11,6 +11,7 @@
 				max-width: 100%;
 				
 				.doc-item {
+					background: white;
 					&:not(:last-child) {
 						margin-bottom: 1em;
 					}
@@ -27,26 +28,23 @@
 
 	#notes_box {
 		#notes {
-			height: calc(100% - 27.35px);
-			border: 2px solid $gray-400;
-			border-radius: 0 0 5px 5px;
-			padding: 1em 0.5em 1em 0;
-			background: $gray-200;
+			height: 100%;
 		}
 		
 		#notes_feedback {
 			position: absolute;
 			top: 0;
 			right: 0;
-			height: 27.35px;
-			width: 50%;
+			height: 39px;
+			width: 350px;
 			text-align: right;
+			z-index: 1000;
 			
 			.alert {
 				font-size: 0.8em;
 				margin: 0;
-				padding: 0 0.5em;
-				line-height: 27.35px;
+				padding: 0 13px;
+				line-height: 39px;
 				
 				&.note-error {
 					color: $col_main_2;

style/_scrollbar.scss

@@ -1,5 +1,9 @@
 @import 'scrollbar/jquery.mCustomScrollbar.scss';
 
+.mCustomScrollBox {
+	width: 100%;
+}
+
 .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
 .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
 .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {

style/_tiny.scss

@@ -0,0 +1,53 @@
+#notes {
+	.tox {
+		&.tox-tinymce {
+			border-color: $gray-400;
+			border-radius: 4px;
+		}
+		.tox-statusbar {
+			border-top-color: $gray-400;
+		}
+		.tox-tbtn svg {
+			//fill: theme-color-level("primary", 2);
+			fill: $col_main_1;
+		}
+		.tox-tbtn__select-label {
+			color: $col_main_1; 
+		}
+		.tox-toolbar, .tox-toolbar__overflow, .tox-toolbar__primary {
+			background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cbbdb5'/%3E%3C/svg%3E") left 0 top 0 #fff;
+		}
+		.tox-statusbar__branding {
+			opacity: 0;
+		}
+	}
+}
+
+.tox {
+	.tox-collection__group {
+		.tox-collection__item-label,
+		.tox-collection--list .tox-collection__item--enabled,
+		.tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled),
+		.tox-collection__item {
+			color: $col_main_1 !important;
+		}
+	}
+	.tox-collection--list .tox-collection__group,
+	.tox-menu,
+	.tox-insert-table-picker > div {
+		border-color: $gray-400 !important;
+	}
+	.tox-insert-table-picker .tox-insert-table-picker__selected {
+		background-color: theme-color-level("primary", -2) !important;
+		border-color: $col_main_1 !important;
+	}
+	.tox-collection--list .tox-collection__item--active {
+		background-color: $gray-300 !important;
+	}
+	.tox-collection__item-caret svg {
+		fill: $col_main_1 !important;
+	}
+	.tox-insert-table-picker__label {
+		color: $col_main_1 !important;
+	}
+}

style/_variables.scss

@@ -2,7 +2,7 @@
 
 */
 
-$col_main_1: #907465; //Brown
+$col_main_1: #796155; //Brown old: #907465
 $col_main_2: #C81F3F; //Red
 
 $font_para: 'Quicksand';

style/catc.scss

@@ -11,6 +11,7 @@
 
 @import 'bootstrap';
 @import 'quill';
+@import 'tiny';
 @import 'scrollbar';
 
 /* Template (theme) */