beautify less code

2025-09-18 23:09:49 +02:00 · 2017-04-22 20:37:43 +08:00
parent 727f6c0e28
commit 7072979cfc
24 changed files with 676 additions and 381 deletions
--- a/src/less/dark/classDiagram.less
+++ b/src/less/dark/classDiagram.less
@@ -1,23 +1,23 @@
 g.classGroup text {
-  fill:@nodeBorder;
-  stroke:none;
+  fill: @nodeBorder;
+  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{
-  fill : @nodeBorder;
+.composition {
+  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;
 }
--- a/src/less/dark/flow.less
+++ b/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;
--- a/src/less/dark/gantt.less
+++ b/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;}
-.sectionTitle1 { fill: @titleColor;}
-.sectionTitle2 { fill: @titleColor;}
-.sectionTitle3 { fill: @titleColor;}
+.sectionTitle0 {
+  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, {
-  fill: @taskTextOutsideColor;
-}
-.taskTextOutside1, .taskTextOutside3 {
+.taskTextOutside0,
+.taskTextOutside2,
+{
  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;
 }

--- a/src/less/dark/mermaid.less
+++ b/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;
 }
--- a/src/less/dark/sequenceDiagram.less
+++ b/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;
--- a/src/less/dark/variables.less
+++ b/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;
--- a/src/less/default/classDiagram.less
+++ b/src/less/default/classDiagram.less
@@ -1,23 +1,23 @@
 g.classGroup text {
-  fill:@nodeBorder;
-  stroke:none;
+  fill: @nodeBorder;
+  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{
-  fill : @nodeBorder;
+.composition {
+  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;
 }
--- a/src/less/default/flow.less
+++ b/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;
 }
--- a/src/less/default/gantt.less
+++ b/src/less/default/gantt.less
@@ -1,134 +1,209 @@
 /** Section styling */
+
 .section {
-  stroke:none;
-  opacity:0.2;
+  stroke: none;
+  opacity: 0.2;
 }
-.section0{
-  fill:@sectionBkgColor;
+
+.section0 {
+  fill: @sectionBkgColor;
 }
+
 .section2 {
-  fill:@sectionBkgColor2;
-}
-.section1,.section3 {
-  fill:@altSectionBkgColor;
-  opacity:0.2;
+  fill: @sectionBkgColor2;
 }

-.sectionTitle0 { fill:@titleColor;}
-.sectionTitle1 { fill:@titleColor;}
-.sectionTitle2 { fill:@titleColor;}
-.sectionTitle3 { fill:@titleColor;}
+.section1,
+.section3 {
+  fill: @altSectionBkgColor;
+  opacity: 0.2;
+}

+.sectionTitle0 {
+  fill: @titleColor;
+}
+
+.sectionTitle1 {
+  fill: @titleColor;
+}
+
+.sectionTitle2 {
+  fill: @titleColor;
+}
+
+.sectionTitle3 {
+  fill: @titleColor;
+}

 .sectionTitle {
-  text-anchor:start;
-  font-size:11px;
-  text-height:14px;
+  text-anchor: start;
+  font-size: 11px;
+  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;
+  fill: none;
+  stroke: @todayLineColor;
+  stroke-width: 2px;
 }

+
 /* Task styling */
+
+
 /* Default task */
+
 .task {
-  stroke-width:2;
+  stroke-width: 2;
 }

 .taskText {
-  text-anchor:middle;
-  font-size:11px;
+  text-anchor: middle;
+  font-size: 11px;
 }
+
 .taskTextOutsideRight {
-  fill:@taskTextDarkColor;
-  text-anchor:start;
-  font-size:11px;
+  fill: @taskTextDarkColor;
+  text-anchor: start;
+  font-size: 11px;
 }
+
 .taskTextOutsideLeft {
-  fill:@taskTextDarkColor;
-  text-anchor:end;
-  font-size:11px;
+  fill: @taskTextDarkColor;
+  text-anchor: end;
+  font-size: 11px;
 }

+
 /* Specific task settings for the sections*/

-.taskText0, .taskText1, .taskText2, .taskText3 {
-  fill:@taskTextColor;
+.taskText0,
+.taskText1,
+.taskText2,
+.taskText3 {
+  fill: @taskTextColor;
 }

-.task0, .task1, .task2, .task3 {
+.task0,
+.task1,
+.task2,
+.task3 {
  fill: @taskBkgColor;
  stroke: @taskBorderColor;
 }

-.taskTextOutside0,.taskTextOutside2, {
-  fill:@taskTextOutsideColor;
-}
-.taskTextOutside1, .taskTextOutside3 {
-  fill:@taskTextOutsideColor;
+.taskTextOutside0,
+.taskTextOutside2,
+{
+  fill: @taskTextOutsideColor;
 }

+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: @taskTextOutsideColor;
+}
+
+
 /* Active task */
-.active0, .active1, .active2, .active3 {
+
+.active0,
+.active1,
+.active2,
+.active3 {
  fill: @activeTaskBkgColor;
  stroke: @activeTaskBorderColor;
 }

-.activeText0, .activeText1, .activeText2, .activeText3 {
-  fill:@taskTextDarkColor !important;
-}
-/* Completed task */
-.done0, .done1, .done2, .done3 {
-  stroke:@doneTaskBorderColor;
-  fill: @doneTaskBkgColor;
-  stroke-width:2;
+.activeText0,
+.activeText1,
+.activeText2,
+.activeText3 {
+  fill: @taskTextDarkColor !important;
 }

-.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;
-  font-size:18px;
-  fill:@taskTextDarkColor;
+  text-anchor: middle;
+  font-size: 18px;
+  fill: @taskTextDarkColor;
 }
--- a/src/less/default/mermaid.less
+++ b/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;
 }
--- a/src/less/default/sequenceDiagram.less
+++ b/src/less/default/sequenceDiagram.less
@@ -2,39 +2,41 @@
  stroke: @actorBorder;
  fill: @actorBkg;
 }
+
 text.actor {
-  fill:@actorTextColor;
-  stroke:none;
+  fill: @actorTextColor;
+  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)";
-  stroke:@signalColor;
+  marker-end: "url(#arrowhead)";
+  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;
-  stroke:none;
+  fill: @signalTextColor;
+  stroke: none;
 }

 .labelBox {
@@ -43,19 +45,19 @@ text.actor {
 }

 .labelText {
-  fill:@labelTextColor;
-  stroke:none;
+  fill: @labelTextColor;
+  stroke: none;
 }

 .loopText {
-  fill:@labelTextColor;
-  stroke:none;
+  fill: @labelTextColor;
+  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;
-  stroke:none;
+  fill: black;
+  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
-  font-size:14px;
+  font-size: 14px;
 }
--- a/src/less/default/variables.less
+++ b/src/less/default/variables.less
@@ -1,61 +1,50 @@
@mainBkg: #ECECFF;
@secondBkg: #ffffde;
@lineColor: #333333;
-@border1:#CCCCFF;
-@border2:#aaaa33;
+@border1: #CCCCFF;
+@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;
--- a/src/less/forest/classDiagram.less
+++ b/src/less/forest/classDiagram.less
@@ -1,23 +1,23 @@
 g.classGroup text {
-  fill:@nodeBorder;
-  stroke:none;
+  fill: @nodeBorder;
+  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{
-  fill : @nodeBorder;
+.composition {
+  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;
 }
--- a/src/less/forest/flow.less
+++ b/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;
 }
--- a/src/less/forest/gantt.less
+++ b/src/less/forest/gantt.less
@@ -1,134 +1,209 @@
 /** Section styling */
+
 .section {
-  stroke:none;
-  opacity:0.2;
+  stroke: none;
+  opacity: 0.2;
 }
-.section0{
-  fill:@sectionBkgColor;
+
+.section0 {
+  fill: @sectionBkgColor;
 }
+
 .section2 {
-  fill:@sectionBkgColor2;
-}
-.section1,.section3 {
-  fill:@altSectionBkgColor;
-  opacity:0.2;
+  fill: @sectionBkgColor2;
 }

-.sectionTitle0 { fill:@titleColor;}
-.sectionTitle1 { fill:@titleColor;}
-.sectionTitle2 { fill:@titleColor;}
-.sectionTitle3 { fill:@titleColor;}
+.section1,
+.section3 {
+  fill: @altSectionBkgColor;
+  opacity: 0.2;
+}

+.sectionTitle0 {
+  fill: @titleColor;
+}
+
+.sectionTitle1 {
+  fill: @titleColor;
+}
+
+.sectionTitle2 {
+  fill: @titleColor;
+}
+
+.sectionTitle3 {
+  fill: @titleColor;
+}

 .sectionTitle {
-  text-anchor:start;
-  font-size:11px;
-  text-height:14px;
+  text-anchor: start;
+  font-size: 11px;
+  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;
+  fill: none;
+  stroke: @todayLineColor;
+  stroke-width: 2px;
 }

+
 /* Task styling */
+
+
 /* Default task */
+
 .task {
-  stroke-width:2;
+  stroke-width: 2;
 }

 .taskText {
-  text-anchor:middle;
-  font-size:11px;
+  text-anchor: middle;
+  font-size: 11px;
 }
+
 .taskTextOutsideRight {
-  fill:@taskTextDarkColor;
-  text-anchor:start;
-  font-size:11px;
+  fill: @taskTextDarkColor;
+  text-anchor: start;
+  font-size: 11px;
 }
+
 .taskTextOutsideLeft {
-  fill:@taskTextDarkColor;
-  text-anchor:end;
-  font-size:11px;
+  fill: @taskTextDarkColor;
+  text-anchor: end;
+  font-size: 11px;
 }

+
 /* Specific task settings for the sections*/

-.taskText0, .taskText1, .taskText2, .taskText3 {
-  fill:@taskTextColor;
+.taskText0,
+.taskText1,
+.taskText2,
+.taskText3 {
+  fill: @taskTextColor;
 }

-.task0, .task1, .task2, .task3 {
+.task0,
+.task1,
+.task2,
+.task3 {
  fill: @taskBkgColor;
  stroke: @taskBorderColor;
 }

-.taskTextOutside0,.taskTextOutside2, {
-  fill:@taskTextOutsideColor;
-}
-.taskTextOutside1, .taskTextOutside3 {
-  fill:@taskTextOutsideColor;
+.taskTextOutside0,
+.taskTextOutside2,
+{
+  fill: @taskTextOutsideColor;
 }

+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: @taskTextOutsideColor;
+}
+
+
 /* Active task */
-.active0, .active1, .active2, .active3 {
+
+.active0,
+.active1,
+.active2,
+.active3 {
  fill: @activeTaskBkgColor;
  stroke: @activeTaskBorderColor;
 }

-.activeText0, .activeText1, .activeText2, .activeText3 {
-  fill:@taskTextDarkColor !important;
-}
-/* Completed task */
-.done0, .done1, .done2, .done3 {
-  stroke:@doneTaskBorderColor;
-  fill: @doneTaskBkgColor;
-  stroke-width:2;
+.activeText0,
+.activeText1,
+.activeText2,
+.activeText3 {
+  fill: @taskTextDarkColor !important;
 }

-.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;
-  font-size:18px;
-  fill:@taskTextDarkColor;
+  text-anchor: middle;
+  font-size: 18px;
+  fill: @taskTextDarkColor;
 }
--- a/src/less/forest/mermaid.less
+++ b/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;
 }
--- a/src/less/forest/sequenceDiagram.less
+++ b/src/less/forest/sequenceDiagram.less
@@ -2,39 +2,41 @@
  stroke: @actorBorder;
  fill: @actorBkg;
 }
+
 text.actor {
-  fill:@actorTextColor;
-  stroke:none;
+  fill: @actorTextColor;
+  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)";
-  stroke:@signalColor;
+  marker-end: "url(#arrowhead)";
+  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;
-  stroke:none;
+  fill: @signalTextColor;
+  stroke: none;
 }

 .labelBox {
@@ -43,19 +45,19 @@ text.actor {
 }

 .labelText {
-  fill:@labelTextColor;
-  stroke:none;
+  fill: @labelTextColor;
+  stroke: none;
 }

 .loopText {
-  fill:@labelTextColor;
-  stroke:none;
+  fill: @labelTextColor;
+  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;
-  stroke:none;
+  fill: black;
+  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
-  font-size:14px;
+  font-size: 14px;
 }
--- a/src/less/forest/variables.less
+++ b/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;
--- a/src/less/neutral/classDiagram.less
+++ b/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{
-  fill : @nodeBorder;
+.composition {
+  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;
 }
--- a/src/less/neutral/flow.less
+++ b/src/less/neutral/flow.less
@@ -1,4 +1,6 @@
-.mermaid .label { color: @text }
+.mermaid .label {
+  color: @text
+}

 .node rect,
 .node circle,
--- a/src/less/neutral/gantt.less
+++ b/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;}
-.sectionTitle1 { fill: @titleColor;}
-.sectionTitle2 { fill: @titleColor;}
-.sectionTitle3 { fill: @titleColor;}
+.sectionTitle0 {
+  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, {
-  fill: @taskTextOutsideColor;
-}
-.taskTextOutside1, .taskTextOutside3 {
+.taskTextOutside0,
+.taskTextOutside2,
+{
  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;
-  //shape-rendering: crispEdges;
+  cursor: pointer; //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;
 }

--- a/src/less/neutral/mermaid.less
+++ b/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;
 }
--- a/src/less/neutral/sequenceDiagram.less
+++ b/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;
--- a/src/less/neutral/variables.less
+++ b/src/less/neutral/variables.less
@@ -1,66 +1,54 @@
-@mainBkg:   #eee;
+@mainBkg: #eee;
@secondBkg: lighten(@contrast, 55%);
@lineColor: #666;
-@border1:   #999;
-@border2:   @contrast;
-
-@note:      #ffa;
-@text:      #333;
-@contrast:  #26a;
-@critical:  #d42;
-@done:      #bbb;
+@border1: #999;
+@border2: @contrast;
+@note: #ffa;
+@text: #333;
+@contrast: #26a;
+@critical: #d42;
+@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;