mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-19 07:19:41 +02:00
Replace less with scss
This commit is contained in:
Tyler Long
@@ -1,52 +0,0 @@
|
||||
@mainBkg: #BDD5EA;
|
||||
@secondBkg: #6D6D65;
|
||||
@mainContrastColor: lightgrey;
|
||||
@darkTextColor: #323D47;
|
||||
@lineColor: @mainContrastColor;
|
||||
@border1: #81B1DB;
|
||||
@border2: rgba(255, 255, 255, 0.25);
|
||||
@arrowheadColor: @mainContrastColor;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
@nodeBkg: @mainBkg;
|
||||
@nodeBorder: purple;
|
||||
@clusterBkg: @secondBkg;
|
||||
@clusterBorder: @border2;
|
||||
@defaultLinkColor: @lineColor;
|
||||
@titleColor: #F9FFFE;
|
||||
@edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
@actorBorder: @border1;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorTextColor: black;
|
||||
@actorLineColor: @mainContrastColor;
|
||||
@signalColor: @mainContrastColor;
|
||||
@signalTextColor: @mainContrastColor;
|
||||
@labelBoxBkgColor: @actorBkg;
|
||||
@labelBoxBorderColor: @actorBorder;
|
||||
@labelTextColor: @mainContrastColor;
|
||||
@noteBorderColor: @border2;
|
||||
@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;
|
||||
@@ -1,50 +0,0 @@
|
||||
@mainBkg: #ECECFF;
|
||||
@secondBkg: #ffffde;
|
||||
@lineColor: #333333;
|
||||
@border1: #CCCCFF;
|
||||
@border2: #aaaa33;
|
||||
@arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
@nodeBkg: @mainBkg;
|
||||
@nodeBorder: #9370DB;
|
||||
@clusterBkg: @secondBkg;
|
||||
@clusterBorder: @border2;
|
||||
@defaultLinkColor: @lineColor;
|
||||
@titleColor: #333;
|
||||
@edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
@actorBorder: @border1;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorTextColor: black;
|
||||
@actorLineColor: grey;
|
||||
@signalColor: #333;
|
||||
@signalTextColor: #333;
|
||||
@labelBoxBkgColor: @actorBkg;
|
||||
@labelBoxBorderColor: @actorBorder;
|
||||
@labelTextColor: @actorTextColor;
|
||||
@noteBorderColor: @border2;
|
||||
@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;
|
||||
@@ -1,52 +0,0 @@
|
||||
@mainBkg: #cde498;
|
||||
@secondBkg: #cdffb2;
|
||||
@lineColor: #1a3318;
|
||||
@lineColor: green;
|
||||
@border1: #13540c;
|
||||
@border2: #6eaa49;
|
||||
@arrowheadColor: green;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
@nodeBkg: @mainBkg;
|
||||
@nodeBorder: @border1;
|
||||
@clusterBkg: @secondBkg;
|
||||
@clusterBorder: @border2;
|
||||
@defaultLinkColor: @lineColor;
|
||||
@titleColor: #333;
|
||||
@edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
@actorBorder: @border1;
|
||||
@actorBkg: @mainBkg;
|
||||
@actorTextColor: black;
|
||||
@actorLineColor: grey;
|
||||
@signalColor: #333;
|
||||
@signalTextColor: #333;
|
||||
@labelBoxBkgColor: @actorBkg;
|
||||
@labelBoxBorderColor: #326932;
|
||||
@labelTextColor: @actorTextColor;
|
||||
@noteBorderColor: @border2;
|
||||
@noteBkgColor: #fff5ad;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
@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;
|
||||
@@ -1,54 +0,0 @@
|
||||
@mainBkg: #eee;
|
||||
@secondBkg: lighten(@contrast, 55%);
|
||||
@lineColor: #666;
|
||||
@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;
|
||||
@actorTextColor: @text;
|
||||
@actorLineColor: @lineColor;
|
||||
@signalColor: @text;
|
||||
@signalTextColor: @text;
|
||||
@labelBoxBkgColor: @actorBkg;
|
||||
@labelBoxBorderColor: @actorBorder;
|
||||
@labelTextColor: white;
|
||||
@noteBorderColor: darken(@note, 60%);
|
||||
@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;
|
||||
@@ -36,10 +36,10 @@ import gitGraphRenderer from './diagrams/gitGraph/gitGraphRenderer'
|
||||
import gitGraphAst from './diagrams/gitGraph/gitGraphAst'
|
||||
import pkg from '../package.json'
|
||||
|
||||
import darkTheme from './less/dark/mermaid.less'
|
||||
import defaultTheme from './less/default/mermaid.less'
|
||||
import forestTheme from './less/forest/mermaid.less'
|
||||
import neutralTheme from './less/neutral/mermaid.less'
|
||||
import darkTheme from './themes/dark/mermaid.scss'
|
||||
import defaultTheme from './themes/default/mermaid.scss'
|
||||
import forestTheme from './themes/forest/mermaid.scss'
|
||||
import neutralTheme from './themes/neutral/mermaid.scss'
|
||||
|
||||
const themes = {
|
||||
dark: darkTheme,
|
||||
|
||||
@@ -1,78 +1,78 @@
|
||||
g.classGroup text {
|
||||
fill: @nodeBorder;
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: @nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
svg .classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: @nodeBkg;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg .classLabel .label {
|
||||
fill: @nodeBorder;
|
||||
fill: $nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: @nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.composition {
|
||||
fill: @nodeBorder;
|
||||
stroke: @nodeBorder;
|
||||
@mixin composition {
|
||||
fill: $nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
.aggregation {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
@mixin aggregation {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
.aggregation;
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
.aggregation;
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#dependencyStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
.mermaid .label {
|
||||
color: @darkTextColor
|
||||
color: $darkTextColor
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon {
|
||||
fill: @mainBkg;
|
||||
stroke: @border1;
|
||||
fill: $mainBkg;
|
||||
stroke: $border1;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
@@ -16,24 +16,24 @@
|
||||
}
|
||||
|
||||
.arrowheadPath {
|
||||
fill: @arrowheadColor;
|
||||
fill: $arrowheadColor;
|
||||
}
|
||||
|
||||
.edgePath .path {
|
||||
stroke: @lineColor;
|
||||
stroke: $lineColor;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: @edgeLabelBackground;
|
||||
background-color: $edgeLabelBackground;
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: @secondBkg !important;
|
||||
fill: $secondBkg !important;
|
||||
rx: 4 !important;
|
||||
stroke: @clusterBorder !important;
|
||||
stroke: $clusterBorder !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
@@ -6,33 +6,33 @@
|
||||
}
|
||||
|
||||
.section0 {
|
||||
fill: @sectionBkgColor;
|
||||
fill: $sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: @sectionBkgColor2;
|
||||
fill: $sectionBkgColor2;
|
||||
}
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: @altSectionBkgColor;
|
||||
fill: $altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
@@ -45,13 +45,13 @@
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: @sectionBkgColor;
|
||||
stroke: $sectionBkgColor;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.grid .tick text {
|
||||
fill: @taskTextLightColor;
|
||||
fill: $taskTextLightColor;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: @todayLineColor;
|
||||
stroke: $todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
@@ -84,13 +84,13 @@
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -102,26 +102,26 @@
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: @taskTextColor;
|
||||
fill: $taskTextColor;
|
||||
}
|
||||
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: @taskBkgColor;
|
||||
stroke: @taskBorderColor;
|
||||
fill: $taskBkgColor;
|
||||
stroke: $taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2,
|
||||
{
|
||||
fill: @taskTextOutsideColor;
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: @taskTextOutsideColor;
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
@@ -131,15 +131,15 @@
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: @activeTaskBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke: $activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -149,14 +149,14 @@
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
fill: @doneTaskBkgColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
}
|
||||
|
||||
.doneText0,
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -166,8 +166,8 @@
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @critBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $critBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -175,8 +175,8 @@
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -184,8 +184,8 @@
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 1;
|
||||
cursor: pointer;
|
||||
shape-rendering: crispEdges;
|
||||
@@ -195,18 +195,18 @@
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: @taskTextLightColor !important;
|
||||
fill: $taskTextLightColor !important;
|
||||
}
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: @taskTextLightColor;
|
||||
fill: $taskTextLightColor;
|
||||
}
|
||||
@@ -16,8 +16,8 @@ div.mermaidTooltip {
|
||||
padding: 2px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 12px;
|
||||
background: @secondBkg;
|
||||
border: 1px solid @border2;
|
||||
background: $secondBkg;
|
||||
border: 1px solid $border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
@@ -1,56 +1,56 @@
|
||||
.actor {
|
||||
stroke: @actorBorder;
|
||||
fill: @actorBkg;
|
||||
stroke: $actorBorder;
|
||||
fill: $actorBkg;
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill: @actorTextColor;
|
||||
fill: $actorTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke: @actorLineColor;
|
||||
stroke: $actorLineColor;
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @signalColor;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
stroke: @signalColor;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
#arrowhead {
|
||||
fill: @signalColor !important;
|
||||
fill: $signalColor !important;
|
||||
}
|
||||
|
||||
#crosshead path {
|
||||
fill: @signalColor !important;
|
||||
stroke: @signalColor !important;
|
||||
fill: $signalColor !important;
|
||||
stroke: $signalColor !important;
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: @signalTextColor;
|
||||
fill: $signalTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
stroke: @labelBoxBorderColor;
|
||||
fill: @labelBoxBkgColor;
|
||||
stroke: $labelBoxBorderColor;
|
||||
fill: $labelBoxBkgColor;
|
||||
}
|
||||
|
||||
.labelText {
|
||||
fill: @darkTextColor;
|
||||
fill: $darkTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText {
|
||||
fill: @labelTextColor;
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
@@ -58,13 +58,13 @@ text.actor {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @labelBoxBorderColor;
|
||||
stroke: $labelBoxBorderColor;
|
||||
}
|
||||
|
||||
.note {
|
||||
//stroke: #decc93;
|
||||
stroke: @noteBorderColor;
|
||||
fill: @noteBkgColor;
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
}
|
||||
|
||||
.noteText {
|
||||
52
src/themes/dark/variables.scss
Normal file
52
src/themes/dark/variables.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
$mainBkg: #BDD5EA;
|
||||
$secondBkg: #6D6D65;
|
||||
$mainContrastColor: lightgrey;
|
||||
$darkTextColor: #323D47;
|
||||
$lineColor: $mainContrastColor;
|
||||
$border1: #81B1DB;
|
||||
$border2: rgba(255, 255, 255, 0.25);
|
||||
$arrowheadColor: $mainContrastColor;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: purple;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #F9FFFE;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: $mainContrastColor;
|
||||
$signalColor: $mainContrastColor;
|
||||
$signalTextColor: $mainContrastColor;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $mainContrastColor;
|
||||
$noteBorderColor: $border2;
|
||||
$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;
|
||||
$taskTextLightColor: $mainContrastColor;
|
||||
$taskTextOutsideColor: $taskTextLightColor;
|
||||
$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
|
||||
$activeTaskBkgColor: #81B1DB;
|
||||
$gridColor: $mainContrastColor;
|
||||
$doneTaskBkgColor: $mainContrastColor;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #E83737;
|
||||
$critBkgColor: #E83737;
|
||||
$taskTextDarkColor: $darkTextColor;
|
||||
$todayLineColor: #DB5757;
|
||||
@@ -1,78 +1,78 @@
|
||||
g.classGroup text {
|
||||
fill: @nodeBorder;
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: @nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
svg .classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: @nodeBkg;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg .classLabel .label {
|
||||
fill: @nodeBorder;
|
||||
fill: $nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: @nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.composition {
|
||||
fill: @nodeBorder;
|
||||
stroke: @nodeBorder;
|
||||
@mixin composition {
|
||||
fill: $nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
.aggregation {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
@mixin aggregation {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
.aggregation;
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
.aggregation;
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#dependencyStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
@@ -6,8 +6,8 @@
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon {
|
||||
fill: @mainBkg;
|
||||
stroke: @border1;
|
||||
fill: $mainBkg;
|
||||
stroke: $border1;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
@@ -16,24 +16,24 @@
|
||||
}
|
||||
|
||||
.arrowheadPath {
|
||||
fill: @arrowheadColor;
|
||||
fill: $arrowheadColor;
|
||||
}
|
||||
|
||||
.edgePath .path {
|
||||
stroke: @lineColor;
|
||||
stroke: $lineColor;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: @edgeLabelBackground;
|
||||
background-color: $edgeLabelBackground;
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: @secondBkg !important;
|
||||
fill: $secondBkg !important;
|
||||
rx: 4 !important;
|
||||
stroke: @clusterBorder !important;
|
||||
stroke: $clusterBorder !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
@@ -6,33 +6,33 @@
|
||||
}
|
||||
|
||||
.section0 {
|
||||
fill: @sectionBkgColor;
|
||||
fill: $sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: @sectionBkgColor2;
|
||||
fill: $sectionBkgColor2;
|
||||
}
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: @altSectionBkgColor;
|
||||
fill: $altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
@@ -45,7 +45,7 @@
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: @gridColor;
|
||||
stroke: $gridColor;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
@@ -59,7 +59,7 @@
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: @todayLineColor;
|
||||
stroke: $todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
@@ -79,13 +79,13 @@
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -97,26 +97,26 @@
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: @taskTextColor;
|
||||
fill: $taskTextColor;
|
||||
}
|
||||
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: @taskBkgColor;
|
||||
stroke: @taskBorderColor;
|
||||
fill: $taskBkgColor;
|
||||
stroke: $taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2,
|
||||
{
|
||||
fill: @taskTextOutsideColor;
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: @taskTextOutsideColor;
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
@@ -126,15 +126,15 @@
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: @activeTaskBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke: $activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -144,8 +144,8 @@
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
stroke: @doneTaskBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke: $doneTaskBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -153,7 +153,7 @@
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -163,8 +163,8 @@
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @critBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $critBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -172,8 +172,8 @@
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -181,8 +181,8 @@
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
shape-rendering: crispEdges;
|
||||
@@ -192,18 +192,18 @@
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
}
|
||||
@@ -15,8 +15,8 @@ div.mermaidTooltip {
|
||||
padding: 2px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 12px;
|
||||
background: @secondBkg;
|
||||
border: 1px solid @border2;
|
||||
background: $secondBkg;
|
||||
border: 1px solid $border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
@@ -1,56 +1,56 @@
|
||||
.actor {
|
||||
stroke: @actorBorder;
|
||||
fill: @actorBkg;
|
||||
stroke: $actorBorder;
|
||||
fill: $actorBkg;
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill: @actorTextColor;
|
||||
fill: $actorTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke: @actorLineColor;
|
||||
stroke: $actorLineColor;
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @signalColor;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
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;
|
||||
fill: $signalColor !important;
|
||||
stroke: $signalColor !important;
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: @signalTextColor;
|
||||
fill: $signalTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
stroke: @labelBoxBorderColor;
|
||||
fill: @labelBoxBkgColor;
|
||||
stroke: $labelBoxBorderColor;
|
||||
fill: $labelBoxBkgColor;
|
||||
}
|
||||
|
||||
.labelText {
|
||||
fill: @labelTextColor;
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText {
|
||||
fill: @labelTextColor;
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
@@ -58,13 +58,13 @@ text.actor {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @labelBoxBorderColor;
|
||||
stroke: $labelBoxBorderColor;
|
||||
}
|
||||
|
||||
.note {
|
||||
//stroke: #decc93;
|
||||
stroke: @noteBorderColor;
|
||||
fill: @noteBkgColor;
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
}
|
||||
|
||||
.noteText {
|
||||
50
src/themes/default/variables.scss
Normal file
50
src/themes/default/variables.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
$mainBkg: #ECECFF;
|
||||
$secondBkg: #ffffde;
|
||||
$lineColor: #333333;
|
||||
$border1: #CCCCFF;
|
||||
$border2: #aaaa33;
|
||||
$arrowheadColor: #333333;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: #9370DB;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #333;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: grey;
|
||||
$signalColor: #333;
|
||||
$signalTextColor: #333;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: $actorTextColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: rgba(102, 102, 255, 0.49);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #fff400;
|
||||
$taskBorderColor: #534fbc;
|
||||
$taskBkgColor: #8a90dd;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: black;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$activeTaskBorderColor: #534fbc;
|
||||
$activeTaskBkgColor: #bfc7ff;
|
||||
$gridColor: lightgrey;
|
||||
$doneTaskBkgColor: lightgrey;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #ff8888;
|
||||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
@@ -1,78 +1,78 @@
|
||||
g.classGroup text {
|
||||
fill: @nodeBorder;
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: @nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
svg .classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: @nodeBkg;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg .classLabel .label {
|
||||
fill: @nodeBorder;
|
||||
fill: $nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: @nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.composition {
|
||||
fill: @nodeBorder;
|
||||
stroke: @nodeBorder;
|
||||
@mixin composition {
|
||||
fill: $nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
.aggregation {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
@mixin aggregation {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
.aggregation;
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
.aggregation;
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#dependencyStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
@@ -7,8 +7,8 @@
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon {
|
||||
fill: @mainBkg;
|
||||
stroke: @nodeBorder;
|
||||
fill: $mainBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
@@ -17,25 +17,25 @@
|
||||
}
|
||||
|
||||
.arrowheadPath {
|
||||
fill: @arrowheadColor;
|
||||
fill: $arrowheadColor;
|
||||
}
|
||||
|
||||
.edgePath .path {
|
||||
stroke: @lineColor;
|
||||
stroke: $lineColor;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: @edgeLabelBackground;
|
||||
background-color: $edgeLabelBackground;
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: @secondBkg !important;
|
||||
fill: $secondBkg !important;
|
||||
rx: 4 !important;
|
||||
stroke: @clusterBorder !important;
|
||||
stroke: $clusterBorder !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
@@ -6,33 +6,33 @@
|
||||
}
|
||||
|
||||
.section0 {
|
||||
fill: @sectionBkgColor;
|
||||
fill: $sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: @sectionBkgColor2;
|
||||
fill: $sectionBkgColor2;
|
||||
}
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: @altSectionBkgColor;
|
||||
fill: $altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
@@ -45,7 +45,7 @@
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: @gridColor;
|
||||
stroke: $gridColor;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
@@ -59,7 +59,7 @@
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: @todayLineColor;
|
||||
stroke: $todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
@@ -79,13 +79,13 @@
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -97,26 +97,26 @@
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: @taskTextColor;
|
||||
fill: $taskTextColor;
|
||||
}
|
||||
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: @taskBkgColor;
|
||||
stroke: @taskBorderColor;
|
||||
fill: $taskBkgColor;
|
||||
stroke: $taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2,
|
||||
{
|
||||
fill: @taskTextOutsideColor;
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: @taskTextOutsideColor;
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
@@ -126,15 +126,15 @@
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: @activeTaskBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke: $activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -144,8 +144,8 @@
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
stroke: @doneTaskBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke: $doneTaskBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -153,7 +153,7 @@
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -163,8 +163,8 @@
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @critBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $critBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -172,8 +172,8 @@
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -181,8 +181,8 @@
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
shape-rendering: crispEdges;
|
||||
@@ -192,18 +192,18 @@
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
}
|
||||
@@ -15,8 +15,8 @@ div.mermaidTooltip {
|
||||
padding: 2px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 12px;
|
||||
background: @secondBkg;
|
||||
border: 1px solid @border2;
|
||||
background: $secondBkg;
|
||||
border: 1px solid $border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
@@ -1,56 +1,56 @@
|
||||
.actor {
|
||||
stroke: @actorBorder;
|
||||
fill: @actorBkg;
|
||||
stroke: $actorBorder;
|
||||
fill: $actorBkg;
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill: @actorTextColor;
|
||||
fill: $actorTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke: @actorLineColor;
|
||||
stroke: $actorLineColor;
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @signalColor;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
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;
|
||||
fill: $signalColor !important;
|
||||
stroke: $signalColor !important;
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: @signalTextColor;
|
||||
fill: $signalTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
stroke: @labelBoxBorderColor;
|
||||
fill: @labelBoxBkgColor;
|
||||
stroke: $labelBoxBorderColor;
|
||||
fill: $labelBoxBkgColor;
|
||||
}
|
||||
|
||||
.labelText {
|
||||
fill: @labelTextColor;
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText {
|
||||
fill: @labelTextColor;
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
@@ -58,13 +58,13 @@ text.actor {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @labelBoxBorderColor;
|
||||
stroke: $labelBoxBorderColor;
|
||||
}
|
||||
|
||||
.note {
|
||||
//stroke: #decc93;
|
||||
stroke: @noteBorderColor;
|
||||
fill: @noteBkgColor;
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
}
|
||||
|
||||
.noteText {
|
||||
52
src/themes/forest/variables.scss
Normal file
52
src/themes/forest/variables.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
$mainBkg: #cde498;
|
||||
$secondBkg: #cdffb2;
|
||||
$lineColor: #1a3318;
|
||||
$lineColor: green;
|
||||
$border1: #13540c;
|
||||
$border2: #6eaa49;
|
||||
$arrowheadColor: green;
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
$nodeBkg: $mainBkg;
|
||||
$nodeBorder: $border1;
|
||||
$clusterBkg: $secondBkg;
|
||||
$clusterBorder: $border2;
|
||||
$defaultLinkColor: $lineColor;
|
||||
$titleColor: #333;
|
||||
$edgeLabelBackground: #e8e8e8;
|
||||
|
||||
/* Sequence Diagram variables */
|
||||
|
||||
$actorBorder: $border1;
|
||||
$actorBkg: $mainBkg;
|
||||
$actorTextColor: black;
|
||||
$actorLineColor: grey;
|
||||
$signalColor: #333;
|
||||
$signalTextColor: #333;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: #326932;
|
||||
$labelTextColor: $actorTextColor;
|
||||
$noteBorderColor: $border2;
|
||||
$noteBkgColor: #fff5ad;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: #6eaa49;
|
||||
;
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: #6eaa49;
|
||||
$taskBorderColor: $border1;
|
||||
$taskBkgColor: #487e3a;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: black;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$activeTaskBorderColor: $taskBorderColor;
|
||||
$activeTaskBkgColor: $mainBkg;
|
||||
$gridColor: lightgrey;
|
||||
$doneTaskBkgColor: lightgrey;
|
||||
$doneTaskBorderColor: grey;
|
||||
$critBorderColor: #ff8888;
|
||||
$critBkgColor: red;
|
||||
$todayLineColor: red;
|
||||
@@ -1,78 +1,78 @@
|
||||
g.classGroup text {
|
||||
fill: @nodeBorder;
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: @nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
svg .classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: @nodeBkg;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg .classLabel .label {
|
||||
fill: @nodeBorder;
|
||||
fill: $nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: @nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.composition {
|
||||
fill: @nodeBorder;
|
||||
stroke: @nodeBorder;
|
||||
@mixin composition {
|
||||
fill: $nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
.aggregation {
|
||||
fill: @nodeBkg;
|
||||
stroke: @nodeBorder;
|
||||
@mixin aggregation {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
.aggregation;
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
.aggregation;
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#dependencyStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
.composition;
|
||||
@include composition;
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
.mermaid .label {
|
||||
color: @text
|
||||
color: $text
|
||||
}
|
||||
|
||||
.node rect,
|
||||
.node circle,
|
||||
.node ellipse,
|
||||
.node polygon {
|
||||
fill: @mainBkg;
|
||||
stroke: @nodeBorder;
|
||||
fill: $mainBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
@@ -16,21 +16,21 @@
|
||||
}
|
||||
|
||||
.edgePath .path {
|
||||
stroke: @lineColor;
|
||||
stroke: $lineColor;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: @edgeLabelBackground;
|
||||
background-color: $edgeLabelBackground;
|
||||
}
|
||||
|
||||
.cluster rect {
|
||||
fill: @secondBkg !important;
|
||||
fill: $secondBkg !important;
|
||||
rx: 4 !important;
|
||||
stroke: @clusterBorder !important;
|
||||
stroke: $clusterBorder !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
@@ -6,33 +6,33 @@
|
||||
}
|
||||
|
||||
.section0 {
|
||||
fill: @sectionBkgColor;
|
||||
fill: $sectionBkgColor;
|
||||
}
|
||||
|
||||
.section2 {
|
||||
fill: @sectionBkgColor2;
|
||||
fill: $sectionBkgColor2;
|
||||
}
|
||||
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: @altSectionBkgColor;
|
||||
fill: $altSectionBkgColor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle1 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle2 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle3 {
|
||||
fill: @titleColor;
|
||||
fill: $titleColor;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
@@ -45,7 +45,7 @@
|
||||
/* Grid and axis */
|
||||
|
||||
.grid .tick {
|
||||
stroke: @gridColor;
|
||||
stroke: $gridColor;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
@@ -59,7 +59,7 @@
|
||||
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: @todayLineColor;
|
||||
stroke: $todayLineColor;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
@@ -79,13 +79,13 @@
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.taskTextOutsideLeft {
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -97,26 +97,26 @@
|
||||
.taskText1,
|
||||
.taskText2,
|
||||
.taskText3 {
|
||||
fill: @taskTextColor;
|
||||
fill: $taskTextColor;
|
||||
}
|
||||
|
||||
.task0,
|
||||
.task1,
|
||||
.task2,
|
||||
.task3 {
|
||||
fill: @taskBkgColor;
|
||||
stroke: @taskBorderColor;
|
||||
fill: $taskBkgColor;
|
||||
stroke: $taskBorderColor;
|
||||
}
|
||||
|
||||
.taskTextOutside0,
|
||||
.taskTextOutside2,
|
||||
{
|
||||
fill: @taskTextOutsideColor;
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
.taskTextOutside1,
|
||||
.taskTextOutside3 {
|
||||
fill: @taskTextOutsideColor;
|
||||
fill: $taskTextOutsideColor;
|
||||
}
|
||||
|
||||
|
||||
@@ -126,15 +126,15 @@
|
||||
.active1,
|
||||
.active2,
|
||||
.active3 {
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: @activeTaskBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke: $activeTaskBorderColor;
|
||||
}
|
||||
|
||||
.activeText0,
|
||||
.activeText1,
|
||||
.activeText2,
|
||||
.activeText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -144,8 +144,8 @@
|
||||
.done1,
|
||||
.done2,
|
||||
.done3 {
|
||||
stroke: @doneTaskBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke: $doneTaskBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -153,7 +153,7 @@
|
||||
.doneText1,
|
||||
.doneText2,
|
||||
.doneText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -163,8 +163,8 @@
|
||||
.crit1,
|
||||
.crit2,
|
||||
.crit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @critBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $critBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -172,8 +172,8 @@
|
||||
.activeCrit1,
|
||||
.activeCrit2,
|
||||
.activeCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @activeTaskBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $activeTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@@ -181,8 +181,8 @@
|
||||
.doneCrit1,
|
||||
.doneCrit2,
|
||||
.doneCrit3 {
|
||||
stroke: @critBorderColor;
|
||||
fill: @doneTaskBkgColor;
|
||||
stroke: $critBorderColor;
|
||||
fill: $doneTaskBkgColor;
|
||||
stroke-width: 2;
|
||||
cursor: pointer; //shape-rendering: crispEdges;
|
||||
}
|
||||
@@ -191,18 +191,18 @@
|
||||
.doneCritText1,
|
||||
.doneCritText2,
|
||||
.doneCritText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.activeCritText0,
|
||||
.activeCritText1,
|
||||
.activeCritText2,
|
||||
.activeCritText3 {
|
||||
fill: @taskTextDarkColor !important;
|
||||
fill: $taskTextDarkColor !important;
|
||||
}
|
||||
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: @taskTextDarkColor;
|
||||
fill: $taskTextDarkColor;
|
||||
}
|
||||
@@ -15,8 +15,8 @@ div.mermaidTooltip {
|
||||
padding: 2px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
background: @secondBkg;
|
||||
border: 1px solid @border2;
|
||||
background: $secondBkg;
|
||||
border: 1px solid $border2;
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
@@ -1,56 +1,56 @@
|
||||
.actor {
|
||||
stroke: @actorBorder;
|
||||
fill: @actorBkg;
|
||||
stroke: $actorBorder;
|
||||
fill: $actorBkg;
|
||||
}
|
||||
|
||||
text.actor {
|
||||
fill: @actorTextColor;
|
||||
fill: $actorTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.actor-line {
|
||||
stroke: @actorLineColor;
|
||||
stroke: $actorLineColor;
|
||||
}
|
||||
|
||||
.messageLine0 {
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @signalColor;
|
||||
stroke: $signalColor;
|
||||
}
|
||||
|
||||
.messageLine1 {
|
||||
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;
|
||||
fill: $signalColor !important;
|
||||
stroke: $signalColor !important;
|
||||
}
|
||||
|
||||
.messageText {
|
||||
fill: @signalTextColor;
|
||||
fill: $signalTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.labelBox {
|
||||
stroke: @labelBoxBorderColor;
|
||||
fill: @labelBoxBkgColor;
|
||||
stroke: $labelBoxBorderColor;
|
||||
fill: $labelBoxBkgColor;
|
||||
}
|
||||
|
||||
.labelText {
|
||||
fill: @labelTextColor;
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.loopText {
|
||||
fill: @labelTextColor;
|
||||
fill: $labelTextColor;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
@@ -58,13 +58,13 @@ text.actor {
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: "2 2";
|
||||
marker-end: "url(#arrowhead)";
|
||||
stroke: @labelBoxBorderColor;
|
||||
stroke: $labelBoxBorderColor;
|
||||
}
|
||||
|
||||
.note {
|
||||
//stroke: #decc93;
|
||||
stroke: @noteBorderColor;
|
||||
fill: @noteBkgColor;
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
}
|
||||
|
||||
.noteText {
|
||||
54
src/themes/neutral/variables.scss
Normal file
54
src/themes/neutral/variables.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
$mainBkg: #eee;
|
||||
$contrast: #26a;
|
||||
$secondBkg: lighten($contrast, 55%);
|
||||
$lineColor: #666;
|
||||
$border1: #999;
|
||||
$border2: $contrast;
|
||||
$note: #ffa;
|
||||
$text: #333;
|
||||
$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;
|
||||
$actorTextColor: $text;
|
||||
$actorLineColor: $lineColor;
|
||||
$signalColor: $text;
|
||||
$signalTextColor: $text;
|
||||
$labelBoxBkgColor: $actorBkg;
|
||||
$labelBoxBorderColor: $actorBorder;
|
||||
$labelTextColor: white;
|
||||
$noteBorderColor: darken($note, 60%);
|
||||
$noteBkgColor: $note;
|
||||
|
||||
/* Gantt chart variables */
|
||||
|
||||
$sectionBkgColor: lighten($contrast, 30%);
|
||||
$altSectionBkgColor: white;
|
||||
$sectionBkgColor2: lighten($contrast, 30%);
|
||||
$taskBorderColor: darken($contrast, 10%);
|
||||
$taskBkgColor: $contrast;
|
||||
$taskTextLightColor: white;
|
||||
$taskTextColor: $taskTextLightColor;
|
||||
$taskTextDarkColor: $text;
|
||||
$taskTextOutsideColor: $taskTextDarkColor;
|
||||
$activeTaskBorderColor: $taskBorderColor;
|
||||
$activeTaskBkgColor: $mainBkg;
|
||||
$gridColor: lighten($border1, 30%);
|
||||
$doneTaskBkgColor: $done;
|
||||
$doneTaskBorderColor: $lineColor;
|
||||
$critBkgColor: $critical;
|
||||
$critBorderColor: darken($critBkgColor, 10%);
|
||||
$todayLineColor: $critBkgColor;
|
||||
Reference in New Issue
Block a user