redesign quill toolbar

style/_page_course.scss

@@ -2,7 +2,7 @@
 	
 	#docs {
 		position: absolute;
-		top: 41.35px;
+		top: 0;
 		left: 0;
 		bottom: 0;
 		width: calc(30% - 1em);
@@ -40,27 +40,40 @@
 			position: absolute;
 			top: 0;
 			right: 0;
-			height: 41.35px;
+			height: 27.35px;
 			width: 50%;
 			text-align: right;
 			
 			.alert {
 				font-size: 0.8em;
 				margin: 0;
-				padding-right: 0.5em;
+				padding: 0.2em 0.5em;
 				
 				&.note-error {
 					color: $col_main_2;
 				}
 			}
 		}
-		
+	
+		.ql-toolbar.ql-snow {
+			border-radius: 5px 5px 0 0;
+			background: $gray-400;
+			padding: 0;
+			border: 2px solid #dbd1cc;
+			border-bottom: none;
+			
+			.ql-color-picker .ql-picker-label, .ql-icon-picker .ql-picker-label {
+				margin-top: -3px;
+			}
+		}
+
 		#notes {
 			width: 100%;
-			height: calc(100% - 43.35px);
+			height: calc(100% - 27.35px);
 			border: 2px solid $gray-400;
-			@include catc-round(0.5em);
+			border-radius: 0 0 5px 5px;
 			padding: 1em 0.5em 1em 0;
+			background: $gray-200;
 		}
 	}
 }

style/_quill.scss

@@ -33,6 +33,14 @@
 	display: none;
 }
 
+.ql-snow .ql-stroke {
+	stroke: $col_main_1;
+}
+
+.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
+	fill: $col_main_1;
+}
+
 /* Quill Better Table */
 
 .ql-container {

style/_template.scss

@@ -1,5 +1,6 @@
 /* Containers */
 
+
 body {
 	min-width: 700px;
 	font-family: $font_para, sans-serif;
@@ -176,7 +177,7 @@ a.button:active {
 #main {
 	display: none;
 	position: absolute;
-	top: calc(138px + 4em);
+	top: calc(138px + 6em);
 	bottom: 2rem;
 	right:0;
 	left:0;