From 7072979cfc6b0cc26eada4d6e9bd4ba0958517b9 Mon Sep 17 00:00:00 2001 From: Tyler Long Date: Sat, 22 Apr 2017 20:37:43 +0800 Subject: [PATCH] beautify less code --- src/less/dark/classDiagram.less | 32 ++-- src/less/dark/flow.less | 7 +- src/less/dark/gantt.less | 118 ++++++++++++--- src/less/dark/mermaid.less | 5 +- src/less/dark/sequenceDiagram.less | 3 +- src/less/dark/variables.less | 30 ++-- src/less/default/classDiagram.less | 32 ++-- src/less/default/flow.less | 10 +- src/less/default/gantt.less | 201 ++++++++++++++++++-------- src/less/default/mermaid.less | 5 +- src/less/default/sequenceDiagram.less | 48 +++--- src/less/default/variables.less | 33 ++--- src/less/forest/classDiagram.less | 32 ++-- src/less/forest/flow.less | 8 +- src/less/forest/gantt.less | 201 ++++++++++++++++++-------- src/less/forest/mermaid.less | 5 +- src/less/forest/sequenceDiagram.less | 48 +++--- src/less/forest/variables.less | 32 ++-- src/less/neutral/classDiagram.less | 30 ++-- src/less/neutral/flow.less | 4 +- src/less/neutral/gantt.less | 126 ++++++++++++---- src/less/neutral/mermaid.less | 5 +- src/less/neutral/sequenceDiagram.less | 4 +- src/less/neutral/variables.less | 38 ++--- 24 files changed, 676 insertions(+), 381 deletions(-) diff --git a/src/less/dark/classDiagram.less b/src/less/dark/classDiagram.less index b53bd20b0..31ef1845d 100644 --- 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; } diff --git a/src/less/dark/flow.less b/src/less/dark/flow.less index a108bbccd..fc9fbed15 100644 --- 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; diff --git a/src/less/dark/gantt.less b/src/less/dark/gantt.less index d5e735af3..82e546009 100644 --- 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; } diff --git a/src/less/dark/mermaid.less b/src/less/dark/mermaid.less index a37e3ee0b..53ba6c146 100644 --- 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; } diff --git a/src/less/dark/sequenceDiagram.less b/src/less/dark/sequenceDiagram.less index 636a31412..c2ee2fde8 100644 --- 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; diff --git a/src/less/dark/variables.less b/src/less/dark/variables.less index c77932990..4bbb8b49e 100644 --- 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; diff --git a/src/less/default/classDiagram.less b/src/less/default/classDiagram.less index b53bd20b0..31ef1845d 100644 --- 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; } diff --git a/src/less/default/flow.less b/src/less/default/flow.less index dcd66c1ba..47de95fff 100644 --- 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; } diff --git a/src/less/default/gantt.less b/src/less/default/gantt.less index a7f9d2041..8cab68007 100644 --- 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; } diff --git a/src/less/default/mermaid.less b/src/less/default/mermaid.less index a37e3ee0b..53ba6c146 100644 --- 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; } diff --git a/src/less/default/sequenceDiagram.less b/src/less/default/sequenceDiagram.less index e4a540e26..3b468fd78 100644 --- 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; } diff --git a/src/less/default/variables.less b/src/less/default/variables.less index efe7022f2..d67b9817b 100644 --- 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; diff --git a/src/less/forest/classDiagram.less b/src/less/forest/classDiagram.less index b53bd20b0..31ef1845d 100644 --- 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; } diff --git a/src/less/forest/flow.less b/src/less/forest/flow.less index 70da2de75..2b3469b6e 100644 --- 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; } diff --git a/src/less/forest/gantt.less b/src/less/forest/gantt.less index a7f9d2041..8cab68007 100644 --- 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; } diff --git a/src/less/forest/mermaid.less b/src/less/forest/mermaid.less index a37e3ee0b..53ba6c146 100644 --- 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; } diff --git a/src/less/forest/sequenceDiagram.less b/src/less/forest/sequenceDiagram.less index e4a540e26..3b468fd78 100644 --- 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; } diff --git a/src/less/forest/variables.less b/src/less/forest/variables.less index 9a0795fc9..e18b8ca17 100644 --- 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; diff --git a/src/less/neutral/classDiagram.less b/src/less/neutral/classDiagram.less index 12e8bdf48..df1dd8ac4 100644 --- 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; } diff --git a/src/less/neutral/flow.less b/src/less/neutral/flow.less index 270d5f3f0..26791adc2 100644 --- 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, diff --git a/src/less/neutral/gantt.less b/src/less/neutral/gantt.less index 8569e423e..78cc0444c 100644 --- 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; } diff --git a/src/less/neutral/mermaid.less b/src/less/neutral/mermaid.less index f383ee5b6..d19b3d81a 100644 --- 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; } diff --git a/src/less/neutral/sequenceDiagram.less b/src/less/neutral/sequenceDiagram.less index 1549625f8..ca62a3c1f 100644 --- 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; diff --git a/src/less/neutral/variables.less b/src/less/neutral/variables.less index 9ffa493ff..8813285b7 100644 --- 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;