:root {
--bg-med: #2b5672;
--bg-drk: #142b46;
--fg-lit: #e7ecef;
--fg-med: #bbbbbb;
--contrast-dim: #fff9d1;
--contrast-brt: #f2e27a;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
a {
color: var(--contrast-dim);
text-decoration: none;
}
a:hover {
color: var(--contrast-brt);
text-decoration: underline;
}
a.is-same-state {
color: var(--fg-med);
}
a.is-same-state:after {
content: " (state matches selected)";
font-weight: bold;
}
a.is-selected-state {
background: var(--contrast-dim);
border: solid 1px var(--contrast-brt);
border-radius: 3px;
color: var(--bg-med);
}
a.is-ignored {
color: var(--fg-med);
text-decoration: none;
}
a.is-ignored:after {
content: " (ignored)";
font-weight: bold;
}
body {
font-family: sans-serif;
font-size: 14px;
margin: 0;
}
h1, h2, ul {
margin-bottom: 0.1em;
margin-top: 0.3em;
}
label {
font-weight: bold;
}
ul {
margin: 0;
}
.color-med {
background: var(--bg-med);
color: var(--fg-lit);
}
.color-dark {
background: var(--bg-drk);
border: solid var(--contrast-dim) 1px;
color: var(--fg-lit);
}
.font-code {
font-family: "Courier New", "Lucida Console", Monaco, monospace;
}
.font-small {
font-size: 0.9em;
}
.hscroll {
overflow: scroll;
}
@media only screen and (min-width: 360px) {
.hscroll { width: 350px; }
}
@media only screen and (min-width: 375px) {
.hscroll { width: 365px; }
}
@media only screen and (min-width: 414px) {
.hscroll { width: 404px; }
}
@media only screen and (min-width: 667px) {
.hscroll { width: 657px; }
}
@media only screen and (min-width: 736px) {
.hscroll { width: 726px; }
}
@media only screen and (min-width: 768px) {
.hscroll { width: 758px; }
}
@media only screen and (min-width: 812px) {
.hscroll { width: 802px; }
}
@media only screen and (min-width: 1024px) {
.hscroll {
overflow: auto;
width: auto;
}
}
.margin-bottom-small {
margin-bottom: 5px;
}
.padding-small {
padding: 5px;
}
.rounded {
border-radius: 10px;
}
.header {
border: 0 !important;
border-bottom: solid var(--contrast-dim) 1px !important;
padding-left: 5px;
}
.header h1 {
display: inline-block;
margin-right: 10px;
}
.header-links-container a {
padding: 5px;
}
.heading-with-controls {
display: block;
}
.heading-with-controls h2 {
display: inline-block;
margin-right: 40px;
}
.main-flex {
display: flex;
flex-wrap: wrap;
}
.main-flex-left {
flex-basis: 400px;
flex-grow: 1;
padding-left: 5px;
}
.main-flex-right {
flex-basis: 400px;
flex-grow: 3;
margin-left: 25px;
margin-right: 25px;
}
.path-list a {
border: solid 1px transparent;
display: inline-table;
}
.svg-actor-label {
fill: var(--fg-lit);
}
.svg-actor-timeline {
stroke: var(--bg-med);
}
.svg-event-label {
fill: var(--contrast-brt);
}
.svg-event-line {
fill: var(--bg-med);
stroke: var(--bg-med);
stroke-width: 2;
}
.svg-event-shape {
fill: var(--bg-med);
stroke: var(--bg-med);
}