test-runner.css

header {
  border-bottom: 3px dotted silver;
  margin-bottom: 0.5em;
  display: flex;
  flex-direction: row;
}
header > :nth-child(1) { flex: 0 0 7em; }
header > :nth-child(3) { flex: 1 1 auto; }
header > :nth-child(4) { flex: 1 1 auto; }

runner-name {
  font-weight: bold;
}

tom-container {
  display: block;
}

test-el {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5em;
}
test-el > :nth-child(1) { flex: 0 0 8em; }
test-el > :nth-child(2) { flex: 1 1 auto; }

test-el > * {
  padding: 0.5em;
}

test-el state-indicator {
  margin-right: 0.5em;
  color: white;
}

test-el details {
  display: none;
}

test-el details[data-has-data="true"] {
  display: initial;
}

[state="ignored"] {
  background-color: grey;
}
[state="pending"] {
  background-color: initial;
}
[state="in-progress"],
[state="start"]
{
  background-color: orange;
}
[state="pass"] {
  background-color: green;
}
[state="fail"] {
  background-color: red;
}