fix:修复mermaid样式冲突问题

This commit is contained in:
lifei6671
2018-09-11 10:47:54 +08:00
parent b26c4d88ee
commit 929f54840b

View File

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