github.com/mweagle/Sparta@v1.15.0/docs_source/themes/hugo-theme-learn/static/mermaid/mermaid.dark.css (about) 1 /* Flowchart variables */ 2 /* Sequence Diagram variables */ 3 /* Gantt chart variables */ 4 .mermaid .label { 5 color: #323D47; 6 } 7 .node rect, 8 .node circle, 9 .node ellipse, 10 .node polygon { 11 fill: #BDD5EA; 12 stroke: #81B1DB; 13 stroke-width: 1px; 14 } 15 .edgePath .path { 16 stroke: lightgrey; 17 } 18 .edgeLabel { 19 background-color: #e8e8e8; 20 } 21 .cluster rect { 22 fill: #6D6D65 !important; 23 rx: 4 !important; 24 stroke: rgba(255, 255, 255, 0.25) !important; 25 stroke-width: 1px !important; 26 } 27 .cluster text { 28 fill: #F9FFFE; 29 } 30 .actor { 31 stroke: #81B1DB; 32 fill: #BDD5EA; 33 } 34 text.actor { 35 fill: black; 36 stroke: none; 37 } 38 .actor-line { 39 stroke: lightgrey; 40 } 41 .messageLine0 { 42 stroke-width: 1.5; 43 stroke-dasharray: "2 2"; 44 marker-end: "url(#arrowhead)"; 45 stroke: lightgrey; 46 } 47 .messageLine1 { 48 stroke-width: 1.5; 49 stroke-dasharray: "2 2"; 50 stroke: lightgrey; 51 } 52 #arrowhead { 53 fill: lightgrey !important; 54 } 55 #crosshead path { 56 fill: lightgrey !important; 57 stroke: lightgrey !important; 58 } 59 .messageText { 60 fill: lightgrey; 61 stroke: none; 62 } 63 .labelBox { 64 stroke: #81B1DB; 65 fill: #BDD5EA; 66 } 67 .labelText { 68 fill: #323D47; 69 stroke: none; 70 } 71 .loopText { 72 fill: lightgrey; 73 stroke: none; 74 } 75 .loopLine { 76 stroke-width: 2; 77 stroke-dasharray: "2 2"; 78 marker-end: "url(#arrowhead)"; 79 stroke: #81B1DB; 80 } 81 .note { 82 stroke: rgba(255, 255, 255, 0.25); 83 fill: #fff5ad; 84 } 85 .noteText { 86 fill: black; 87 stroke: none; 88 font-family: 'trebuchet ms', verdana, arial; 89 font-size: 14px; 90 } 91 /** Section styling */ 92 .section { 93 stroke: none; 94 opacity: 0.2; 95 } 96 .section0 { 97 fill: rgba(255, 255, 255, 0.3); 98 } 99 .section2 { 100 fill: #EAE8B9; 101 } 102 .section1, 103 .section3 { 104 fill: white; 105 opacity: 0.2; 106 } 107 .sectionTitle0 { 108 fill: #F9FFFE; 109 } 110 .sectionTitle1 { 111 fill: #F9FFFE; 112 } 113 .sectionTitle2 { 114 fill: #F9FFFE; 115 } 116 .sectionTitle3 { 117 fill: #F9FFFE; 118 } 119 .sectionTitle { 120 text-anchor: start; 121 font-size: 11px; 122 text-height: 14px; 123 } 124 /* Grid and axis */ 125 .grid .tick { 126 stroke: rgba(255, 255, 255, 0.3); 127 opacity: 0.3; 128 shape-rendering: crispEdges; 129 } 130 .grid .tick text { 131 fill: lightgrey; 132 opacity: 0.5; 133 } 134 .grid path { 135 stroke-width: 0; 136 } 137 /* Today line */ 138 .today { 139 fill: none; 140 stroke: #DB5757; 141 stroke-width: 2px; 142 } 143 /* Task styling */ 144 /* Default task */ 145 .task { 146 stroke-width: 1; 147 } 148 .taskText { 149 text-anchor: middle; 150 font-size: 11px; 151 } 152 .taskTextOutsideRight { 153 fill: #323D47; 154 text-anchor: start; 155 font-size: 11px; 156 } 157 .taskTextOutsideLeft { 158 fill: #323D47; 159 text-anchor: end; 160 font-size: 11px; 161 } 162 /* Specific task settings for the sections*/ 163 .taskText0, 164 .taskText1, 165 .taskText2, 166 .taskText3 { 167 fill: #323D47; 168 } 169 .task0, 170 .task1, 171 .task2, 172 .task3 { 173 fill: #BDD5EA; 174 stroke: rgba(255, 255, 255, 0.5); 175 } 176 .taskTextOutside0, 177 .taskTextOutside2 { 178 fill: lightgrey; 179 } 180 .taskTextOutside1, 181 .taskTextOutside3 { 182 fill: lightgrey; 183 } 184 /* Active task */ 185 .active0, 186 .active1, 187 .active2, 188 .active3 { 189 fill: #81B1DB; 190 stroke: rgba(255, 255, 255, 0.5); 191 } 192 .activeText0, 193 .activeText1, 194 .activeText2, 195 .activeText3 { 196 fill: #323D47 !important; 197 } 198 /* Completed task */ 199 .done0, 200 .done1, 201 .done2, 202 .done3 { 203 fill: lightgrey; 204 } 205 .doneText0, 206 .doneText1, 207 .doneText2, 208 .doneText3 { 209 fill: #323D47 !important; 210 } 211 /* Tasks on the critical line */ 212 .crit0, 213 .crit1, 214 .crit2, 215 .crit3 { 216 stroke: #E83737; 217 fill: #E83737; 218 stroke-width: 2; 219 } 220 .activeCrit0, 221 .activeCrit1, 222 .activeCrit2, 223 .activeCrit3 { 224 stroke: #E83737; 225 fill: #81B1DB; 226 stroke-width: 2; 227 } 228 .doneCrit0, 229 .doneCrit1, 230 .doneCrit2, 231 .doneCrit3 { 232 stroke: #E83737; 233 fill: lightgrey; 234 stroke-width: 1; 235 cursor: pointer; 236 shape-rendering: crispEdges; 237 } 238 .doneCritText0, 239 .doneCritText1, 240 .doneCritText2, 241 .doneCritText3 { 242 fill: lightgrey !important; 243 } 244 .activeCritText0, 245 .activeCritText1, 246 .activeCritText2, 247 .activeCritText3 { 248 fill: #323D47 !important; 249 } 250 .titleText { 251 text-anchor: middle; 252 font-size: 18px; 253 fill: lightgrey; 254 } 255 /* 256 257 258 */ 259 .node text { 260 font-family: 'trebuchet ms', verdana, arial; 261 font-size: 14px; 262 } 263 .node.clickable { 264 cursor: pointer; 265 } 266 div.mermaidTooltip { 267 position: absolute; 268 text-align: center; 269 max-width: 200px; 270 padding: 2px; 271 font-family: 'trebuchet ms', verdana, arial; 272 font-size: 12px; 273 background: #6D6D65; 274 border: 1px solid rgba(255, 255, 255, 0.25); 275 border-radius: 2px; 276 pointer-events: none; 277 z-index: 100; 278 }