Replace color dropdown by color picker in task forms

assets/css/src/form.css

@@ -154,6 +154,7 @@ input.form-input-large {
 .form-column {
     float: left;
     padding-right: 50px;
+    max-width: 50%;
 }
 
 .form-column:first-child {
@@ -190,8 +191,9 @@ label + .form-tabs {
     max-width: 800px;
 }
 
-.form-tabs-nav {
+ul.form-tabs-nav {
     margin-bottom: 8px;
+    margin-top: 0;
 }
 
 .form-tabs-nav li {

assets/css/src/popover.css

@@ -15,9 +15,9 @@
     width: 70%;
     margin: 0 0 0 -35%;
     left: 50%;
-    top: 5%;
+    top: 1%;
     padding: 15px;
     background: #fff;
     overflow: scroll;
-    max-height: 83%;
+    max-height: 85%;
 }

assets/css/src/task.css

@@ -305,3 +305,29 @@ span.task-board-date-overdue {
 .flag-milestone {
     color: green;
 }
+
+/* color picker */
+.color-picker {
+    min-height: 35px;
+}
+
+.color-square {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    border: 1px solid #000;
+    cursor: pointer;
+}
+
+.color-square:hover {
+    border-style: dotted;
+}
+
+div.color-square-selected {
+    border-width: 2px;
+    width: 28px;
+    height: 28px;
+    box-shadow: 3px 2px 10px 0 rgba(180,180,180,0.9);
+}