/* Flowchart variables */ /* Sequence Diagram variables */ /* Gantt chart variables */ .lang-mermaid .mermaid .label { color: #333; } .lang-mermaid .node rect, .lang-mermaid .node circle, .lang-mermaid .node ellipse, .lang-mermaid .node polygon { fill: #ECECFF; stroke: #CCCCFF; stroke-width: 1px; } .lang-mermaid .edgePath .path { stroke: #333333; } .lang-mermaid .edgeLabel { background-color: #e8e8e8; } .lang-mermaid .cluster rect { fill: #ffffde !important; rx: 4 !important; stroke: #aaaa33 !important; stroke-width: 1px !important; } .lang-mermaid .cluster text { fill: #333; } .lang-mermaid .actor { stroke: #CCCCFF; fill: #ECECFF; } .lang-mermaid text.actor { fill: black; stroke: none; } .lang-mermaid .actor-line { stroke: grey; } .lang-mermaid .messageLine0 { stroke-width: 1.5; stroke-dasharray: "2 2"; marker-end: "url(#arrowhead)"; stroke: #333; } .lang-mermaid .messageLine1 { stroke-width: 1.5; stroke-dasharray: "2 2"; stroke: #333; } .lang-mermaid #arrowhead { fill: #333; } .lang-mermaid #crosshead path { fill: #333 !important; stroke: #333 !important; } .lang-mermaid .messageText { fill: #333; stroke: none; } .lang-mermaid .labelBox { stroke: #CCCCFF; fill: #ECECFF; } .lang-mermaid .labelText { fill: black; stroke: none; } .lang-mermaid .loopText { fill: black; stroke: none; } .lang-mermaid .loopLine { stroke-width: 2; stroke-dasharray: "2 2"; marker-end: "url(#arrowhead)"; stroke: #CCCCFF; } .lang-mermaid .note { stroke: #aaaa33; fill: #fff5ad; } .lang-mermaid .noteText { fill: black; stroke: none; font-family: 'trebuchet ms', verdana, arial; font-size: 14px; } /** Section styling */ .lang-mermaid .section { stroke: none; opacity: 0.2; } .lang-mermaid .section0 { fill: rgba(102, 102, 255, 0.49); } .lang-mermaid .section2 { fill: #fff400; } .lang-mermaid .section1, .section3 { fill: white; opacity: 0.2; } .lang-mermaid .sectionTitle0 { fill: #333; } .lang-mermaid .sectionTitle1 { fill: #333; } .lang-mermaid .sectionTitle2 { fill: #333; } .lang-mermaid .sectionTitle3 { fill: #333; } .lang-mermaid .sectionTitle { text-anchor: start; font-size: 11px; text-height: 14px; } /* Grid and axis */ .lang-mermaid .grid .tick { stroke: lightgrey; opacity: 0.3; shape-rendering: crispEdges; } .lang-mermaid .grid path { stroke-width: 0; } /* Today line */ .lang-mermaid .today { fill: none; stroke: red; stroke-width: 2px; } /* Task styling */ /* Default task */ .lang-mermaid .task { stroke-width: 2; } .lang-mermaid .taskText { text-anchor: middle; font-size: 11px; } .lang-mermaid .taskTextOutsideRight { fill: black; text-anchor: start; font-size: 11px; } .lang-mermaid .taskTextOutsideLeft { fill: black; text-anchor: end; font-size: 11px; } /* Specific task settings for the sections*/ .lang-mermaid .taskText0, .lang-mermaid .taskText1, .lang-mermaid .taskText2, .lang-mermaid .taskText3 { fill: white; } .lang-mermaid .task0, .lang-mermaid .task1, .lang-mermaid .task2, .lang-mermaid .task3 { fill: #8a90dd; stroke: #534fbc; } .lang-mermaid .taskTextOutside0, .lang-mermaid .taskTextOutside2 { fill: black; } .lang-mermaid .taskTextOutside1, .lang-mermaid .taskTextOutside3 { fill: black; } /* Active task */ .lang-mermaid .active0, .lang-mermaid .active1, .lang-mermaid .active2, .lang-mermaid .active3 { fill: #bfc7ff; stroke: #534fbc; } .lang-mermaid .activeText0, .lang-mermaid .activeText1, .lang-mermaid .activeText2, .lang-mermaid .activeText3 { fill: black !important; } /* Completed task */ .lang-mermaid .done0, .lang-mermaid .done1, .lang-mermaid .done2, .lang-mermaid .done3 { stroke: grey; fill: lightgrey; stroke-width: 2; } .lang-mermaid .doneText0, .lang-mermaid .doneText1, .lang-mermaid .doneText2, .lang-mermaid .doneText3 { fill: black !important; } /* Tasks on the critical line */ .lang-mermaid .crit0, .lang-mermaid .crit1, .lang-mermaid .crit2, .lang-mermaid .crit3 { stroke: #ff8888; fill: red; stroke-width: 2; } .lang-mermaid .activeCrit0, .lang-mermaid .activeCrit1, .lang-mermaid .activeCrit2, .lang-mermaid .activeCrit3 { stroke: #ff8888; fill: #bfc7ff; stroke-width: 2; } .lang-mermaid .doneCrit0, .lang-mermaid .doneCrit1, .lang-mermaid .doneCrit2, .lang-mermaid .doneCrit3 { stroke: #ff8888; fill: lightgrey; stroke-width: 2; cursor: pointer; shape-rendering: crispEdges; } .lang-mermaid .doneCritText0, .lang-mermaid .doneCritText1, .lang-mermaid .doneCritText2, .lang-mermaid .doneCritText3 { fill: black !important; } .lang-mermaid .activeCritText0, .lang-mermaid .activeCritText1, .lang-mermaid .activeCritText2, .lang-mermaid .activeCritText3 { fill: black !important; } .lang-mermaid .titleText { text-anchor: middle; font-size: 18px; fill: black; } /* */ .lang-mermaid .node text { font-family: 'trebuchet ms', verdana, arial; font-size: 14px; } .lang-mermaid div.mermaidTooltip { position: absolute; text-align: center; max-width: 200px; padding: 2px; font-family: 'trebuchet ms', verdana, arial; font-size: 12px; background: #ffffde; border: 1px solid #aaaa33; border-radius: 2px; pointer-events: none; z-index: 100; }