135 lines
2.2 KiB
CSS
135 lines
2.2 KiB
CSS
:root {
|
|
--lifeline-color: #bebebe;
|
|
--lifeline-start-color: #98fb98;
|
|
--lifeline-stop-ok-color: #98fb98;
|
|
--lifeline-stop-error-color: #ff4400;
|
|
--lifeline-stop-error-text-color: #ffffff;
|
|
--event-color: #ffa500;
|
|
--action-color: #ffffff;
|
|
--internal-color: #e0e0e0;
|
|
--activation-color: #ffffff;
|
|
--turn-start-color: var(--event-color);
|
|
--arrow-color: #000000;
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
align-content: stretch;
|
|
}
|
|
|
|
body > p {
|
|
padding: 0.33em 0.33em;
|
|
margin: 0;
|
|
border-bottom: solid black 1px;
|
|
}
|
|
|
|
body > div {
|
|
background: blue;
|
|
overflow: scroll;
|
|
flex: 1;
|
|
}
|
|
|
|
svg {
|
|
background: white;
|
|
font-family: monospace;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
svg rect.lifeline {
|
|
fill: var(--lifeline-color);
|
|
}
|
|
|
|
svg rect.terminator {
|
|
fill: var(--lifeline-color);
|
|
}
|
|
|
|
svg rect.lifeline-tail {
|
|
fill: url(#swimlane-fadeout);
|
|
}
|
|
|
|
svg rect.activation {
|
|
fill: var(--activation-color);
|
|
stroke: #000;
|
|
}
|
|
|
|
svg text {
|
|
white-space: pre;
|
|
dominant-baseline: text-before-edge;
|
|
}
|
|
|
|
svg rect.start {
|
|
fill: var(--lifeline-start-color);
|
|
stroke: #000;
|
|
}
|
|
|
|
svg rect.stop-ok {
|
|
fill: var(--lifeline-stop-ok-color);
|
|
stroke: #000;
|
|
}
|
|
|
|
svg rect.stop-error {
|
|
fill: var(--lifeline-stop-error-color);
|
|
stroke: #000;
|
|
}
|
|
svg text.stop-error {
|
|
fill: var(--lifeline-stop-error-text-color);
|
|
stroke: none;
|
|
}
|
|
|
|
svg rect.event {
|
|
fill: var(--event-color);
|
|
stroke: #000;
|
|
}
|
|
|
|
svg rect.turn-start {
|
|
fill: var(--turn-start-color);
|
|
stroke: #000;
|
|
}
|
|
|
|
svg rect.action {
|
|
fill: var(--action-color);
|
|
stroke: #000;
|
|
}
|
|
|
|
svg rect.internal {
|
|
fill: var(--internal-color);
|
|
stroke: #000;
|
|
}
|
|
|
|
svg.placard {
|
|
overflow: visible;
|
|
}
|
|
|
|
svg .arrow {
|
|
fill: none;
|
|
stroke: var(--arrow-color);
|
|
stroke-width: 1;
|
|
marker-end: url(#arrowhead);
|
|
}
|
|
|
|
svg .doublearrow {
|
|
fill: none;
|
|
stroke: var(--arrow-color);
|
|
stroke-width: 1;
|
|
marker-start: url(#arrowhead);
|
|
marker-end: url(#arrowhead);
|
|
}
|