#1542 Styling for all diagram types

2025-10-13 11:09:39 +02:00 · 2020-07-17 15:57:02 +02:00
parent f9667cd80f
commit 8d076efd71
21 changed files with 1103 additions and 39 deletions
--- a/src/diagrams/gantt/styles.js
+++ b/src/diagrams/gantt/styles.js
@@ -0,0 +1,261 @@
+const getStyles = options =>
+  `
+  .mermaid-main-font {
+    font-family: "trebuchet ms", verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+
+  .section {
+    stroke: none;
+    opacity: 0.2;
+  }
+
+  .section0 {
+    fill: ${options.sectionBkgColor};
+  }
+
+  .section2 {
+    fill: ${options.sectionBkgColor2};
+  }
+
+  .section1,
+  .section3 {
+    fill: ${options.altSectionBkgColor};
+    opacity: 0.2;
+  }
+
+  .sectionTitle0 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle1 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle2 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle3 {
+    fill: ${options.titleColor};
+  }
+
+  .sectionTitle {
+    text-anchor: start;
+    font-size: 11px;
+    text-height: 14px;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+
+  }
+
+
+  /* Grid and axis */
+
+  .grid .tick {
+    stroke: ${options.gridColor};
+    opacity: 0.8;
+    shape-rendering: crispEdges;
+    text {
+      font-family: 'trebuchet ms', verdana, arial;
+      font-family: var(--mermaid-font-family);
+    }
+  }
+
+  .grid path {
+    stroke-width: 0;
+  }
+
+
+  /* Today line */
+
+  .today {
+    fill: none;
+    stroke: ${options.todayLineColor};
+    stroke-width: 2px;
+  }
+
+
+  /* Task styling */
+
+  /* Default task */
+
+  .task {
+    stroke-width: 2;
+  }
+
+  .taskText {
+    text-anchor: middle;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+
+  .taskText:not([font-size]) {
+    font-size: 11px;
+  }
+
+  .taskTextOutsideRight {
+    fill: ${options.taskTextDarkColor};
+    text-anchor: start;
+    font-size: 11px;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+
+  }
+
+  .taskTextOutsideLeft {
+    fill: ${options.taskTextDarkColor};
+    text-anchor: end;
+    font-size: 11px;
+  }
+
+  /* Special case clickable */
+  .task.clickable {
+    cursor: pointer;
+  }
+  .taskText.clickable {
+    cursor: pointer;
+    fill: ${options.taskTextClickableColor} !important;
+    font-weight: bold;
+  }
+
+  .taskTextOutsideLeft.clickable {
+    cursor: pointer;
+    fill: ${options.taskTextClickableColor} !important;
+    font-weight: bold;
+  }
+
+  .taskTextOutsideRight.clickable {
+    cursor: pointer;
+    fill: ${options.taskTextClickableColor} !important;
+    font-weight: bold;
+  }
+
+  /* Specific task settings for the sections*/
+
+  .taskText0,
+  .taskText1,
+  .taskText2,
+  .taskText3 {
+    fill: ${options.taskTextColor};
+  }
+
+  .task0,
+  .task1,
+  .task2,
+  .task3 {
+    fill: ${options.taskBkgColor};
+    stroke: ${options.taskBorderColor};
+  }
+
+  .taskTextOutside0,
+  .taskTextOutside2
+  {
+    fill: ${options.taskTextOutsideColor};
+  }
+
+  .taskTextOutside1,
+  .taskTextOutside3 {
+    fill: ${options.taskTextOutsideColor};
+  }
+
+
+  /* Active task */
+
+  .active0,
+  .active1,
+  .active2,
+  .active3 {
+    fill: ${options.activeTaskBkgColor};
+    stroke: ${options.activeTaskBorderColor};
+  }
+
+  .activeText0,
+  .activeText1,
+  .activeText2,
+  .activeText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+
+  /* Completed task */
+
+  .done0,
+  .done1,
+  .done2,
+  .done3 {
+    stroke: ${options.doneTaskBorderColor};
+    fill: ${options.doneTaskBkgColor};
+    stroke-width: 2;
+  }
+
+  .doneText0,
+  .doneText1,
+  .doneText2,
+  .doneText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+
+  /* Tasks on the critical line */
+
+  .crit0,
+  .crit1,
+  .crit2,
+  .crit3 {
+    stroke: ${options.critBorderColor};
+    fill: ${options.critBkgColor};
+    stroke-width: 2;
+  }
+
+  .activeCrit0,
+  .activeCrit1,
+  .activeCrit2,
+  .activeCrit3 {
+    stroke: ${options.critBorderColor};
+    fill: ${options.activeTaskBkgColor};
+    stroke-width: 2;
+  }
+
+  .doneCrit0,
+  .doneCrit1,
+  .doneCrit2,
+  .doneCrit3 {
+    stroke: ${options.critBorderColor};
+    fill: ${options.doneTaskBkgColor};
+    stroke-width: 2;
+    cursor: pointer;
+    shape-rendering: crispEdges;
+  }
+
+  .milestone {
+    transform: rotate(45deg) scale(0.8,0.8);
+  }
+
+  .milestoneText {
+    font-style: italic;
+  }
+  .doneCritText0,
+  .doneCritText1,
+  .doneCritText2,
+  .doneCritText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+  .activeCritText0,
+  .activeCritText1,
+  .activeCritText2,
+  .activeCritText3 {
+    fill: ${options.taskTextDarkColor} !important;
+  }
+
+  .titleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: ${options.taskTextDarkColor}    ;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
+`;
+
+export default getStyles;