mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +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
|
||||
disableBreadcrumb = false
|
||||
disableNextPrev = false
|
||||
disableMermaid = false
|
||||
customMermaidURL = "https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"
|
||||
titleSeparator = "::"
|
||||
|
||||
[outputs]
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -27,29 +27,9 @@ graph LR;
|
|||
C -->|Two| E[Result two]
|
||||
{{</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
|
||||
|
||||
{{</*mermaid*/>}}
|
||||
{{</* mermaid */>}}
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
|
|
@ -163,7 +143,7 @@ classDiagram
|
|||
|
||||
### Git example
|
||||
|
||||
```mermaid
|
||||
{{</* mermaid */>}}
|
||||
gitGraph:
|
||||
options
|
||||
{
|
||||
|
|
@ -180,11 +160,11 @@ classDiagram
|
|||
commit
|
||||
commit
|
||||
merge newbranch
|
||||
```
|
||||
{{</* /mermaid*/>}}
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
{{<mermaid>}}
|
||||
gitGraph:
|
||||
options
|
||||
{
|
||||
|
|
@ -201,7 +181,7 @@ end
|
|||
commit
|
||||
commit
|
||||
merge newbranch
|
||||
```
|
||||
{{</mermaid>}}
|
||||
|
||||
### State Diagrams
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
{{</*mermaid*/>}}
|
||||
|
|
@ -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<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
|
||||
|
||||
{{</*mermaid*/>}}
|
||||
|
|
@ -130,7 +78,6 @@ sequenceDiagram
|
|||
Ajout à Mermaid :1d
|
||||
{{</* /mermaid */>}}
|
||||
|
||||
|
||||
renders as
|
||||
|
||||
{{<mermaid>}}
|
||||
|
|
@ -151,50 +98,9 @@ gantt
|
|||
Ajout à Mermaid :1d
|
||||
{{</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
|
||||
|
||||
```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
|
||||
{{</* mermaid */>}}
|
||||
gitGraph:
|
||||
options
|
||||
{
|
||||
|
|
@ -249,11 +155,11 @@ classDiagram
|
|||
commit
|
||||
commit
|
||||
merge newbranch
|
||||
```
|
||||
{{</* /mermaid */>}}
|
||||
|
||||
renders as
|
||||
|
||||
```mermaid
|
||||
{{< mermaid >}}
|
||||
gitGraph:
|
||||
options
|
||||
{
|
||||
|
|
@ -270,7 +176,7 @@ end
|
|||
commit
|
||||
commit
|
||||
merge newbranch
|
||||
```
|
||||
{{< /mermaid >}}
|
||||
|
||||
### State Diagrams
|
||||
|
||||
|
|
|
|||
|
|
@ -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/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>
|
||||
|
||||
<link href="{{"mermaid/mermaid.css" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" />
|
||||
<script src="{{"mermaid/mermaid.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
{{ if (or (and (ne .Params.disableMermaid nil) (not .Params.disableMermaid)) (not .Site.Params.disableMermaid)) }}
|
||||
{{ if isset .Params "customMermaidURL" }}
|
||||
<script src="{{ .Params.customMermaidURL }}"></script>
|
||||
{{ else if isset .Site.Params "customMermaidURL" }}
|
||||
<script src="{{ .Site.Params.customMermaidURL }}"></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" . }}
|
||||
</body>
|
||||
</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…
Reference in a new issue