html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } [onClick] { cursor: pointer; } html, body { margin: 0px; padding: 0px; font-family: 'Liberation Mono', monospace; font-size: 14pt; background-color: #fff; } h1 { color: #abc837; } #app { display: grid; color: #fff; } #menu-blackout { display: none; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1024; background: rgba(0, 0, 0, 0.35); } #menu-blackout.show { display: initial; } #menu { display: none; position: absolute; top: 24px; right: 24px; background: #fff; color: #000; border: 2px solid #000; box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.5); z-index: 1025; } #menu.show { display: initial; } #menu .item { padding: 16px; border-bottom: 1px solid #aaa; user-select: none; -webkit-tap-highlight-color: transparent; } #menu .item:hover { background: #ddd; } #menu .item:last-child { border-bottom: none; } header { display: grid; grid-template-columns: 1fr min-content min-content; align-items: center; background: #abc837; padding: 0px; color: #333c11; } header.modified { background: #c84a37; color: #faedeb; } header .name { font-weight: bold; padding-left: 16px; } header .add { font-size: 2em; padding-right: 16px; cursor: pointer; } header .menu { font-size: 1.25em; padding-right: 16px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .crumbs { display: flex; flex-wrap: wrap; padding: 16px; background: #333; color: #fff; } .crumbs .crumb { margin-right: 8px; font-size: 0.8em; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .crumbs .crumb:after { content: "•"; margin-left: 8px; color: #abc837; } .crumbs .crumb:last-child { margin-right: 0; } .crumbs .crumb:last-child:after { content: ''; margin-left: 0px; } .child-nodes { display: flex; flex-wrap: wrap; padding: 16px 16px 0px 16px; background-color: #505050; } .child-nodes .child-node { padding: 8px; border-radius: 8px; background-color: #2f2f2f; margin-right: 12px; margin-bottom: 16px; white-space: nowrap; font-size: 0.8em; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .node-name { margin: 32px 0 16px 0; background: #fff; color: #000; text-align: center; font-weight: bold; } .node-content { justify-self: center; padding: 16px 32px; word-wrap: break-word; font-family: monospace; font-size: 0.85em; color: #333; width: 100ex; resize: none; border: none; outline: none; } .node-content[contenteditable] { outline: 0px solid transparent; } .node-content:invalid { border-bottom: 1px solid #eee; border-radius: 8px; } .tree { padding: 16px; } @media only screen and (max-width: 100ex) { .node-content { width: 100%; justify-self: start; } }