mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-02-17 09:10:08 +00:00
Customize mermaid module (#362)
* enabled mermaid by default * implemented logic to use internal oder cdn mermaid * added english documentation * added french translation for the mermaid options * Removed useless test print * Hugo does not use upper case letters in params * fixed false sample link * improved mermaid pages * fixed always load mermaid if no frontmatter specified * fixed mermaid samples * removed obsolete css files * changed default version of mermaid cdn * renamed mermaidURL to customMermaidURL and removed css link * improved mermaid configuration description Co-authored-by: Arthur Ferdinand Lindner <Arthur-Ferdinand.Lindner@Telekom.de> Co-authored-by: Arthur Ferdinand Lindner <arthur.lindner@outlook.de>
This commit is contained in:
mirisbowring
GitHub
parent
00f1ca6856
commit
023fe7ef2b
9 changed files with 61 additions and 1048 deletions
|
|
@ -15,6 +15,8 @@ defaultContentLanguageInSubdir= true
|
||||||
showVisitedLinks = true
|
showVisitedLinks = true
|
||||||
disableBreadcrumb = false
|
disableBreadcrumb = false
|
||||||
disableNextPrev = false
|
disableNextPrev = false
|
||||||
|
disableMermaid = false
|
||||||
|
customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
|
||||||
titleSeparator = "::"
|
titleSeparator = "::"
|
||||||
|
|
||||||
[outputs]
|
[outputs]
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,10 @@ Note that some of these parameters are explained in details in other sections of
|
||||||
disableLanguageSwitchingButton = false
|
disableLanguageSwitchingButton = false
|
||||||
# Hide breadcrumbs in the header and only show the current page title
|
# Hide breadcrumbs in the header and only show the current page title
|
||||||
disableBreadcrumb = true
|
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
|
# Hide Next and Previous page buttons normally displayed full height beside content
|
||||||
disableNextPrev = true
|
disableNextPrev = true
|
||||||
# Order sections in menu by "weight" or "title". Default to "weight"
|
# 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.
|
> 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
|
> 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.
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,10 @@ Notez que certains de ces paramètres sont expliqués en détails dans d'autres
|
||||||
disableInlineCopyToClipBoard = false
|
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.
|
# 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
|
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.
|
# Quand vous utilisez un site multi-langue, utilisez ce paramètre pour désactiver le bouton de changement de langue.
|
||||||
disableLanguageSwitchingButton = false
|
disableLanguageSwitchingButton = false
|
||||||
# Ordonne les sections dans menu par poids ("weight") ou titre ("title"). Défaut à "weight"
|
# 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`.
|
> 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.
|
> 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.
|
||||||
|
|
|
||||||
|
|
@ -27,29 +27,9 @@ graph LR;
|
||||||
C -->|Two| E[Result two]
|
C -->|Two| E[Result two]
|
||||||
{{</mermaid>}}
|
{{</mermaid>}}
|
||||||
|
|
||||||
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
|
## Sequence example
|
||||||
|
|
||||||
{{</*mermaid*/>}}
|
{{</* mermaid */>}}
|
||||||
sequenceDiagram
|
sequenceDiagram
|
||||||
participant Alice
|
participant Alice
|
||||||
participant Bob
|
participant Bob
|
||||||
|
|
@ -163,7 +143,7 @@ classDiagram
|
||||||
|
|
||||||
### Git example
|
### Git example
|
||||||
|
|
||||||
```mermaid
|
{{</* mermaid */>}}
|
||||||
gitGraph:
|
gitGraph:
|
||||||
options
|
options
|
||||||
{
|
{
|
||||||
|
|
@ -180,11 +160,11 @@ classDiagram
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
merge newbranch
|
merge newbranch
|
||||||
```
|
{{</* /mermaid*/>}}
|
||||||
|
|
||||||
renders as
|
renders as
|
||||||
|
|
||||||
```mermaid
|
{{<mermaid>}}
|
||||||
gitGraph:
|
gitGraph:
|
||||||
options
|
options
|
||||||
{
|
{
|
||||||
|
|
@ -201,7 +181,7 @@ end
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
merge newbranch
|
merge newbranch
|
||||||
```
|
{{</mermaid>}}
|
||||||
|
|
||||||
### State Diagrams
|
### State Diagrams
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,26 +26,6 @@ graph LR;
|
||||||
C -->|Deux| E[Résultat deux]
|
C -->|Deux| E[Résultat deux]
|
||||||
{{< /mermaid >}}
|
{{< /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
|
## Sequence example
|
||||||
|
|
||||||
{{</*mermaid*/>}}
|
{{</*mermaid*/>}}
|
||||||
|
|
@ -78,38 +58,6 @@ sequenceDiagram
|
||||||
Bob-->John: Au top!
|
Bob-->John: Au top!
|
||||||
{{< /mermaid >}}
|
{{< /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<br/>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<br/>prédominent...
|
|
||||||
John-->Alice: Super!
|
|
||||||
John->Bob: Et toi?
|
|
||||||
Bob-->John: Au top!
|
|
||||||
```
|
|
||||||
|
|
||||||
## GANTT Example
|
## GANTT Example
|
||||||
|
|
||||||
{{</*mermaid*/>}}
|
{{</*mermaid*/>}}
|
||||||
|
|
@ -130,7 +78,6 @@ sequenceDiagram
|
||||||
Ajout à Mermaid :1d
|
Ajout à Mermaid :1d
|
||||||
{{</* /mermaid */>}}
|
{{</* /mermaid */>}}
|
||||||
|
|
||||||
|
|
||||||
renders as
|
renders as
|
||||||
|
|
||||||
{{<mermaid>}}
|
{{<mermaid>}}
|
||||||
|
|
@ -151,50 +98,9 @@ gantt
|
||||||
Ajout à Mermaid :1d
|
Ajout à Mermaid :1d
|
||||||
{{</mermaid>}}
|
{{</mermaid>}}
|
||||||
|
|
||||||
|
|
||||||
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
|
### Class example
|
||||||
|
|
||||||
```mermaid
|
{{/* mermaid */}}
|
||||||
classDiagram
|
classDiagram
|
||||||
Class01 <|-- AveryLongClass : Cool
|
Class01 <|-- AveryLongClass : Cool
|
||||||
Class03 *-- Class04
|
Class03 *-- Class04
|
||||||
|
|
@ -209,11 +115,11 @@ gantt
|
||||||
Class01 : int chimp
|
Class01 : int chimp
|
||||||
Class01 : int gorilla
|
Class01 : int gorilla
|
||||||
Class08 <--> C2: Cool label
|
Class08 <--> C2: Cool label
|
||||||
```
|
{{/* /mermaid */}}
|
||||||
|
|
||||||
renders as
|
renders as
|
||||||
|
|
||||||
```mermaid
|
{{< mermaid >}}
|
||||||
classDiagram
|
classDiagram
|
||||||
Class01 <|-- AveryLongClass : Cool
|
Class01 <|-- AveryLongClass : Cool
|
||||||
Class03 *-- Class04
|
Class03 *-- Class04
|
||||||
|
|
@ -228,11 +134,11 @@ classDiagram
|
||||||
Class01 : int chimp
|
Class01 : int chimp
|
||||||
Class01 : int gorilla
|
Class01 : int gorilla
|
||||||
Class08 <--> C2: Cool label
|
Class08 <--> C2: Cool label
|
||||||
```
|
{{< /mermaid >}}
|
||||||
|
|
||||||
### Git example
|
### Git example
|
||||||
|
|
||||||
```mermaid
|
{{</* mermaid */>}}
|
||||||
gitGraph:
|
gitGraph:
|
||||||
options
|
options
|
||||||
{
|
{
|
||||||
|
|
@ -249,11 +155,11 @@ classDiagram
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
merge newbranch
|
merge newbranch
|
||||||
```
|
{{</* /mermaid */>}}
|
||||||
|
|
||||||
renders as
|
renders as
|
||||||
|
|
||||||
```mermaid
|
{{< mermaid >}}
|
||||||
gitGraph:
|
gitGraph:
|
||||||
options
|
options
|
||||||
{
|
{
|
||||||
|
|
@ -270,7 +176,7 @@ end
|
||||||
commit
|
commit
|
||||||
commit
|
commit
|
||||||
merge newbranch
|
merge newbranch
|
||||||
```
|
{{< /mermaid >}}
|
||||||
|
|
||||||
### State Diagrams
|
### State Diagrams
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
{{ if .Params.chapter }}
|
{{ if .Params.chapter }}
|
||||||
</div> <!-- end chapter-->
|
</div> <!-- end chapter-->
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
{{ partial "custom-comments.html" . }}
|
{{ partial "custom-comments.html" . }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="navigation">
|
<div id="navigation">
|
||||||
<!-- Next prev page -->
|
<!-- Next prev page -->
|
||||||
{{ $currentNode := . }}
|
{{ $currentNode := . }}
|
||||||
|
|
||||||
{{ template "menu-nextprev" dict "menu" .Site.Home "currentnode" $currentNode }}
|
{{ template "menu-nextprev" dict "menu" .Site.Home "currentnode" $currentNode }}
|
||||||
|
|
||||||
{{ define "menu-nextprev" }}
|
{{ define "menu-nextprev" }}
|
||||||
{{$currentNode := .currentnode }}
|
{{$currentNode := .currentnode }}
|
||||||
{{ if ne .menu.Params.hidden true}}
|
{{ if ne .menu.Params.hidden true}}
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
|
<div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
|
||||||
<div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
|
<div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -66,12 +66,18 @@
|
||||||
<script src="{{"js/modernizr.custom-3.6.0.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
<script src="{{"js/modernizr.custom-3.6.0.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
||||||
<script src="{{"js/learn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
<script src="{{"js/learn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
||||||
<script src="{{"js/hugo-learn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
<script src="{{"js/hugo-learn.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
||||||
|
{{ if (or (and (ne .Params.disableMermaid nil) (not .Params.disableMermaid)) (not .Site.Params.disableMermaid)) }}
|
||||||
<link href="{{"mermaid/mermaid.css" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" />
|
{{ if isset .Params "customMermaidURL" }}
|
||||||
<script src="{{"mermaid/mermaid.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
<script src="{{ .Params.customMermaidURL }}"></script>
|
||||||
<script>
|
{{ else if isset .Site.Params "customMermaidURL" }}
|
||||||
mermaid.initialize({ startOnLoad: true });
|
<script src="{{ .Site.Params.customMermaidURL }}"></script>
|
||||||
</script>
|
{{ else }}
|
||||||
|
<script src="{{"mermaid/mermaid.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
||||||
|
{{ end }}
|
||||||
|
<script>
|
||||||
|
mermaid.initialize({ startOnLoad: true });
|
||||||
|
</script>
|
||||||
|
{{ end }}
|
||||||
{{ partial "custom-footer.html" . }}
|
{{ partial "custom-footer.html" . }}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
Loading…
Add table
Reference in a new issue