...
| Code Block | ||
|---|---|---|
| ||
#diagram .sequence-diagram .lifeline .participant {
font-weight: 400;
border: 2px solid #b94065;
background: #fffec8;
}
#diagram .sequence-diagram .lifeline .participant label {
text-decoration: underline;
}
#diagram .sequence-diagram .lifeline .line {
border-left-color: #b94065;
}
#diagram .sequence-diagram .message {
border-bottom-color: #b94065;
}
#diagram .sequence-diagram .message svg polyline {
fill: #b94065;
stroke: #b94065;
}
#diagram .sequence-diagram .message.self svg > polyline:not(.head) {
fill: none;
}
#diagram .sequence-diagram .occurrence {
background-color: white;
border: 2px solid #b94065;
} |
Light modern
...
This style is achieved with only 4 lines of CSS.
| Code Block |
|---|
#diagram .participant {
border: 1px solid;
border-color: hsla(0, 0%, 0%, 0.4);
} |
Green-Orange
...
This style picked the main colors from Chrome’s icon.
...