| body { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| right: 0; |
| left: 0; |
| |
| display: flex; |
| align-items: stretch; |
| margin: 0; |
| font-family: sans-serif; |
| white-space: nowrap; |
| height: 100%; |
| } |
| body > * { |
| overflow-y: auto; /* Scroll sections independently*/ |
| margin: 0; |
| } |
| |
| #code { |
| font-size: 18px; |
| line-height: 36px; |
| flex-grow: 1; |
| padding-right: 10em; /* Leave space for #info */ |
| } |
| #code span { |
| padding: 9px 0; /* No "gaps" between lines due to line-height */ |
| } |
| .node.ambiguous::before, .ancestors.ambiguous::after, .tree-node.ambiguous > header::after { |
| content: /*the thinking man's emoji*/'\01F914'; |
| } |
| |
| #info { |
| position: fixed; |
| right: 2em; |
| top: 1em; |
| width: 25em; |
| border: 1px solid black; |
| min-height: 20em; |
| background-color: whiteSmoke; |
| overflow-x: clip; |
| box-shadow: 3px 3px 5px rgba(0,0,0,0.2); |
| } |
| #info header { |
| background-color: black; |
| color: white; |
| font-size: larger; |
| padding: 0.5em; |
| } |
| #info.ambiguous header { background-color: #803; } |
| #info.sequence header { background-color: darkBlue; } |
| #info.terminal header { background-color: darkGreen; } |
| #info.opaque header { background-color: orangeRed; } |
| #i_kind { |
| float: right; |
| font-size: small; |
| } |
| #info section { |
| padding: 0.5em; |
| border-top: 1px solid lightGray; |
| overflow-x: auto; |
| } |
| #i_ancestors { font-size: small; } |
| |
| #tree { |
| flex-grow: 0; |
| min-width: 20em; |
| margin-right: 1em; |
| border-right: 1px solid darkGray; |
| background-color: azure; |
| font-size: small; |
| overflow-x: auto; |
| resize: horizontal; |
| } |
| #tree ul { |
| margin: 0; |
| display: inline-block; |
| padding-left: 6px; |
| border-left: 1px solid rgba(0,0,0,0.2); |
| list-style: none; |
| } |
| #tree > ul { border-left: none; } |
| .tree-node.selected > header .name { font-weight: bold; } |
| .tree-node.terminal .name { font-family: monospace; } |
| .tree-node.ambiguous > header .name { color: #803; font-weight: bold; } |
| .tree-node.sequence > header .name { color: darkBlue; } |
| .tree-node.terminal > header .name { color: darkGreen; } |
| .tree-node.opaque > header .name { color: orangeRed; } |
| |
| .selected { outline: 1px dashed black; } |
| .abbrev { opacity: 50%; } |
| .abbrev::after { content: '~'; } |
| .opaque { background-color: bisque; } |