Different cursors for each task edition operations and the link control points

During daily usage of the plugin I often had made incorrectly edits of task with mouse, especially when task progress is 0% or 100%. In close distance at task ends, the mouse allows modify different parameters: start/end date, progress and linking tasks. By default the mouse cursor is displayed in the same way.

As a workaround I have added the below CSS code to the inline CSS box for page properties in APEX.

/* Classes used to increase the distance between the link control point and the task bar */
.gantt_link_control.task_left {
  left:  -20px !important;
}
.gantt_link_control.task_right {
  right: -20px !important;
}
/* Custom color for the link control point when mouse is over */
.gantt_link_control div:hover {
  background-color: #006DF0 !important;

}

/* Custom mouse pointer when hovered over the link control point */
/*
.gantt_link_control div{
    cursor:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAACmAAAApgHdff84AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAJZQTFRF////AECA/4BA/79A/+2w/+y0/3NbGENgF0Ri/3Vc/8x8/9t5tI1U/+y1tqJPFkVh/3Rc/7FO/85IX1Nfan5+/3Vb/8RM/8JK/3Vb/8JL/8FK/8BK/8FK/+Om/+emGERhGkZh/+u0+uey/8BKF0RhHEdgF0RhWFJgvZJTvadO+HNc/3Vc/7FO/79K/8BK/85H/89q/+u0qkIxvwAAACZ0Uk5TAAQEBB0pKjV4epaWnZ6hq6urq6ywsNTc3+Xt9Pn5+fr7/P39/v4fOPf8AAAAg0lEQVQoz63I2wKBQBAA0OkmIZWKXBOa2Im1//9z3puZN+fxAHB+0tQz6XMiqvl7pSGihn+GgyFKph+sr4iDyf3pb+yrRyyFt59nm3nSj+NK+SL4w7+Vvyt/Uv6o/EH5vfCwtHYnfXixW+khdV/xo86584I/VLcuDXlD/KgikMxjseEHSj8Tlgts0YEAAAAASUVORK5CYII=') 0 24, pointer  !important;
}
*/



/* Classes used to customize icons when mouse is hovered over tasks -> different edit actions */
/* Icons downloaded from repository =>  https://www.flaticon.com/free-icons/resize     */
/* Converted to URI format (CSS3)  =>  https://www.base64-image.de/     */

.gantt_task_content {
    cursor:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4QkOEhoSoDWLSAAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAATlBMVEX///8AXs4LZdAOZ9EkiP8mif8qi/8tjf8wjfwwj/8xj/89hdo/iN9HkelWlN9Wo/9Xld9usP9vsf9/ruaRw//B3f/C2PPI3PTL4//Q5f8OWuhHAAAAAXRSTlMAQObYZgAAAHxJREFUKM/N0UkShCAMBVDQaNuOacE23v+i8qNoNu5lQSr/VTE6996xPTRx1iKiZY5XTgD5fYrxD6CYc4B8ibwvBXBIyhMsEwF8twAgyKmqMQN8U1ekEtAN7Q1tjxKcCtul+MhV2G7OZw5he1zOeRK2F+RwX321T7K++O92O+IGHE5Oy0QAAAAASUVORK5CYII=') 12 12, w-resize  !important;
}

.gantt_task_drag {
    cursor:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAACqAAAAqgEGCnBPAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAACRQTFRF////AF3MJYb/AF7NJIf/AF7OJIn/BWTWJIj/JIj/AF7OJIj/Cj4moQAAAAp0Uk5TADc3gICoqMX4/WDbRT8AAABpSURBVBiVY2AgF3A0YOUwQTgKYI4bhJMCYrNsg3CyHYAcbxhnC1BiN4yz24HBe/fOjo7uHR0ds3dvYbBatRzCqVq1mIF51VKIsqhVBgwMVjDOYqBpzDCOAcgiUwgnGOwCRghHgICrSQYAP7wiq+BSRAMAAAAASUVORK5CYII=') 12 12, w-resize  !important;
}
/* When for start task date and end task date different mouse cursors are required it can be achieved by using the following classes
.gantt_task_drag.task_left
.gantt_task_drag.task_right
*/

.gantt_task_progress_drag {
    cursor:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAdVBMVEUAAAAAbe8AbfEAbfEAbfAAbfAAbe8AZv8Abe8AcPUAbe8AbfAAbe8AbvIAbvEAbe0AbfAAbfAAbPEAbPAAbfAAbvEAbfAAbfAAauoAbvAAbu8AbfEAbe8AbfAAbu8AbfAAau0AbfAAbvAAbf8AAP8AbfAAAADDiCsDAAAAJXRSTlMAc26wqNuUBcUZg9jmOlgOrfpqdvyQdZgMqnJ+1epByx3hnAcBoxIDQAAAAAFiS0dEAIgFHUgAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhCREPGwkvzwQPAAAAgUlEQVQY03XPxw6EMAwE0NlN6B1M78X//4ubKLCIA3N8ku0xYPL54hkhX8GynRsc2wKz613gucxgPwgjA1EY+AriJM1yDXmWJrEGoKBSyJIK4ISKaiFrqk5oWur0SEdto6EfxsksncahV8Dzcp1dZnV23fa72L6tOJ7Vj9fn/u//AFMyCRENwZp2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA5LTE3VDE1OjI3OjA5KzAyOjAwvr2y4QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wOS0xN1QxNToyNzowOSswMjowMM/gCl0AAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC') 8 8, w-resize  !important;
}

The CSS above increase the distance between the link control points and the task bars. Additionally mouse cursor have different shape for the following operations:

• move the whole task
• edit start/end task date
• adjust the task progress

Please see on the picture below.

Hope the above will be useful for others. Kind regards, Marek