diff --git a/exampleSite/config.toml b/exampleSite/config.toml index bea553bc34..9f7ec53e35 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -15,6 +15,8 @@ defaultContentLanguageInSubdir= true showVisitedLinks = true disableBreadcrumb = false disableNextPrev = false + disableMermaid = false + customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js" titleSeparator = "::" [outputs] diff --git a/exampleSite/content/basics/configuration/_index.en.md b/exampleSite/content/basics/configuration/_index.en.md index 6dbce18c65..7a804950a3 100644 --- a/exampleSite/content/basics/configuration/_index.en.md +++ b/exampleSite/content/basics/configuration/_index.en.md @@ -35,6 +35,10 @@ Note that some of these parameters are explained in details in other sections of disableLanguageSwitchingButton = false # Hide breadcrumbs in the header and only show the current page title disableBreadcrumb = true + # If set to true, prevents Hugo from including the mermaid module if not needed (will reduce load times and traffic) + disableMermaid = false + # Specifies the remote location of the mermaid js + customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js" # Hide Next and Previous page buttons normally displayed full height beside content disableNextPrev = true # Order sections in menu by "weight" or "title". Default to "weight" @@ -60,3 +64,14 @@ Learn theme uses the last improvement available in hugo version 20+ to generate > Hugo generate lunrjs index.json at the root of public folder. > When you build the site with `hugo server`, hugo generates it internally and of course it doesn’t show up in the filesystem + +## Mermaid + +The mermaid configuration parameters can also be set on a specific page. In this case, the global parameter would be overwritten by the local one. + +> Example: +> +> Mermaid is globally disabled. By default it won't be loaded by any page. +> On page "Architecture" you need a class diagram. You can set the mermaid parameters locally to only load mermaid on this page (not on the others). + +You also can disable mermaid for specific pages while globally enabled. diff --git a/exampleSite/content/basics/configuration/_index.fr.md b/exampleSite/content/basics/configuration/_index.fr.md index fb1a4e8374..1cb5c97cbb 100644 --- a/exampleSite/content/basics/configuration/_index.fr.md +++ b/exampleSite/content/basics/configuration/_index.fr.md @@ -31,6 +31,10 @@ Notez que certains de ces paramètres sont expliqués en détails dans d'autres disableInlineCopyToClipBoard = false # Un titre est défini par défaut lorsque vous utilisez un raccourci dans le menu. Utilisez ce paramètre pour le cacher. disableShortcutsTitle = false + # Si défini à true, empêche Hugo d'inclure le module "mermaid" s'il n'est pas nécessaire (réduira les temps de chargement et le trafic) + disableMermaid = false + # Spécifie l'emplacement distant du mermaid js + customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js" # Quand vous utilisez un site multi-langue, utilisez ce paramètre pour désactiver le bouton de changement de langue. disableLanguageSwitchingButton = false # Ordonne les sections dans menu par poids ("weight") ou titre ("title"). Défaut à "weight" @@ -54,3 +58,14 @@ Le thème *Learn* utilise les dernières améliorations d'Hugo pour générer un > Hugo génère lunrjs index.json à la racine du dossier `public`. > Quand vous générez le site avec `hugo server`, Hugo génère le fichier en mémoire, il n'est donc pas disponible sur le disque. + +## Mermaid + +Les paramètres de configuration du mermaid peuvent également être définis sur une page spécifique. Dans ce cas, le paramètre global sera écrasé par le paramètre local. + +> Exemple: +> +> Mermaid est globalement handicapé. Par défaut, elle ne sera chargée par aucune page. +> À la page "Architecture", vous avez besoin d'un diagramme de classe. Vous pouvez régler les paramètres de mermaid localement pour ne charger que la sirène sur cette page (pas sur les autres). + +Vous pouvez également désactiver mermaid pour des pages spécifiques tout en l'activant globalement. diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md index bc1aeb6de8..b5ed111dd8 100644 --- a/exampleSite/content/shortcodes/mermaid.en.md +++ b/exampleSite/content/shortcodes/mermaid.en.md @@ -27,29 +27,9 @@ graph LR; C -->|Two| E[Result two] {{}} -or you can use this alternative syntax: - - ```mermaid - graph LR; - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] - ``` - -renders as - -```mermaid -graph LR; - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] -``` - ## Sequence example - {{}} + {{}} sequenceDiagram participant Alice participant Bob @@ -163,7 +143,7 @@ classDiagram ### Git example - ```mermaid + {{}} gitGraph: options { @@ -180,11 +160,11 @@ classDiagram commit commit merge newbranch - ``` + {{}} renders as -```mermaid +{{}} gitGraph: options { @@ -201,7 +181,7 @@ end commit commit merge newbranch -``` +{{}} ### State Diagrams diff --git a/exampleSite/content/shortcodes/mermaid.fr.md b/exampleSite/content/shortcodes/mermaid.fr.md index 707d741900..7798785ddf 100644 --- a/exampleSite/content/shortcodes/mermaid.fr.md +++ b/exampleSite/content/shortcodes/mermaid.fr.md @@ -26,26 +26,6 @@ graph LR; C -->|Deux| E[Résultat deux] {{< /mermaid >}} -or you can use this alternative syntax: - - ```mermaid - graph LR; - A[Bords droits] -->|Lien texte| B(Bords arondis) - B --> C{Décision} - C -->|Un| D[Résultat un] - C -->|Deux| E[Résultat deux] - ``` - -renders as - -```mermaid -graph LR; - A[Bords droits] -->|Lien texte| B(Bords arondis) - B --> C{Décision} - C -->|Un| D[Résultat un] - C -->|Deux| E[Résultat deux] -``` - ## Sequence example {{}} @@ -78,38 +58,6 @@ sequenceDiagram Bob-->John: Au top! {{< /mermaid >}} -or you can use this alternative syntax: - - ```mermaid - sequenceDiagram - participant Alice - participant Bob - Alice->>John: Salut John, comment vas-tu? - loop Vérification - John->John: Se bat contre l'hyponcodrie. - end - Note right of John: Les pensées rationnelles
prédominent... - John-->Alice: Super! - John->Bob: Et toi? - Bob-->John: Au top! - ``` - -renders as - -```mermaid -sequenceDiagram - participant Alice - participant Bob - Alice->>John: Salut John, comment vas-tu? - loop Vérification - John->John: Se bat contre l'hyponcodrie. - end - Note right of John: Les pensées rationnelles
prédominent... - John-->Alice: Super! - John->Bob: Et toi? - Bob-->John: Au top! -``` - ## GANTT Example {{}} @@ -130,7 +78,6 @@ sequenceDiagram Ajout à Mermaid :1d {{}} - renders as {{}} @@ -151,50 +98,9 @@ gantt Ajout à Mermaid :1d {{}} - -or you can use this alternative syntax: - - ```mermaid - gantt - dateFormat YYYY-MM-DD - title Ajout de la fonctionnalité de GANTT à Mermaid - section Une section - Tâche complétée :done, des1, 2014-01-06,2014-01-08 - Tâche en cours :active, des2, 2014-01-09, 3d - Future tâche : des3, after des2, 5d - Future tâche 2 : des4, after des3, 5d - section Tâches critiques - Tâche complétée dans le chemin critique :crit, done, 2014-01-06,24h - Implémenter le parser et jison :crit, done, after des1, 2d - Créer des tests pour le parser :crit, active, 3d - Future tâche dans le chemin critique :crit, 5d - Créer des tests pour le renderer :2d - Ajout à Mermaid :1d - ``` - -renders as - -```mermaid -gantt - dateFormat YYYY-MM-DD - title Ajout de la fonctionnalité de GANTT à Mermaid - section Une section - Tâche complétée :done, des1, 2014-01-06,2014-01-08 - Tâche en cours :active, des2, 2014-01-09, 3d - Future tâche : des3, after des2, 5d - Future tâche 2 : des4, after des3, 5d - section Tâches critiques - Tâche complétée dans le chemin critique :crit, done, 2014-01-06,24h - Implémenter le parser et jison :crit, done, after des1, 2d - Créer des tests pour le parser :crit, active, 3d - Future tâche dans le chemin critique :crit, 5d - Créer des tests pour le renderer :2d - Ajout à Mermaid :1d -``` - ### Class example - ```mermaid + {{/* mermaid */}} classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 @@ -209,11 +115,11 @@ gantt Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label - ``` + {{/* /mermaid */}} renders as -```mermaid +{{< mermaid >}} classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 @@ -228,11 +134,11 @@ classDiagram Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label -``` +{{< /mermaid >}} ### Git example - ```mermaid + {{}} gitGraph: options { @@ -249,11 +155,11 @@ classDiagram commit commit merge newbranch - ``` + {{}} renders as -```mermaid +{{< mermaid >}} gitGraph: options { @@ -270,7 +176,7 @@ end commit commit merge newbranch -``` +{{< /mermaid >}} ### State Diagrams diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 0ae30f7cec..091f809488 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,16 +1,16 @@ {{ if .Params.chapter }} {{ end }} - + {{ partial "custom-comments.html" . }} - +
@@ -66,12 +66,18 @@ - - - - + {{ if (or (and (ne .Params.disableMermaid nil) (not .Params.disableMermaid)) (not .Site.Params.disableMermaid)) }} + {{ if isset .Params "customMermaidURL" }} + + {{ else if isset .Site.Params "customMermaidURL" }} + + {{ else }} + + {{ end }} + + {{ end }} {{ partial "custom-footer.html" . }} diff --git a/static/mermaid/mermaid.css b/static/mermaid/mermaid.css deleted file mode 100644 index 1ca8f3dd9c..0000000000 --- a/static/mermaid/mermaid.css +++ /dev/null @@ -1,277 +0,0 @@ -/* Flowchart variables */ -/* Sequence Diagram variables */ -/* Gantt chart variables */ -.mermaid .label { - color: #333; -} -.node rect, -.node circle, -.node ellipse, -.node polygon { - fill: #ECECFF; - stroke: #CCCCFF; - stroke-width: 1px; -} -.edgePath .path { - stroke: #333333; -} -.edgeLabel { - background-color: #e8e8e8; -} -.cluster rect { - fill: #ffffde !important; - rx: 4 !important; - stroke: #aaaa33 !important; - stroke-width: 1px !important; -} -.cluster text { - fill: #333; -} -.actor { - stroke: #CCCCFF; - fill: #ECECFF; -} -text.actor { - fill: black; - stroke: none; -} -.actor-line { - stroke: grey; -} -.messageLine0 { - stroke-width: 1.5; - stroke-dasharray: "2 2"; - marker-end: "url(#arrowhead)"; - stroke: #333; -} -.messageLine1 { - stroke-width: 1.5; - stroke-dasharray: "2 2"; - stroke: #333; -} -#arrowhead { - fill: #333; -} -#crosshead path { - fill: #333 !important; - stroke: #333 !important; -} -.messageText { - fill: #333; - stroke: none; -} -.labelBox { - stroke: #CCCCFF; - fill: #ECECFF; -} -.labelText { - fill: black; - stroke: none; -} -.loopText { - fill: black; - stroke: none; -} -.loopLine { - stroke-width: 2; - stroke-dasharray: "2 2"; - marker-end: "url(#arrowhead)"; - stroke: #CCCCFF; -} -.note { - stroke: #aaaa33; - fill: #fff5ad; -} -.noteText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; -} -/** Section styling */ -.section { - stroke: none; - opacity: 0.2; -} -.section0 { - fill: rgba(102, 102, 255, 0.49); -} -.section2 { - fill: #fff400; -} -.section1, -.section3 { - fill: white; - opacity: 0.2; -} -.sectionTitle0 { - fill: #333; -} -.sectionTitle1 { - fill: #333; -} -.sectionTitle2 { - fill: #333; -} -.sectionTitle3 { - fill: #333; -} -.sectionTitle { - text-anchor: start; - font-size: 11px; - text-height: 14px; -} -/* Grid and axis */ -.grid .tick { - stroke: lightgrey; - opacity: 0.3; - shape-rendering: crispEdges; -} -.grid path { - stroke-width: 0; -} -/* Today line */ -.today { - fill: none; - stroke: red; - stroke-width: 2px; -} -/* Task styling */ -/* Default task */ -.task { - stroke-width: 2; -} -.taskText { - text-anchor: middle; - font-size: 11px; -} -.taskTextOutsideRight { - fill: black; - text-anchor: start; - font-size: 11px; -} -.taskTextOutsideLeft { - fill: black; - text-anchor: end; - font-size: 11px; -} -/* Specific task settings for the sections*/ -.taskText0, -.taskText1, -.taskText2, -.taskText3 { - fill: white; -} -.task0, -.task1, -.task2, -.task3 { - fill: #8a90dd; - stroke: #534fbc; -} -.taskTextOutside0, -.taskTextOutside2 { - fill: black; -} -.taskTextOutside1, -.taskTextOutside3 { - fill: black; -} -/* Active task */ -.active0, -.active1, -.active2, -.active3 { - fill: #bfc7ff; - stroke: #534fbc; -} -.activeText0, -.activeText1, -.activeText2, -.activeText3 { - fill: black !important; -} -/* Completed task */ -.done0, -.done1, -.done2, -.done3 { - stroke: grey; - fill: lightgrey; - stroke-width: 2; -} -.doneText0, -.doneText1, -.doneText2, -.doneText3 { - fill: black !important; -} -/* Tasks on the critical line */ -.crit0, -.crit1, -.crit2, -.crit3 { - stroke: #ff8888; - fill: red; - stroke-width: 2; -} -.activeCrit0, -.activeCrit1, -.activeCrit2, -.activeCrit3 { - stroke: #ff8888; - fill: #bfc7ff; - stroke-width: 2; -} -.doneCrit0, -.doneCrit1, -.doneCrit2, -.doneCrit3 { - stroke: #ff8888; - fill: lightgrey; - stroke-width: 2; - cursor: pointer; - shape-rendering: crispEdges; -} -.doneCritText0, -.doneCritText1, -.doneCritText2, -.doneCritText3 { - fill: black !important; -} -.activeCritText0, -.activeCritText1, -.activeCritText2, -.activeCritText3 { - fill: black !important; -} -.titleText { - text-anchor: middle; - font-size: 18px; - fill: black; -} -/* - - -*/ -.node text { - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; -} -.node.clickable { - cursor: pointer; -} -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; -} - diff --git a/static/mermaid/mermaid.dark.css b/static/mermaid/mermaid.dark.css deleted file mode 100644 index 507efb4ea5..0000000000 --- a/static/mermaid/mermaid.dark.css +++ /dev/null @@ -1,278 +0,0 @@ -/* Flowchart variables */ -/* Sequence Diagram variables */ -/* Gantt chart variables */ -.mermaid .label { - color: #323D47; -} -.node rect, -.node circle, -.node ellipse, -.node polygon { - fill: #BDD5EA; - stroke: #81B1DB; - stroke-width: 1px; -} -.edgePath .path { - stroke: lightgrey; -} -.edgeLabel { - background-color: #e8e8e8; -} -.cluster rect { - fill: #6D6D65 !important; - rx: 4 !important; - stroke: rgba(255, 255, 255, 0.25) !important; - stroke-width: 1px !important; -} -.cluster text { - fill: #F9FFFE; -} -.actor { - stroke: #81B1DB; - fill: #BDD5EA; -} -text.actor { - fill: black; - stroke: none; -} -.actor-line { - stroke: lightgrey; -} -.messageLine0 { - stroke-width: 1.5; - stroke-dasharray: "2 2"; - marker-end: "url(#arrowhead)"; - stroke: lightgrey; -} -.messageLine1 { - stroke-width: 1.5; - stroke-dasharray: "2 2"; - stroke: lightgrey; -} -#arrowhead { - fill: lightgrey !important; -} -#crosshead path { - fill: lightgrey !important; - stroke: lightgrey !important; -} -.messageText { - fill: lightgrey; - stroke: none; -} -.labelBox { - stroke: #81B1DB; - fill: #BDD5EA; -} -.labelText { - fill: #323D47; - stroke: none; -} -.loopText { - fill: lightgrey; - stroke: none; -} -.loopLine { - stroke-width: 2; - stroke-dasharray: "2 2"; - marker-end: "url(#arrowhead)"; - stroke: #81B1DB; -} -.note { - stroke: rgba(255, 255, 255, 0.25); - fill: #fff5ad; -} -.noteText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; -} -/** Section styling */ -.section { - stroke: none; - opacity: 0.2; -} -.section0 { - fill: rgba(255, 255, 255, 0.3); -} -.section2 { - fill: #EAE8B9; -} -.section1, -.section3 { - fill: white; - opacity: 0.2; -} -.sectionTitle0 { - fill: #F9FFFE; -} -.sectionTitle1 { - fill: #F9FFFE; -} -.sectionTitle2 { - fill: #F9FFFE; -} -.sectionTitle3 { - fill: #F9FFFE; -} -.sectionTitle { - text-anchor: start; - font-size: 11px; - text-height: 14px; -} -/* Grid and axis */ -.grid .tick { - stroke: rgba(255, 255, 255, 0.3); - opacity: 0.3; - shape-rendering: crispEdges; -} -.grid .tick text { - fill: lightgrey; - opacity: 0.5; -} -.grid path { - stroke-width: 0; -} -/* Today line */ -.today { - fill: none; - stroke: #DB5757; - stroke-width: 2px; -} -/* Task styling */ -/* Default task */ -.task { - stroke-width: 1; -} -.taskText { - text-anchor: middle; - font-size: 11px; -} -.taskTextOutsideRight { - fill: #323D47; - text-anchor: start; - font-size: 11px; -} -.taskTextOutsideLeft { - fill: #323D47; - text-anchor: end; - font-size: 11px; -} -/* Specific task settings for the sections*/ -.taskText0, -.taskText1, -.taskText2, -.taskText3 { - fill: #323D47; -} -.task0, -.task1, -.task2, -.task3 { - fill: #BDD5EA; - stroke: rgba(255, 255, 255, 0.5); -} -.taskTextOutside0, -.taskTextOutside2 { - fill: lightgrey; -} -.taskTextOutside1, -.taskTextOutside3 { - fill: lightgrey; -} -/* Active task */ -.active0, -.active1, -.active2, -.active3 { - fill: #81B1DB; - stroke: rgba(255, 255, 255, 0.5); -} -.activeText0, -.activeText1, -.activeText2, -.activeText3 { - fill: #323D47 !important; -} -/* Completed task */ -.done0, -.done1, -.done2, -.done3 { - fill: lightgrey; -} -.doneText0, -.doneText1, -.doneText2, -.doneText3 { - fill: #323D47 !important; -} -/* Tasks on the critical line */ -.crit0, -.crit1, -.crit2, -.crit3 { - stroke: #E83737; - fill: #E83737; - stroke-width: 2; -} -.activeCrit0, -.activeCrit1, -.activeCrit2, -.activeCrit3 { - stroke: #E83737; - fill: #81B1DB; - stroke-width: 2; -} -.doneCrit0, -.doneCrit1, -.doneCrit2, -.doneCrit3 { - stroke: #E83737; - fill: lightgrey; - stroke-width: 1; - cursor: pointer; - shape-rendering: crispEdges; -} -.doneCritText0, -.doneCritText1, -.doneCritText2, -.doneCritText3 { - fill: lightgrey !important; -} -.activeCritText0, -.activeCritText1, -.activeCritText2, -.activeCritText3 { - fill: #323D47 !important; -} -.titleText { - text-anchor: middle; - font-size: 18px; - fill: lightgrey; -} -/* - - -*/ -.node text { - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; -} -.node.clickable { - cursor: pointer; -} -div.mermaidTooltip { - position: absolute; - text-align: center; - max-width: 200px; - padding: 2px; - font-family: 'trebuchet ms', verdana, arial; - font-size: 12px; - background: #6D6D65; - border: 1px solid rgba(255, 255, 255, 0.25); - border-radius: 2px; - pointer-events: none; - z-index: 100; -} diff --git a/static/mermaid/mermaid.forest.css b/static/mermaid/mermaid.forest.css deleted file mode 100644 index ad432d59d8..0000000000 --- a/static/mermaid/mermaid.forest.css +++ /dev/null @@ -1,356 +0,0 @@ -/* Flowchart variables */ -/* Sequence Diagram variables */ -/* Gantt chart variables */ -.mermaid .label { - font-family: 'trebuchet ms', verdana, arial; - color: #333; -} -.node rect, -.node circle, -.node ellipse, -.node polygon { - fill: #cde498; - stroke: #13540c; - stroke-width: 1px; -} -.edgePath .path { - stroke: green; - stroke-width: 1.5px; -} -.edgeLabel { - background-color: #e8e8e8; -} -.cluster rect { - fill: #cdffb2 !important; - rx: 4 !important; - stroke: #6eaa49 !important; - stroke-width: 1px !important; -} -.cluster text { - fill: #333; -} -.actor { - stroke: #13540c; - fill: #cde498; -} -text.actor { - fill: black; - stroke: none; -} -.actor-line { - stroke: grey; -} -.messageLine0 { - stroke-width: 1.5; - stroke-dasharray: "2 2"; - marker-end: "url(#arrowhead)"; - stroke: #333; -} -.messageLine1 { - stroke-width: 1.5; - stroke-dasharray: "2 2"; - stroke: #333; -} -#arrowhead { - fill: #333; -} -#crosshead path { - fill: #333 !important; - stroke: #333 !important; -} -.messageText { - fill: #333; - stroke: none; -} -.labelBox { - stroke: #326932; - fill: #cde498; -} -.labelText { - fill: black; - stroke: none; -} -.loopText { - fill: black; - stroke: none; -} -.loopLine { - stroke-width: 2; - stroke-dasharray: "2 2"; - marker-end: "url(#arrowhead)"; - stroke: #326932; -} -.note { - stroke: #6eaa49; - fill: #fff5ad; -} -.noteText { - fill: black; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; -} -/** Section styling */ -.section { - stroke: none; - opacity: 0.2; -} -.section0 { - fill: #6eaa49; -} -.section2 { - fill: #6eaa49; -} -.section1, -.section3 { - fill: white; - opacity: 0.2; -} -.sectionTitle0 { - fill: #333; -} -.sectionTitle1 { - fill: #333; -} -.sectionTitle2 { - fill: #333; -} -.sectionTitle3 { - fill: #333; -} -.sectionTitle { - text-anchor: start; - font-size: 11px; - text-height: 14px; -} -/* Grid and axis */ -.grid .tick { - stroke: lightgrey; - opacity: 0.3; - shape-rendering: crispEdges; -} -.grid path { - stroke-width: 0; -} -/* Today line */ -.today { - fill: none; - stroke: red; - stroke-width: 2px; -} -/* Task styling */ -/* Default task */ -.task { - stroke-width: 2; -} -.taskText { - text-anchor: middle; - font-size: 11px; -} -.taskTextOutsideRight { - fill: black; - text-anchor: start; - font-size: 11px; -} -.taskTextOutsideLeft { - fill: black; - text-anchor: end; - font-size: 11px; -} -/* Specific task settings for the sections*/ -.taskText0, -.taskText1, -.taskText2, -.taskText3 { - fill: white; -} -.task0, -.task1, -.task2, -.task3 { - fill: #487e3a; - stroke: #13540c; -} -.taskTextOutside0, -.taskTextOutside2 { - fill: black; -} -.taskTextOutside1, -.taskTextOutside3 { - fill: black; -} -/* Active task */ -.active0, -.active1, -.active2, -.active3 { - fill: #cde498; - stroke: #13540c; -} -.activeText0, -.activeText1, -.activeText2, -.activeText3 { - fill: black !important; -} -/* Completed task */ -.done0, -.done1, -.done2, -.done3 { - stroke: grey; - fill: lightgrey; - stroke-width: 2; -} -.doneText0, -.doneText1, -.doneText2, -.doneText3 { - fill: black !important; -} -/* Tasks on the critical line */ -.crit0, -.crit1, -.crit2, -.crit3 { - stroke: #ff8888; - fill: red; - stroke-width: 2; -} -.activeCrit0, -.activeCrit1, -.activeCrit2, -.activeCrit3 { - stroke: #ff8888; - fill: #cde498; - stroke-width: 2; -} -.doneCrit0, -.doneCrit1, -.doneCrit2, -.doneCrit3 { - stroke: #ff8888; - fill: lightgrey; - stroke-width: 2; - cursor: pointer; - shape-rendering: crispEdges; -} -.doneCritText0, -.doneCritText1, -.doneCritText2, -.doneCritText3 { - fill: black !important; -} -.activeCritText0, -.activeCritText1, -.activeCritText2, -.activeCritText3 { - fill: black !important; -} -.titleText { - text-anchor: middle; - font-size: 18px; - fill: black; -} -/* - - -*/ -g.classGroup text { - fill: #13540c; - stroke: none; - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; -} -g.classGroup rect { - fill: #cde498; - stroke: #13540c; -} -g.classGroup line { - stroke: #13540c; - stroke-width: 1; -} -svg .classLabel .box { - stroke: none; - stroke-width: 0; - fill: #cde498; - opacity: 0.5; -} -svg .classLabel .label { - fill: #13540c; -} -.relation { - stroke: #13540c; - stroke-width: 1; - fill: none; -} -.composition { - fill: #13540c; - stroke: #13540c; - stroke-width: 1; -} -#compositionStart { - fill: #13540c; - stroke: #13540c; - stroke-width: 1; -} -#compositionEnd { - fill: #13540c; - stroke: #13540c; - stroke-width: 1; -} -.aggregation { - fill: #cde498; - stroke: #13540c; - stroke-width: 1; -} -#aggregationStart { - fill: #cde498; - stroke: #13540c; - stroke-width: 1; -} -#aggregationEnd { - fill: #cde498; - stroke: #13540c; - stroke-width: 1; -} -#dependencyStart { - fill: #13540c; - stroke: #13540c; - stroke-width: 1; -} -#dependencyEnd { - fill: #13540c; - stroke: #13540c; - stroke-width: 1; -} -#extensionStart { - fill: #13540c; - stroke: #13540c; - stroke-width: 1; -} -#extensionEnd { - fill: #13540c; - stroke: #13540c; - stroke-width: 1; -} -.node text { - font-family: 'trebuchet ms', verdana, arial; - font-size: 14px; -} -.node.clickable { - cursor: pointer; -} -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; -}