vnote/src/resources/themes/v_moonlight/v_moonlight_mermaid.css

/* Flowchart variables */
/* Sequence Diagram variables */
/* Gantt chart variables */
.mermaid-diagram .mermaid .label {
  font-family: 'trebuchet ms', verdana, arial;
  color: #333;
}

.mermaid-diagram .node rect,
.mermaid-diagram .node circle,
.mermaid-diagram .node ellipse,
.mermaid-diagram .node polygon {
  fill: #cde498;
  stroke: #13540c;
  stroke-width: 1px;
}

.mermaid-diagram .edgePath .path {
  stroke: green;
  stroke-width: 1.5px;
}

.mermaid-diagram .edgeLabel {
  background-color: #e8e8e8;
}

.mermaid-diagram .cluster rect {
  fill: #cdffb2 !important;
  rx: 4  !important;
  stroke: #6eaa49 !important;
  stroke-width: 1px !important;
}

.mermaid-diagram .cluster text {
  fill: #333;
}

.mermaid-diagram .actor {
  stroke: #13540c;
  fill: #cde498;
}

.mermaid-diagram text.actor {
  fill: black;
  stroke: none;
}

.mermaid-diagram .actor-line {
  stroke: grey;
}

.mermaid-diagram .messageLine0 {
  stroke-width: 1.5;
  stroke-dasharray: "2 2";
  marker-end: "url(#arrowhead)";
  stroke: #333;
}

.mermaid-diagram .messageLine1 {
  stroke-width: 1.5;
  stroke-dasharray: "2 2";
  stroke: #333;
}

.mermaid-diagram #arrowhead {
  fill: #333;
}

.mermaid-diagram #crosshead path {
  fill: #333 !important;
  stroke: #333 !important;
}

.mermaid-diagram .messageText {
  fill: #333;
  stroke: none;
}

.mermaid-diagram .labelBox {
  stroke: #326932;
  fill: #cde498;
}

.mermaid-diagram .labelText {
  fill: black;
  stroke: none;
}

.mermaid-diagram .loopText {
  fill: black;
  stroke: none;
}

.mermaid-diagram .loopLine {
  stroke-width: 2;
  stroke-dasharray: "2 2";
  marker-end: "url(#arrowhead)";
  stroke: #326932;
}

.mermaid-diagram .note {
  stroke: #6eaa49;
  fill: #fff5ad;
}

.mermaid-diagram .noteText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px;
}

/** Section styling */
.mermaid-diagram .section {
  stroke: none;
  opacity: 0.2;
}

.mermaid-diagram .section0 {
  fill: #6eaa49;
}

.mermaid-diagram .section2 {
  fill: #6eaa49;
}

.mermaid-diagram .section1,
.mermaid-diagram .section3 {
  fill: white;
  opacity: 0.2;
}

.mermaid-diagram .sectionTitle0 {
  fill: #333;
}

.mermaid-diagram .sectionTitle1 {
  fill: #333;
}

.mermaid-diagram .sectionTitle2 {
  fill: #333;
}

.mermaid-diagram .sectionTitle3 {
  fill: #333;
}

.mermaid-diagram .sectionTitle {
  text-anchor: start;
  font-size: 11px;
  text-height: 14px;
}

/* Grid and axis */
.mermaid-diagram .grid .tick {
  stroke: lightgrey;
  opacity: 0.3;
  shape-rendering: crispEdges;
}

.mermaid-diagram .grid path {
  stroke-width: 0;
}

/* Today line */
.mermaid-diagram .today {
  fill: none;
  stroke: red;
  stroke-width: 2px;
}

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

.mermaid-diagram .taskText {
  text-anchor: middle;
  font-size: 11px;
}

.mermaid-diagram .taskTextOutsideRight {
  fill: black;
  text-anchor: start;
  font-size: 11px;
}

.mermaid-diagram .taskTextOutsideLeft {
  fill: black;
  text-anchor: end;
  font-size: 11px;
}

/* Specific task settings for the sections*/
.mermaid-diagram .taskText0,
.mermaid-diagram .taskText1,
.mermaid-diagram .taskText2,
.mermaid-diagram .taskText3 {
  fill: white;
}

.mermaid-diagram .task0,
.mermaid-diagram .task1,
.mermaid-diagram .task2,
.mermaid-diagram .task3 {
  fill: #487e3a;
  stroke: #13540c;
}

.mermaid-diagram .taskTextOutside0,
.mermaid-diagram .taskTextOutside2 {
  fill: black;
}

.mermaid-diagram .taskTextOutside1,
.mermaid-diagram .taskTextOutside3 {
  fill: black;
}

/* Active task */
.mermaid-diagram .active0,
.mermaid-diagram .active1,
.mermaid-diagram .active2,
.mermaid-diagram .active3 {
  fill: #cde498;
  stroke: #13540c;
}

.mermaid-diagram .activeText0,
.mermaid-diagram .activeText1,
.mermaid-diagram .activeText2,
.mermaid-diagram .activeText3 {
  fill: black !important;
}

/* Completed task */
.mermaid-diagram .done0,
.mermaid-diagram .done1,
.mermaid-diagram .done2,
.mermaid-diagram .done3 {
  stroke: grey;
  fill: lightgrey;
  stroke-width: 2;
}

.mermaid-diagram .doneText0,
.mermaid-diagram .doneText1,
.mermaid-diagram .doneText2,
.mermaid-diagram .doneText3 {
  fill: black !important;
}

/* Tasks on the critical line */
.mermaid-diagram .crit0,
.mermaid-diagram .crit1,
.mermaid-diagram .crit2,
.mermaid-diagram .crit3 {
  stroke: #ff8888;
  fill: red;
  stroke-width: 2;
}

.mermaid-diagram .activeCrit0,
.mermaid-diagram .activeCrit1,
.mermaid-diagram .activeCrit2,
.mermaid-diagram .activeCrit3 {
  stroke: #ff8888;
  fill: #cde498;
  stroke-width: 2;
}

.mermaid-diagram .doneCrit0,
.mermaid-diagram .doneCrit1,
.mermaid-diagram .doneCrit2,
.mermaid-diagram .doneCrit3 {
  stroke: #ff8888;
  fill: lightgrey;
  stroke-width: 2;
  cursor: pointer;
  shape-rendering: crispEdges;
}

.mermaid-diagram .doneCritText0,
.mermaid-diagram .doneCritText1,
.mermaid-diagram .doneCritText2,
.mermaid-diagram .doneCritText3 {
  fill: black !important;
}

.mermaid-diagram .activeCritText0,
.mermaid-diagram .activeCritText1,
.mermaid-diagram .activeCritText2,
.mermaid-diagram .activeCritText3 {
  fill: black !important;
}

.mermaid-diagram .titleText {
  text-anchor: middle;
  font-size: 18px;
  fill: black;
}

.mermaid-diagram g.classGroup text {
  fill: #13540c;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px;
}

.mermaid-diagram g.classGroup rect {
  fill: #cde498;
  stroke: #13540c;
}

.mermaid-diagram g.classGroup line {
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram svg .classLabel .box {
  stroke: none;
  stroke-width: 0;
  fill: #cde498;
  opacity: 0.5;
}

.mermaid-diagram svg .classLabel .label {
  fill: #13540c;
}

.mermaid-diagram .relation {
  stroke: #13540c;
  stroke-width: 1;
  fill: none;
}

.mermaid-diagram .composition {
  fill: #13540c;
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram #compositionStart {
  fill: #13540c;
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram #compositionEnd {
  fill: #13540c;
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram .aggregation {
  fill: #cde498;
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram #aggregationStart {
  fill: #cde498;
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram #aggregationEnd {
  fill: #cde498;
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram #dependencyStart {
  fill: #13540c;
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram #dependencyEnd {
  fill: #13540c;
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram #extensionStart {
  fill: #13540c;
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram #extensionEnd {
  fill: #13540c;
  stroke: #13540c;
  stroke-width: 1;
}

.mermaid-diagram .node text {
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px;
}

.mermaid-diagram div.mermaidTooltip {
  position: absolute;
  text-align: center;
  max-width: 200px;
  padding: 2px;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 12px;
  background: #cdffb2;
  border: 1px solid #6eaa49;
  border-radius: 2px;
  pointer-events: none;
  z-index: 100;
}