orientableDebugger = (model, values, vars, filter) => html`
<div class="model" style="">${h(model, values, vars, filter)}</div>
<hr>
<ul>
<li class="best">All results have assignments</li>
<li class="better">Some results</li>
<li class="bad">No result</li>
</ul>
<style>
body {
background: #fff;
}
.model {
font-family: Source Code Pro, monospace;
white-space: pre;
font-size: 15px;
}
.line-number {
text-align: right;
margin-right: 15px;
color: #aaa !important;
}
.line {
margin-bottom: 0px;
}
.var {
display: inline-block;
font-weight: 400;
}
.values {
position: relative;
display: table;
font-size: 10px;
margin-bottom: 0px !important;
line-height: 7px;
}
.bad {
color: #d73a49 !important;
}
.better {
color: orange !important;
}
.best {
color: #6f42c1 !important;
}
.values {
padding-left: 0 !important;
list-style: none;
}
.values li.value {
color: #0074e8;
list-style: none;
}
.values li.definition {
color: #42C16F !important;
list-style: none;
}
</style>`