New neutral theme

src/less/neutral/classDiagram.less

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

src/less/neutral/flow.less

@@ -0,0 +1,30 @@
+.mermaid .label { color: @text }
+
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon {
+ fill: @mainBkg;
+ stroke: @nodeBorder;
+ stroke-width: 1px;
+}
+
+.edgePath .path {
+ stroke: @lineColor;
+ stroke-width: 1.5px;
+}
+
+.edgeLabel {
+ background-color: @edgeLabelBackground;
+}
+
+.cluster rect {
+ fill: @secondBkg !important;
+ rx: 4 !important;
+ stroke: @clusterBorder !important;
+ stroke-width: 1px !important;
+}
+
+.cluster text {
+ fill: @titleColor;
+}

src/less/neutral/gantt.less

@@ -0,0 +1,135 @@
+/** Section styling */
+.section {
+ stroke: none;
+ opacity:0.2;
+}
+.section0{
+ fill: @sectionBkgColor;
+}
+.section2 {
+ fill: @sectionBkgColor2;
+}
+.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;
+}
+
+/* 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;
+}
+
+.taskText {
+ 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 {
+ fill: @taskTextColor;
+}
+
+.task0, .task1, .task2, .task3 {
+ fill: @taskBkgColor;
+ stroke: @taskBorderColor;
+}
+
+.taskTextOutside0,.taskTextOutside2, {
+ fill: @taskTextOutsideColor;
+}
+.taskTextOutside1, .taskTextOutside3 {
+ fill: @taskTextOutsideColor;
+}
+
+/* Active task */
+.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;
+}
+
+.doneText0, .doneText1, .doneText2, .doneText3 {
+ fill: @taskTextDarkColor !important;
+}
+
+/* Tasks on the critical line */
+.crit0, .crit1, .crit2, .crit3 {
+ stroke:@critBorderColor;
+ fill: @critBkgColor;
+ stroke-width: 2;
+}
+.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
+ stroke: @critBorderColor;
+ fill: @activeTaskBkgColor;
+ stroke-width: 2;
+}
+.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
+ stroke: @critBorderColor;
+ fill: @doneTaskBkgColor;
+ stroke-width: 2;
+ cursor: pointer;
+ //shape-rendering: crispEdges;
+}
+.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
+ fill: @taskTextDarkColor !important;
+}
+.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
+ fill: @taskTextDarkColor !important;
+}
+
+.titleText {
+ text-anchor: middle;
+ font-size: 18px;
+ fill: @taskTextDarkColor;
+}
+

src/less/neutral/mermaid.less

@@ -0,0 +1,24 @@
+@import "variables";
+@import "flow";
+@import "sequenceDiagram";
+@import "gantt";
+@import "classDiagram";
+
+.node text {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size:14px;
+}
+
+div.mermaidTooltip {
+ position: absolute;
+ text-align: center;
+ max-width: 200px;
+ padding: 2px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ background: @secondBkg;
+ border: 1px solid @border2;
+ border-radius: 2px;
+ pointer-events: none;
+ z-index:100;
+}

src/less/neutral/sequenceDiagram.less

@@ -0,0 +1,75 @@
+
+
+.actor {
+ stroke: @actorBorder;
+ fill: @actorBkg;
+}
+text.actor {
+ fill: @actorTextColor;
+ stroke: none;
+}
+
+.actor-line {
+ stroke: @actorLineColor;
+}
+
+.messageLine0 {
+ stroke-width: 1.5;
+ stroke-dasharray: "2 2";
+ marker-end: "url(#arrowhead)";
+ stroke: @signalColor;
+}
+
+.messageLine1 {
+ stroke-width: 1.5;
+ stroke-dasharray: "2 2";
+ stroke: @signalColor;
+}
+
+#arrowhead {
+ fill: @signalColor;
+}
+#crosshead path {
+ fill: @signalColor !important;
+ stroke: @signalColor !important;
+
+}
+.messageText {
+ fill: @signalTextColor;
+ stroke: none;
+}
+
+.labelBox {
+ stroke: @labelBoxBorderColor;
+ fill: @labelBoxBkgColor;
+}
+
+.labelText {
+ fill: @labelTextColor;
+ stroke: none;
+}
+
+.loopText {
+ fill: @labelTextColor;
+ stroke: none;
+}
+
+.loopLine {
+ stroke-width: 2;
+ stroke-dasharray: "2 2";
+ marker-end: "url(#arrowhead)";
+ stroke: @labelBoxBorderColor;
+}
+
+.note {
+ //stroke: #decc93;
+ stroke: @noteBorderColor;
+ fill: @noteBkgColor;
+}
+
+.noteText {
+ fill: black;
+ stroke: none;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 14px;
+}