@import "theme.less"; html { background-color: #fff; } #notes2 { min-height: 100vh; display: grid; grid-template-areas: "tree crumbs" "tree name" "tree content" //"tree checklist" //"tree schedule" //"tree files" "tree blank" ; grid-template-columns: min-content 1fr; @media only screen and (max-width: 600px) { grid-template-areas: "crumbs" "name" "content" //"checklist" //"schedule" //"files" "blank" ; grid-template-columns: 1fr; #tree { display: none; } } } #tree { grid-area: tree; padding: 16px; background-color: #333; color: #ddd; z-index: 100; // Over crumbs shadow #logo { display: grid; position: relative; justify-items: center; margin-bottom: 32px; margin-left: 24px; margin-right: 24px; img { width: 128px; left: -20px; } } .node { display: grid; grid-template-columns: 24px min-content; grid-template-rows: min-content 1fr; margin-top: 12px; .expand-toggle { user-select: none; img { width: 16px; height: 16px; } } .name { white-space: nowrap; cursor: pointer; user-select: none; &:hover { color: @color1; } &.selected { color: @color1; font-weight: bold; } } .children { padding-left: 24px; margin-left: 8px; border-left: 1px solid #444; grid-column: 1 / -1; &.collapsed { display: none; } } } } #crumbs { grid-area: crumbs; display: grid; justify-items: center; margin: 16px; } .crumbs { background: #e4e4e4; display: flex; flex-wrap: wrap; padding: 8px 16px; background: #e4e4e4; color: #333; border-radius: 5px; &.node-modified { background-color: @color1; color: @color2; .crumb:after { color: @color2; } } .crumb { margin-right: 8px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .crumb:after { content: "•"; margin-left: 8px; color: @color1 } .crumb:last-child { margin-right: 0; } .crumb:last-child:after { content: ''; margin-left: 0px; } } #name { color: @color3; font-weight: bold; text-align: center; font-size: 1.15em; margin-top: 32px; margin-bottom: 16px; } /* ============================================================= * * Textarea replicates the height of an element expanding height * * ============================================================= */ .grow-wrap { /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */ display: grid; grid-area: content; font-size: 1.0em; } .grow-wrap::after { /* Note the weird space! Needed to preventy jumpy behavior */ content: attr(data-replicated-value) " "; /* This is how textarea text behaves */ width: calc(100% - 32px); max-width: 900px; white-space: pre-wrap; word-wrap: break-word; color: #f0f; background: rgba(0, 255, 255, 0.5); justify-self: center; /* Hidden from view, clicks, and screen readers */ visibility: hidden; } .grow-wrap > textarea { /* You could leave this, but after a user resizes, then it ruins the auto sizing */ resize: none; /* Firefox shows scrollbar on growth, you can hide like this. */ overflow: hidden; } .grow-wrap > textarea, .grow-wrap::after { /* Identical styling required!! */ padding: 0.5rem; font: inherit; /* Place on top of each other */ grid-area: 1 / 1 / 2 / 2; } /* ============================================================= */ #node-content { justify-self: center; word-wrap: break-word; font-family: monospace; color: #333; width: calc(100% - 32px); max-width: 900px; resize: none; border: none; outline: none; &:invalid { background: #f5f5f5; padding-top: 16px; } } #blank { grid-area: blank; height: 32px; }