1body {
2  position: absolute;
3  top: 0;
4  bottom: 0;
5  right: 0;
6  left: 0;
7
8  display: flex;
9  align-items: stretch;
10  margin: 0;
11  font-family: sans-serif;
12  white-space: nowrap;
13  height: 100%;
14}
15body > * {
16  overflow-y: auto; /* Scroll sections independently*/
17  margin: 0;
18}
19
20#code {
21  font-size: 18px;
22  line-height: 36px;
23  flex-grow: 1;
24  padding-right: 10em; /* Leave space for #info */
25}
26#code span {
27  padding: 9px 0; /* No "gaps" between lines due to line-height */
28}
29.node.ambiguous::before, .ancestors.ambiguous::after, .tree-node.ambiguous > header::after {
30  content: /*the thinking man's emoji*/'\01F914';
31}
32
33#info {
34  position: fixed;
35  right: 2em;
36  top: 1em;
37  width: 25em;
38  border: 1px solid black;
39  min-height: 20em;
40  background-color: whiteSmoke;
41  overflow-x: clip;
42  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
43}
44#info header {
45  background-color: black;
46  color: white;
47  font-size: larger;
48  padding: 0.5em;
49}
50#info.ambiguous header { background-color: #803; }
51#info.sequence header { background-color: darkBlue; }
52#info.terminal header { background-color: darkGreen; }
53#info.opaque header { background-color: orangeRed; }
54#i_kind {
55  float: right;
56  font-size: small;
57}
58#info section {
59  padding: 0.5em;
60  border-top: 1px solid lightGray;
61  overflow-x: auto;
62}
63#i_ancestors { font-size: small; }
64
65#tree {
66  flex-grow: 0;
67  min-width: 20em;
68  margin-right: 1em;
69  border-right: 1px solid darkGray;
70  background-color: azure;
71  font-size: small;
72  overflow-x: auto;
73  resize: horizontal;
74}
75#tree ul {
76  margin: 0;
77  display: inline-block;
78  padding-left: 6px;
79  border-left: 1px solid rgba(0,0,0,0.2);
80  list-style: none;
81}
82#tree > ul { border-left: none; }
83.tree-node.selected > header .name { font-weight: bold; }
84.tree-node.terminal .name { font-family: monospace; }
85.tree-node.ambiguous > header .name { color: #803; font-weight: bold; }
86.tree-node.sequence > header .name { color: darkBlue; }
87.tree-node.terminal > header .name { color: darkGreen; }
88.tree-node.opaque > header .name { color: orangeRed; }
89
90.selected { outline: 1px dashed black; }
91.abbrev { opacity: 50%; }
92.abbrev::after { content: '~'; }
93.opaque { background-color: bisque; }
94