beautify less code

src/less/dark/classDiagram.less

@@ -1,23 +1,23 @@
 g.classGroup text {
-  fill:@nodeBorder;
+  fill: @nodeBorder;
-  stroke:none;
+  stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
 
 g.classGroup rect {
-  fill:@nodeBkg;
+  fill: @nodeBkg;
   stroke: @nodeBorder;
 }
 
 g.classGroup line {
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
 
 svg .classLabel .box {
   stroke: none;
-  stroke-width:0;
+  stroke-width: 0;
   fill: @nodeBkg;
   opacity: 0.5;
 }
@@ -29,28 +29,33 @@ svg .classLabel .label {
 .relation {
   stroke: @nodeBorder;
   stroke-width: 1;
-  fill:none;
+  fill: none;
 }
 
-.composition{
+.composition {
-  fill : @nodeBorder;
+  fill: @nodeBorder;
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
+
 #compositionStart {
   .composition;
 }
+
 #compositionEnd {
   .composition;
 }
-.aggregation{
+
-  fill : @nodeBkg;
+.aggregation {
+  fill: @nodeBkg;
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
+
 #aggregationStart {
   .aggregation;
 }
+
 #aggregationEnd {
   .aggregation;
 }
@@ -58,12 +63,15 @@ svg .classLabel .label {
 #dependencyStart {
   .composition;
 }
+
 #dependencyEnd {
   .composition;
 }
+
 #extensionStart {
   .composition;
 }
+
 #extensionEnd {
   .composition;
 }

src/less/dark/flow.less

@@ -1,4 +1,6 @@
-.mermaid .label { color: @darkTextColor }
+.mermaid .label {
+  color: @darkTextColor
+}
 
 .node rect,
 .node circle,
@@ -9,7 +11,6 @@
   stroke-width: 1px;
 }
 
-
 .arrowheadPath {
   fill: @arrowheadColor;
 }
@@ -22,7 +23,7 @@
   background-color: @edgeLabelBackground;
 }
 
-.cluster rect{
+.cluster rect {
   fill: @secondBkg !important;
   rx: 4 !important;
   stroke: @clusterBorder !important;

src/less/dark/gantt.less

@@ -1,24 +1,39 @@
 /** Section styling */
+
 .section {
   stroke: none;
   opacity: 0.2;
 }
-.section0{
+
+.section0 {
   fill: @sectionBkgColor;
 }
+
 .section2 {
   fill: @sectionBkgColor2;
 }
-.section1,.section3 {
+
+.section1,
+.section3 {
   fill: @altSectionBkgColor;
   opacity: 0.2;
 }
 
-.sectionTitle0 { fill: @titleColor;}
+.sectionTitle0 {
-.sectionTitle1 { fill: @titleColor;}
+  fill: @titleColor;
-.sectionTitle2 { fill: @titleColor;}
+}
-.sectionTitle3 { fill: @titleColor;}
 
+.sectionTitle1 {
+  fill: @titleColor;
+}
+
+.sectionTitle2 {
+  fill: @titleColor;
+}
+
+.sectionTitle3 {
+  fill: @titleColor;
+}
 
 .sectionTitle {
   text-anchor: start;
@@ -26,29 +41,39 @@
   text-height: 14px;
 }
 
+
 /* Grid and axis */
+
 .grid .tick {
   stroke: @sectionBkgColor;
   opacity: 0.3;
   shape-rendering: crispEdges;
 }
+
 .grid .tick text {
   fill: @taskTextLightColor;
   opacity: 0.5;
 }
+
 .grid path {
   stroke-width: 0;
 }
 
+
 /* Today line */
+
 .today {
   fill: none;
   stroke: @todayLineColor;
   stroke-width: 2px;
 }
 
+
 /* Task styling */
+
+
 /* Default task */
+
 .task {
   stroke-width: 1;
 }
@@ -57,75 +82,126 @@
   text-anchor: middle;
   font-size: 11px;
 }
+
 .taskTextOutsideRight {
   fill: @taskTextDarkColor;
   text-anchor: start;
   font-size: 11px;
 }
+
 .taskTextOutsideLeft {
   fill: @taskTextDarkColor;
   text-anchor: end;
   font-size: 11px;
 }
 
+
 /* Specific task settings for the sections*/
 
-.taskText0, .taskText1, .taskText2, .taskText3 {
+.taskText0,
+.taskText1,
+.taskText2,
+.taskText3 {
   fill: @taskTextColor;
 }
 
-.task0, .task1, .task2, .task3 {
+.task0,
+.task1,
+.task2,
+.task3 {
   fill: @taskBkgColor;
   stroke: @taskBorderColor;
 }
 
-.taskTextOutside0,.taskTextOutside2, {
+.taskTextOutside0,
-  fill: @taskTextOutsideColor;
+.taskTextOutside2,
-}
+{
-.taskTextOutside1, .taskTextOutside3 {
   fill: @taskTextOutsideColor;
 }
 
+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: @taskTextOutsideColor;
+}
+
+
 /* Active task */
-.active0, .active1, .active2, .active3 {
+
+.active0,
+.active1,
+.active2,
+.active3 {
   fill: @activeTaskBkgColor;
   stroke: @activeTaskBorderColor;
 }
 
-.activeText0, .activeText1, .activeText2, .activeText3 {
+.activeText0,
+.activeText1,
+.activeText2,
+.activeText3 {
   fill: @taskTextDarkColor !important;
 }
+
+
 /* Completed task */
-.done0, .done1, .done2, .done3 {
+
+.done0,
+.done1,
+.done2,
+.done3 {
   fill: @doneTaskBkgColor;
 }
 
-.doneText0, .doneText1, .doneText2, .doneText3 {
+.doneText0,
+.doneText1,
+.doneText2,
+.doneText3 {
   fill: @taskTextDarkColor !important;
 }
 
+
 /* Tasks on the critical line */
-.crit0, .crit1, .crit2, .crit3 {
+
+.crit0,
+.crit1,
+.crit2,
+.crit3 {
   stroke: @critBorderColor;
   fill: @critBkgColor;
   stroke-width: 2;
 }
-.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
+
+.activeCrit0,
+.activeCrit1,
+.activeCrit2,
+.activeCrit3 {
   stroke: @critBorderColor;
   fill: @activeTaskBkgColor;
   stroke-width: 2;
 }
-.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
+
+.doneCrit0,
+.doneCrit1,
+.doneCrit2,
+.doneCrit3 {
   stroke: @critBorderColor;
   fill: @doneTaskBkgColor;
   stroke-width: 1;
   cursor: pointer;
   shape-rendering: crispEdges;
 }
-.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
+
+.doneCritText0,
+.doneCritText1,
+.doneCritText2,
+.doneCritText3 {
   fill: @taskTextLightColor !important;
 }
-.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
+
+.activeCritText0,
+.activeCritText1,
+.activeCritText2,
+.activeCritText3 {
   fill: @taskTextDarkColor !important;
 }
 

src/less/dark/mermaid.less

@@ -3,10 +3,9 @@
 @import "sequenceDiagram";
 @import "gantt";
 @import "classDiagram";
-
 .node text {
   font-family: 'trebuchet ms', verdana, arial;
-  font-size:14px;
+  font-size: 14px;
 }
 
 div.mermaidTooltip {
@@ -20,5 +19,5 @@ div.mermaidTooltip {
   border: 1px solid @border2;
   border-radius: 2px;
   pointer-events: none;
-  z-index:100;
+  z-index: 100;
 }

src/less/dark/sequenceDiagram.less

@@ -2,6 +2,7 @@
   stroke: @actorBorder;
   fill: @actorBkg;
 }
+
 text.actor {
   fill: @actorTextColor;
   stroke: none;
@@ -31,8 +32,8 @@ text.actor {
 #crosshead path {
   fill: @signalColor !important;
   stroke: @signalColor !important;
-
 }
+
 .messageText {
   fill: @signalTextColor;
   stroke: none;

src/less/dark/variables.less

@@ -7,58 +7,46 @@
 @border2: rgba(255, 255, 255, 0.25);
 @arrowheadColor: @mainContrastColor;
 
-
 /* Flowchart variables */
-@nodeBkg:@mainBkg;
-@nodeBorder:@border1;
-
-@clusterBkg:@secondBkg;
-@clusterBorder:@border2;
-
-@defaultLinkColor:@lineColor;
 
+@nodeBkg: @mainBkg;
+@nodeBorder: @border1;
+@clusterBkg: @secondBkg;
+@clusterBorder: @border2;
+@defaultLinkColor: @lineColor;
 @titleColor: #F9FFFE;
-
 @edgeLabelBackground: #e8e8e8;
 
 /* Sequence Diagram variables */
+
 @actorBorder: @border1;
-@actorBkg:    @mainBkg;
+@actorBkg: @mainBkg;
 @actorTextColor: black;
 @actorLineColor: @mainContrastColor;
-
 @signalColor: @mainContrastColor;
 @signalTextColor: @mainContrastColor;
-
 @labelBoxBkgColor: @actorBkg;
 @labelBoxBorderColor: @actorBorder;
 @labelTextColor: @mainContrastColor;
-
 @noteBorderColor: @border2;
-@noteBkgColor:    #fff5ad;
+@noteBkgColor: #fff5ad;
 
 /* Gantt chart variables */
+
 @sectionBkgColor: rgba(255, 255, 255, 0.3);
 @altSectionBkgColor: white;
 @sectionBkgColor2: #EAE8B9;
-
 @taskBorderColor: rgba(255, 255, 255, 0.5);
 @taskBkgColor: @mainBkg;
 @taskTextColor: @darkTextColor;
 @taskTextOutsideColor: @taskTextLightColor;
-
 @activeTaskBorderColor: rgba(255, 255, 255, 0.5);
 @activeTaskBkgColor: #81B1DB;
-
 @gridColor: @mainContrastColor;
-
 @doneTaskBkgColor: @mainContrastColor;
 @doneTaskBorderColor: grey;
-
 @critBorderColor: #E83737;
 @critBkgColor: #E83737;
-
 @taskTextLightColor: @mainContrastColor;
 @taskTextDarkColor: @darkTextColor;
-
 @todayLineColor: #DB5757;

src/less/default/classDiagram.less

@@ -1,23 +1,23 @@
 g.classGroup text {
-  fill:@nodeBorder;
+  fill: @nodeBorder;
-  stroke:none;
+  stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
 
 g.classGroup rect {
-  fill:@nodeBkg;
+  fill: @nodeBkg;
   stroke: @nodeBorder;
 }
 
 g.classGroup line {
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
 
 svg .classLabel .box {
   stroke: none;
-  stroke-width:0;
+  stroke-width: 0;
   fill: @nodeBkg;
   opacity: 0.5;
 }
@@ -29,28 +29,33 @@ svg .classLabel .label {
 .relation {
   stroke: @nodeBorder;
   stroke-width: 1;
-  fill:none;
+  fill: none;
 }
 
-.composition{
+.composition {
-  fill : @nodeBorder;
+  fill: @nodeBorder;
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
+
 #compositionStart {
   .composition;
 }
+
 #compositionEnd {
   .composition;
 }
-.aggregation{
+
-  fill : @nodeBkg;
+.aggregation {
+  fill: @nodeBkg;
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
+
 #aggregationStart {
   .aggregation;
 }
+
 #aggregationEnd {
   .aggregation;
 }
@@ -58,12 +63,15 @@ svg .classLabel .label {
 #dependencyStart {
   .composition;
 }
+
 #dependencyEnd {
   .composition;
 }
+
 #extensionStart {
   .composition;
 }
+
 #extensionEnd {
   .composition;
 }

src/less/default/flow.less

@@ -1,4 +1,6 @@
-.mermaid .label { color:#333}
+.mermaid .label {
+  color: #333
+}
 
 .node rect,
 .node circle,
@@ -21,13 +23,13 @@
   background-color: @edgeLabelBackground;
 }
 
-.cluster rect{
+.cluster rect {
   fill: @secondBkg !important;
-  rx:4 !important;
+  rx: 4 !important;
   stroke: @clusterBorder !important;
   stroke-width: 1px !important;
 }
 
 .cluster text {
-  fill:@titleColor;
+  fill: @titleColor;
 }

src/less/default/gantt.less

@@ -1,134 +1,209 @@
 /** Section styling */
+
 .section {
-  stroke:none;
+  stroke: none;
-  opacity:0.2;
+  opacity: 0.2;
 }
-.section0{
+
-  fill:@sectionBkgColor;
+.section0 {
+  fill: @sectionBkgColor;
 }
+
 .section2 {
-  fill:@sectionBkgColor2;
+  fill: @sectionBkgColor2;
-}
-.section1,.section3 {
-  fill:@altSectionBkgColor;
-  opacity:0.2;
 }
 
-.sectionTitle0 { fill:@titleColor;}
+.section1,
-.sectionTitle1 { fill:@titleColor;}
+.section3 {
-.sectionTitle2 { fill:@titleColor;}
+  fill: @altSectionBkgColor;
-.sectionTitle3 { fill:@titleColor;}
+  opacity: 0.2;
+}
 
+.sectionTitle0 {
+  fill: @titleColor;
+}
+
+.sectionTitle1 {
+  fill: @titleColor;
+}
+
+.sectionTitle2 {
+  fill: @titleColor;
+}
+
+.sectionTitle3 {
+  fill: @titleColor;
+}
 
 .sectionTitle {
-  text-anchor:start;
+  text-anchor: start;
-  font-size:11px;
+  font-size: 11px;
-  text-height:14px;
+  text-height: 14px;
 }
 
+
 /* Grid and axis */
+
 .grid .tick {
   stroke: @gridColor;
   opacity: 0.3;
   shape-rendering: crispEdges;
 }
+
 .grid path {
   stroke-width: 0;
 }
 
+
 /* Today line */
+
 .today {
-  fill:none;
+  fill: none;
-  stroke:@todayLineColor;
+  stroke: @todayLineColor;
-  stroke-width:2px;
+  stroke-width: 2px;
 }
 
+
 /* Task styling */
+
+
 /* Default task */
+
 .task {
-  stroke-width:2;
+  stroke-width: 2;
 }
 
 .taskText {
-  text-anchor:middle;
+  text-anchor: middle;
-  font-size:11px;
+  font-size: 11px;
 }
+
 .taskTextOutsideRight {
-  fill:@taskTextDarkColor;
+  fill: @taskTextDarkColor;
-  text-anchor:start;
+  text-anchor: start;
-  font-size:11px;
+  font-size: 11px;
 }
+
 .taskTextOutsideLeft {
-  fill:@taskTextDarkColor;
+  fill: @taskTextDarkColor;
-  text-anchor:end;
+  text-anchor: end;
-  font-size:11px;
+  font-size: 11px;
 }
 
+
 /* Specific task settings for the sections*/
 
-.taskText0, .taskText1, .taskText2, .taskText3 {
+.taskText0,
-  fill:@taskTextColor;
+.taskText1,
+.taskText2,
+.taskText3 {
+  fill: @taskTextColor;
 }
 
-.task0, .task1, .task2, .task3 {
+.task0,
+.task1,
+.task2,
+.task3 {
   fill: @taskBkgColor;
   stroke: @taskBorderColor;
 }
 
-.taskTextOutside0,.taskTextOutside2, {
+.taskTextOutside0,
-  fill:@taskTextOutsideColor;
+.taskTextOutside2,
-}
+{
-.taskTextOutside1, .taskTextOutside3 {
+  fill: @taskTextOutsideColor;
-  fill:@taskTextOutsideColor;
 }
 
+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: @taskTextOutsideColor;
+}
+
+
 /* Active task */
-.active0, .active1, .active2, .active3 {
+
+.active0,
+.active1,
+.active2,
+.active3 {
   fill: @activeTaskBkgColor;
   stroke: @activeTaskBorderColor;
 }
 
-.activeText0, .activeText1, .activeText2, .activeText3 {
+.activeText0,
-  fill:@taskTextDarkColor !important;
+.activeText1,
-}
+.activeText2,
-/* Completed task */
+.activeText3 {
-.done0, .done1, .done2, .done3 {
+  fill: @taskTextDarkColor !important;
-  stroke:@doneTaskBorderColor;
-  fill: @doneTaskBkgColor;
-  stroke-width:2;
 }
 
-.doneText0, .doneText1, .doneText2, .doneText3 {
+
-  fill:@taskTextDarkColor !important;
+/* Completed task */
+
+.done0,
+.done1,
+.done2,
+.done3 {
+  stroke: @doneTaskBorderColor;
+  fill: @doneTaskBkgColor;
+  stroke-width: 2;
 }
 
+.doneText0,
+.doneText1,
+.doneText2,
+.doneText3 {
+  fill: @taskTextDarkColor !important;
+}
+
+
 /* Tasks on the critical line */
-.crit0, .crit1, .crit2, .crit3 {
+
-  stroke:@critBorderColor;
+.crit0,
+.crit1,
+.crit2,
+.crit3 {
+  stroke: @critBorderColor;
   fill: @critBkgColor;
-  stroke-width:2;
+  stroke-width: 2;
 }
-.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
+
-  stroke:@critBorderColor;
+.activeCrit0,
+.activeCrit1,
+.activeCrit2,
+.activeCrit3 {
+  stroke: @critBorderColor;
   fill: @activeTaskBkgColor;
-  stroke-width:2;
+  stroke-width: 2;
 }
-.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
+
-  stroke:@critBorderColor;
+.doneCrit0,
+.doneCrit1,
+.doneCrit2,
+.doneCrit3 {
+  stroke: @critBorderColor;
   fill: @doneTaskBkgColor;
-  stroke-width:2;
+  stroke-width: 2;
   cursor: pointer;
   shape-rendering: crispEdges;
 }
-.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
+
-  fill:@taskTextDarkColor !important;
+.doneCritText0,
+.doneCritText1,
+.doneCritText2,
+.doneCritText3 {
+  fill: @taskTextDarkColor !important;
 }
-.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
+
-  fill:@taskTextDarkColor !important;
+.activeCritText0,
+.activeCritText1,
+.activeCritText2,
+.activeCritText3 {
+  fill: @taskTextDarkColor !important;
 }
 
 .titleText {
-  text-anchor:middle;
+  text-anchor: middle;
-  font-size:18px;
+  font-size: 18px;
-  fill:@taskTextDarkColor;
+  fill: @taskTextDarkColor;
 }

src/less/default/mermaid.less

@@ -3,10 +3,9 @@
 @import "sequenceDiagram";
 @import "gantt";
 @import "classDiagram";
-
 .node text {
   font-family: 'trebuchet ms', verdana, arial;
-  font-size:14px;
+  font-size: 14px;
 }
 
 div.mermaidTooltip {
@@ -20,5 +19,5 @@ div.mermaidTooltip {
   border: 1px solid @border2;
   border-radius: 2px;
   pointer-events: none;
-  z-index:100;
+  z-index: 100;
 }

src/less/default/sequenceDiagram.less

@@ -2,39 +2,41 @@
   stroke: @actorBorder;
   fill: @actorBkg;
 }
+
 text.actor {
-  fill:@actorTextColor;
+  fill: @actorTextColor;
-  stroke:none;
+  stroke: none;
 }
 
 .actor-line {
-  stroke:@actorLineColor;
+  stroke: @actorLineColor;
 }
 
 .messageLine0 {
-  stroke-width:1.5;
+  stroke-width: 1.5;
   stroke-dasharray: "2 2";
-  marker-end:"url(#arrowhead)";
+  marker-end: "url(#arrowhead)";
-  stroke:@signalColor;
+  stroke: @signalColor;
 }
 
 .messageLine1 {
-  stroke-width:1.5;
+  stroke-width: 1.5;
   stroke-dasharray: "2 2";
-  stroke:@signalColor;
+  stroke: @signalColor;
 }
 
 #arrowhead {
-  fill:@signalColor;
+  fill: @signalColor;
 }
-#crosshead path {
-  fill:@signalColor !important;
-  stroke: @signalColor !important;
 
+#crosshead path {
+  fill: @signalColor !important;
+  stroke: @signalColor !important;
 }
+
 .messageText {
-  fill:@signalTextColor;
+  fill: @signalTextColor;
-  stroke:none;
+  stroke: none;
 }
 
 .labelBox {
@@ -43,19 +45,19 @@ text.actor {
 }
 
 .labelText {
-  fill:@labelTextColor;
+  fill: @labelTextColor;
-  stroke:none;
+  stroke: none;
 }
 
 .loopText {
-  fill:@labelTextColor;
+  fill: @labelTextColor;
-  stroke:none;
+  stroke: none;
 }
 
 .loopLine {
-  stroke-width:2;
+  stroke-width: 2;
   stroke-dasharray: "2 2";
-  marker-end:"url(#arrowhead)";
+  marker-end: "url(#arrowhead)";
   stroke: @labelBoxBorderColor;
 }
 
@@ -66,8 +68,8 @@ text.actor {
 }
 
 .noteText {
-  fill:black;
+  fill: black;
-  stroke:none;
+  stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
-  font-size:14px;
+  font-size: 14px;
 }

src/less/default/variables.less

@@ -1,61 +1,50 @@
 @mainBkg: #ECECFF;
 @secondBkg: #ffffde;
 @lineColor: #333333;
-@border1:#CCCCFF;
+@border1: #CCCCFF;
-@border2:#aaaa33;
+@border2: #aaaa33;
 @arrowheadColor: #333333;
 
 /* Flowchart variables */
-@nodeBkg:@mainBkg;
-@nodeBorder:@border1;
-
-@clusterBkg:@secondBkg;
-@clusterBorder:@border2;
-
-@defaultLinkColor:@lineColor;
 
+@nodeBkg: @mainBkg;
+@nodeBorder: @border1;
+@clusterBkg: @secondBkg;
+@clusterBorder: @border2;
+@defaultLinkColor: @lineColor;
 @titleColor: #333;
-
 @edgeLabelBackground: #e8e8e8;
 
 /* Sequence Diagram variables */
+
 @actorBorder: @border1;
-@actorBkg:    @mainBkg;
+@actorBkg: @mainBkg;
 @actorTextColor: black;
 @actorLineColor: grey;
-
 @signalColor: #333;
 @signalTextColor: #333;
-
 @labelBoxBkgColor: @actorBkg;
 @labelBoxBorderColor: @actorBorder;
 @labelTextColor: @actorTextColor;
-
 @noteBorderColor: @border2;
-@noteBkgColor:    #fff5ad;
+@noteBkgColor: #fff5ad;
 
 /* Gantt chart variables */
+
 @sectionBkgColor: rgba(102, 102, 255, 0.49);
 @altSectionBkgColor: white;
 @sectionBkgColor2: #fff400;
-
 @taskBorderColor: #534fbc;
 @taskBkgColor: #8a90dd;
 @taskTextColor: @taskTextLightColor;
 @taskTextOutsideColor: @taskTextDarkColor;
-
 @activeTaskBorderColor: #534fbc;
 @activeTaskBkgColor: #bfc7ff;
-
 @gridColor: lightgrey;
-
 @doneTaskBkgColor: lightgrey;
 @doneTaskBorderColor: grey;
-
 @critBorderColor: #ff8888;
 @critBkgColor: red;
-
 @taskTextLightColor: white;
 @taskTextDarkColor: black;
-
 @todayLineColor: red;

src/less/forest/classDiagram.less

@@ -1,23 +1,23 @@
 g.classGroup text {
-  fill:@nodeBorder;
+  fill: @nodeBorder;
-  stroke:none;
+  stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
 
 g.classGroup rect {
-  fill:@nodeBkg;
+  fill: @nodeBkg;
   stroke: @nodeBorder;
 }
 
 g.classGroup line {
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
 
 svg .classLabel .box {
   stroke: none;
-  stroke-width:0;
+  stroke-width: 0;
   fill: @nodeBkg;
   opacity: 0.5;
 }
@@ -29,28 +29,33 @@ svg .classLabel .label {
 .relation {
   stroke: @nodeBorder;
   stroke-width: 1;
-  fill:none;
+  fill: none;
 }
 
-.composition{
+.composition {
-  fill : @nodeBorder;
+  fill: @nodeBorder;
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
+
 #compositionStart {
   .composition;
 }
+
 #compositionEnd {
   .composition;
 }
-.aggregation{
+
-  fill : @nodeBkg;
+.aggregation {
+  fill: @nodeBkg;
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
+
 #aggregationStart {
   .aggregation;
 }
+
 #aggregationEnd {
   .aggregation;
 }
@@ -58,12 +63,15 @@ svg .classLabel .label {
 #dependencyStart {
   .composition;
 }
+
 #dependencyEnd {
   .composition;
 }
+
 #extensionStart {
   .composition;
 }
+
 #extensionEnd {
   .composition;
 }

src/less/forest/flow.less

@@ -1,6 +1,6 @@
 .mermaid .label {
   font-family: 'trebuchet ms', verdana, arial;
-color:#333
+  color: #333
 }
 
 .node rect,
@@ -25,13 +25,13 @@ color:#333
   background-color: @edgeLabelBackground;
 }
 
-.cluster rect{
+.cluster rect {
   fill: @secondBkg !important;
-  rx:4  !important;
+  rx: 4 !important;
   stroke: @clusterBorder !important;
   stroke-width: 1px !important;
 }
 
 .cluster text {
-  fill:@titleColor;
+  fill: @titleColor;
 }

src/less/forest/gantt.less

@@ -1,134 +1,209 @@
 /** Section styling */
+
 .section {
-  stroke:none;
+  stroke: none;
-  opacity:0.2;
+  opacity: 0.2;
 }
-.section0{
+
-  fill:@sectionBkgColor;
+.section0 {
+  fill: @sectionBkgColor;
 }
+
 .section2 {
-  fill:@sectionBkgColor2;
+  fill: @sectionBkgColor2;
-}
-.section1,.section3 {
-  fill:@altSectionBkgColor;
-  opacity:0.2;
 }
 
-.sectionTitle0 { fill:@titleColor;}
+.section1,
-.sectionTitle1 { fill:@titleColor;}
+.section3 {
-.sectionTitle2 { fill:@titleColor;}
+  fill: @altSectionBkgColor;
-.sectionTitle3 { fill:@titleColor;}
+  opacity: 0.2;
+}
 
+.sectionTitle0 {
+  fill: @titleColor;
+}
+
+.sectionTitle1 {
+  fill: @titleColor;
+}
+
+.sectionTitle2 {
+  fill: @titleColor;
+}
+
+.sectionTitle3 {
+  fill: @titleColor;
+}
 
 .sectionTitle {
-  text-anchor:start;
+  text-anchor: start;
-  font-size:11px;
+  font-size: 11px;
-  text-height:14px;
+  text-height: 14px;
 }
 
+
 /* Grid and axis */
+
 .grid .tick {
   stroke: @gridColor;
   opacity: 0.3;
   shape-rendering: crispEdges;
 }
+
 .grid path {
   stroke-width: 0;
 }
 
+
 /* Today line */
+
 .today {
-  fill:none;
+  fill: none;
-  stroke:@todayLineColor;
+  stroke: @todayLineColor;
-  stroke-width:2px;
+  stroke-width: 2px;
 }
 
+
 /* Task styling */
+
+
 /* Default task */
+
 .task {
-  stroke-width:2;
+  stroke-width: 2;
 }
 
 .taskText {
-  text-anchor:middle;
+  text-anchor: middle;
-  font-size:11px;
+  font-size: 11px;
 }
+
 .taskTextOutsideRight {
-  fill:@taskTextDarkColor;
+  fill: @taskTextDarkColor;
-  text-anchor:start;
+  text-anchor: start;
-  font-size:11px;
+  font-size: 11px;
 }
+
 .taskTextOutsideLeft {
-  fill:@taskTextDarkColor;
+  fill: @taskTextDarkColor;
-  text-anchor:end;
+  text-anchor: end;
-  font-size:11px;
+  font-size: 11px;
 }
 
+
 /* Specific task settings for the sections*/
 
-.taskText0, .taskText1, .taskText2, .taskText3 {
+.taskText0,
-  fill:@taskTextColor;
+.taskText1,
+.taskText2,
+.taskText3 {
+  fill: @taskTextColor;
 }
 
-.task0, .task1, .task2, .task3 {
+.task0,
+.task1,
+.task2,
+.task3 {
   fill: @taskBkgColor;
   stroke: @taskBorderColor;
 }
 
-.taskTextOutside0,.taskTextOutside2, {
+.taskTextOutside0,
-  fill:@taskTextOutsideColor;
+.taskTextOutside2,
-}
+{
-.taskTextOutside1, .taskTextOutside3 {
+  fill: @taskTextOutsideColor;
-  fill:@taskTextOutsideColor;
 }
 
+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: @taskTextOutsideColor;
+}
+
+
 /* Active task */
-.active0, .active1, .active2, .active3 {
+
+.active0,
+.active1,
+.active2,
+.active3 {
   fill: @activeTaskBkgColor;
   stroke: @activeTaskBorderColor;
 }
 
-.activeText0, .activeText1, .activeText2, .activeText3 {
+.activeText0,
-  fill:@taskTextDarkColor !important;
+.activeText1,
-}
+.activeText2,
-/* Completed task */
+.activeText3 {
-.done0, .done1, .done2, .done3 {
+  fill: @taskTextDarkColor !important;
-  stroke:@doneTaskBorderColor;
-  fill: @doneTaskBkgColor;
-  stroke-width:2;
 }
 
-.doneText0, .doneText1, .doneText2, .doneText3 {
+
-  fill:@taskTextDarkColor !important;
+/* Completed task */
+
+.done0,
+.done1,
+.done2,
+.done3 {
+  stroke: @doneTaskBorderColor;
+  fill: @doneTaskBkgColor;
+  stroke-width: 2;
 }
 
+.doneText0,
+.doneText1,
+.doneText2,
+.doneText3 {
+  fill: @taskTextDarkColor !important;
+}
+
+
 /* Tasks on the critical line */
-.crit0, .crit1, .crit2, .crit3 {
+
-  stroke:@critBorderColor;
+.crit0,
+.crit1,
+.crit2,
+.crit3 {
+  stroke: @critBorderColor;
   fill: @critBkgColor;
-  stroke-width:2;
+  stroke-width: 2;
 }
-.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
+
-  stroke:@critBorderColor;
+.activeCrit0,
+.activeCrit1,
+.activeCrit2,
+.activeCrit3 {
+  stroke: @critBorderColor;
   fill: @activeTaskBkgColor;
-  stroke-width:2;
+  stroke-width: 2;
 }
-.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
+
-  stroke:@critBorderColor;
+.doneCrit0,
+.doneCrit1,
+.doneCrit2,
+.doneCrit3 {
+  stroke: @critBorderColor;
   fill: @doneTaskBkgColor;
-  stroke-width:2;
+  stroke-width: 2;
   cursor: pointer;
   shape-rendering: crispEdges;
 }
-.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
+
-  fill:@taskTextDarkColor !important;
+.doneCritText0,
+.doneCritText1,
+.doneCritText2,
+.doneCritText3 {
+  fill: @taskTextDarkColor !important;
 }
-.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
+
-  fill:@taskTextDarkColor !important;
+.activeCritText0,
+.activeCritText1,
+.activeCritText2,
+.activeCritText3 {
+  fill: @taskTextDarkColor !important;
 }
 
 .titleText {
-  text-anchor:middle;
+  text-anchor: middle;
-  font-size:18px;
+  font-size: 18px;
-  fill:@taskTextDarkColor;
+  fill: @taskTextDarkColor;
 }

src/less/forest/mermaid.less

@@ -3,10 +3,9 @@
 @import "sequenceDiagram";
 @import "gantt";
 @import "classDiagram";
-
 .node text {
   font-family: 'trebuchet ms', verdana, arial;
-  font-size:14px;
+  font-size: 14px;
 }
 
 div.mermaidTooltip {
@@ -20,5 +19,5 @@ div.mermaidTooltip {
   border: 1px solid @border2;
   border-radius: 2px;
   pointer-events: none;
-  z-index:100;
+  z-index: 100;
 }

src/less/forest/sequenceDiagram.less

@@ -2,39 +2,41 @@
   stroke: @actorBorder;
   fill: @actorBkg;
 }
+
 text.actor {
-  fill:@actorTextColor;
+  fill: @actorTextColor;
-  stroke:none;
+  stroke: none;
 }
 
 .actor-line {
-  stroke:@actorLineColor;
+  stroke: @actorLineColor;
 }
 
 .messageLine0 {
-  stroke-width:1.5;
+  stroke-width: 1.5;
   stroke-dasharray: "2 2";
-  marker-end:"url(#arrowhead)";
+  marker-end: "url(#arrowhead)";
-  stroke:@signalColor;
+  stroke: @signalColor;
 }
 
 .messageLine1 {
-  stroke-width:1.5;
+  stroke-width: 1.5;
   stroke-dasharray: "2 2";
-  stroke:@signalColor;
+  stroke: @signalColor;
 }
 
 #arrowhead {
-  fill:@signalColor;
+  fill: @signalColor;
 }
-#crosshead path {
-  fill:@signalColor !important;
-  stroke: @signalColor !important;
 
+#crosshead path {
+  fill: @signalColor !important;
+  stroke: @signalColor !important;
 }
+
 .messageText {
-  fill:@signalTextColor;
+  fill: @signalTextColor;
-  stroke:none;
+  stroke: none;
 }
 
 .labelBox {
@@ -43,19 +45,19 @@ text.actor {
 }
 
 .labelText {
-  fill:@labelTextColor;
+  fill: @labelTextColor;
-  stroke:none;
+  stroke: none;
 }
 
 .loopText {
-  fill:@labelTextColor;
+  fill: @labelTextColor;
-  stroke:none;
+  stroke: none;
 }
 
 .loopLine {
-  stroke-width:2;
+  stroke-width: 2;
   stroke-dasharray: "2 2";
-  marker-end:"url(#arrowhead)";
+  marker-end: "url(#arrowhead)";
   stroke: @labelBoxBorderColor;
 }
 
@@ -66,8 +68,8 @@ text.actor {
 }
 
 .noteText {
-  fill:black;
+  fill: black;
-  stroke:none;
+  stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
-  font-size:14px;
+  font-size: 14px;
 }

src/less/forest/variables.less

@@ -7,56 +7,46 @@
 @arrowheadColor: green;
 
 /* Flowchart variables */
-@nodeBkg:@mainBkg;
-@nodeBorder:@border1;
-
-@clusterBkg:@secondBkg;
-@clusterBorder:@border2;
-
-@defaultLinkColor:@lineColor;
 
+@nodeBkg: @mainBkg;
+@nodeBorder: @border1;
+@clusterBkg: @secondBkg;
+@clusterBorder: @border2;
+@defaultLinkColor: @lineColor;
 @titleColor: #333;
-
 @edgeLabelBackground: #e8e8e8;
 
 /* Sequence Diagram variables */
+
 @actorBorder: @border1;
-@actorBkg:    @mainBkg;
+@actorBkg: @mainBkg;
 @actorTextColor: black;
 @actorLineColor: grey;
-
 @signalColor: #333;
 @signalTextColor: #333;
-
 @labelBoxBkgColor: @actorBkg;
 @labelBoxBorderColor: #326932;
 @labelTextColor: @actorTextColor;
-
 @noteBorderColor: @border2;
-@noteBkgColor:    #fff5ad;
+@noteBkgColor: #fff5ad;
 
 /* Gantt chart variables */
-@sectionBkgColor: #6eaa49;;
+
+@sectionBkgColor: #6eaa49;
+;
 @altSectionBkgColor: white;
 @sectionBkgColor2: #6eaa49;
-
 @taskBorderColor: @border1;
 @taskBkgColor: #487e3a;
 @taskTextColor: @taskTextLightColor;
 @taskTextOutsideColor: @taskTextDarkColor;
-
 @activeTaskBorderColor: @taskBorderColor;
 @activeTaskBkgColor: @mainBkg;
-
 @gridColor: lightgrey;
-
 @doneTaskBkgColor: lightgrey;
 @doneTaskBorderColor: grey;
-
 @critBorderColor: #ff8888;
 @critBkgColor: red;
-
 @taskTextLightColor: white;
 @taskTextDarkColor: black;
-
 @todayLineColor: red;

src/less/neutral/classDiagram.less

@@ -1,23 +1,23 @@
 g.classGroup text {
   fill: @nodeBorder;
-  stroke:none;
+  stroke: none;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
 }
 
 g.classGroup rect {
-  fill:@nodeBkg;
+  fill: @nodeBkg;
   stroke: @nodeBorder;
 }
 
 g.classGroup line {
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
 
 svg .classLabel .box {
   stroke: none;
-  stroke-width:0;
+  stroke-width: 0;
   fill: @nodeBkg;
   opacity: 0.5;
 }
@@ -29,28 +29,33 @@ svg .classLabel .label {
 .relation {
   stroke: @nodeBorder;
   stroke-width: 1;
-  fill:none;
+  fill: none;
 }
 
-.composition{
+.composition {
-  fill : @nodeBorder;
+  fill: @nodeBorder;
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
+
 #compositionStart {
   .composition;
 }
+
 #compositionEnd {
   .composition;
 }
-.aggregation{
+
-  fill : @nodeBkg;
+.aggregation {
+  fill: @nodeBkg;
   stroke: @nodeBorder;
-  stroke-width:1;
+  stroke-width: 1;
 }
+
 #aggregationStart {
   .aggregation;
 }
+
 #aggregationEnd {
   .aggregation;
 }
@@ -58,12 +63,15 @@ svg .classLabel .label {
 #dependencyStart {
   .composition;
 }
+
 #dependencyEnd {
   .composition;
 }
+
 #extensionStart {
   .composition;
 }
+
 #extensionEnd {
   .composition;
 }

src/less/neutral/flow.less

@@ -1,4 +1,6 @@
-.mermaid .label { color: @text }
+.mermaid .label {
+  color: @text
+}
 
 .node rect,
 .node circle,

src/less/neutral/gantt.less

@@ -1,24 +1,39 @@
 /** Section styling */
+
 .section {
   stroke: none;
-  opacity:0.2;
+  opacity: 0.2;
 }
-.section0{
+
+.section0 {
   fill: @sectionBkgColor;
 }
+
 .section2 {
   fill: @sectionBkgColor2;
 }
-.section1,.section3 {
+
+.section1,
+.section3 {
   fill: @altSectionBkgColor;
   opacity: 0.2;
 }
 
-.sectionTitle0 { fill: @titleColor;}
+.sectionTitle0 {
-.sectionTitle1 { fill: @titleColor;}
+  fill: @titleColor;
-.sectionTitle2 { fill: @titleColor;}
+}
-.sectionTitle3 { fill: @titleColor;}
 
+.sectionTitle1 {
+  fill: @titleColor;
+}
+
+.sectionTitle2 {
+  fill: @titleColor;
+}
+
+.sectionTitle3 {
+  fill: @titleColor;
+}
 
 .sectionTitle {
   text-anchor: start;
@@ -26,25 +41,34 @@
   text-height: 14px;
 }
 
+
 /* Grid and axis */
+
 .grid .tick {
   stroke: @gridColor;
   opacity: 0.3;
   shape-rendering: crispEdges;
 }
+
 .grid path {
   stroke-width: 0;
 }
 
+
 /* Today line */
+
 .today {
   fill: none;
   stroke: @todayLineColor;
   stroke-width: 2px;
 }
 
+
 /* Task styling */
+
+
 /* Default task */
+
 .task {
   stroke-width: 2;
 }
@@ -53,77 +77,127 @@
   text-anchor: middle;
   font-size: 11px;
 }
+
 .taskTextOutsideRight {
   fill: @taskTextDarkColor;
   text-anchor: start;
   font-size: 11px;
 }
+
 .taskTextOutsideLeft {
   fill: @taskTextDarkColor;
   text-anchor: end;
   font-size: 11px;
 }
 
+
 /* Specific task settings for the sections*/
 
-.taskText0, .taskText1, .taskText2, .taskText3 {
+.taskText0,
+.taskText1,
+.taskText2,
+.taskText3 {
   fill: @taskTextColor;
 }
 
-.task0, .task1, .task2, .task3 {
+.task0,
+.task1,
+.task2,
+.task3 {
   fill: @taskBkgColor;
   stroke: @taskBorderColor;
 }
 
-.taskTextOutside0,.taskTextOutside2, {
+.taskTextOutside0,
-  fill: @taskTextOutsideColor;
+.taskTextOutside2,
-}
+{
-.taskTextOutside1, .taskTextOutside3 {
   fill: @taskTextOutsideColor;
 }
 
+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: @taskTextOutsideColor;
+}
+
+
 /* Active task */
-.active0, .active1, .active2, .active3 {
+
+.active0,
+.active1,
+.active2,
+.active3 {
   fill: @activeTaskBkgColor;
   stroke: @activeTaskBorderColor;
 }
 
-.activeText0, .activeText1, .activeText2, .activeText3 {
+.activeText0,
+.activeText1,
+.activeText2,
+.activeText3 {
   fill: @taskTextDarkColor !important;
 }
+
+
 /* Completed task */
-.done0, .done1, .done2, .done3 {
+
+.done0,
+.done1,
+.done2,
+.done3 {
   stroke: @doneTaskBorderColor;
   fill: @doneTaskBkgColor;
   stroke-width: 2;
 }
 
-.doneText0, .doneText1, .doneText2, .doneText3 {
+.doneText0,
+.doneText1,
+.doneText2,
+.doneText3 {
   fill: @taskTextDarkColor !important;
 }
 
+
 /* Tasks on the critical line */
-.crit0, .crit1, .crit2, .crit3 {
+
-  stroke:@critBorderColor;
+.crit0,
+.crit1,
+.crit2,
+.crit3 {
+  stroke: @critBorderColor;
   fill: @critBkgColor;
   stroke-width: 2;
 }
-.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
+
+.activeCrit0,
+.activeCrit1,
+.activeCrit2,
+.activeCrit3 {
   stroke: @critBorderColor;
   fill: @activeTaskBkgColor;
   stroke-width: 2;
 }
-.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
+
+.doneCrit0,
+.doneCrit1,
+.doneCrit2,
+.doneCrit3 {
   stroke: @critBorderColor;
-  fill:  @doneTaskBkgColor;
+  fill: @doneTaskBkgColor;
   stroke-width: 2;
-  cursor: pointer;
+  cursor: pointer; //shape-rendering: crispEdges;
-  //shape-rendering: crispEdges;
 }
-.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
+
+.doneCritText0,
+.doneCritText1,
+.doneCritText2,
+.doneCritText3 {
   fill: @taskTextDarkColor !important;
 }
-.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
+
+.activeCritText0,
+.activeCritText1,
+.activeCritText2,
+.activeCritText3 {
   fill: @taskTextDarkColor !important;
 }
 

src/less/neutral/mermaid.less

@@ -3,10 +3,9 @@
 @import "sequenceDiagram";
 @import "gantt";
 @import "classDiagram";
-
 .node text {
   font-family: Arial, Helvetica, sans-serif;
-  font-size:14px;
+  font-size: 14px;
 }
 
 div.mermaidTooltip {
@@ -20,5 +19,5 @@ div.mermaidTooltip {
   border: 1px solid @border2;
   border-radius: 2px;
   pointer-events: none;
-  z-index:100;
+  z-index: 100;
 }

src/less/neutral/sequenceDiagram.less

@@ -2,6 +2,7 @@
   stroke: @actorBorder;
   fill: @actorBkg;
 }
+
 text.actor {
   fill: @actorTextColor;
   stroke: none;
@@ -27,11 +28,12 @@ text.actor {
 #arrowhead {
   fill: @signalColor;
 }
+
 #crosshead path {
   fill: @signalColor !important;
   stroke: @signalColor !important;
-
 }
+
 .messageText {
   fill: @signalTextColor;
   stroke: none;

src/less/neutral/variables.less

@@ -1,66 +1,54 @@
-@mainBkg:   #eee;
+@mainBkg: #eee;
 @secondBkg: lighten(@contrast, 55%);
 @lineColor: #666;
-@border1:   #999;
+@border1: #999;
-@border2:   @contrast;
+@border2: @contrast;
-
+@note: #ffa;
-@note:      #ffa;
+@text: #333;
-@text:      #333;
+@contrast: #26a;
-@contrast:  #26a;
+@critical: #d42;
-@critical:  #d42;
+@done: #bbb;
-@done:      #bbb;
 
 /* Flowchart variables */
+
 @nodeBkg: @mainBkg;
 @nodeBorder: @border1;
-
 @clusterBkg: @secondBkg;
 @clusterBorder: @border2;
-
 @defaultLinkColor: @lineColor;
-
 @titleColor: @text;
-
 @edgeLabelBackground: white;
 
 /* Sequence Diagram variables */
+
 @actorBorder: @border1;
-@actorBkg:    @mainBkg;
+@actorBkg: @mainBkg;
 @actorTextColor: @text;
 @actorLineColor: @lineColor;
-
 @signalColor: @text;
 @signalTextColor: @text;
-
 @labelBoxBkgColor: @contrast;
 @labelBoxBorderColor: @contrast;
 @labelTextColor: white;
-
 @noteBorderColor: darken(@note, 60%);
-@noteBkgColor:    @note;
+@noteBkgColor: @note;
 
 /* Gantt chart variables */
+
 @sectionBkgColor: lighten(@contrast, 30%);
 @altSectionBkgColor: white;
 @sectionBkgColor2: lighten(@contrast, 30%);
-
 @taskBorderColor: darken(@contrast, 10%);
 @taskBkgColor: @contrast;
 @taskTextColor: @taskTextLightColor;
 @taskTextOutsideColor: @taskTextDarkColor;
-
 @activeTaskBorderColor: @taskBorderColor;
 @activeTaskBkgColor: @mainBkg;
-
 @gridColor: lighten(@border1, 30%);
-
 @doneTaskBkgColor: @done;
 @doneTaskBorderColor: @lineColor;
-
 @critBorderColor: darken(@critBkgColor, 10%);
 @critBkgColor: @critical;
-
 @taskTextLightColor: white;
 @taskTextDarkColor: @text;
-
 @todayLineColor: @critBkgColor;