body { margin: 0; padding: 0; font-family: sans-serif; font-size: clamp(0.5rem, 2vw, 1rem); } .xP { display: flex; flex-direction: column; overflow: hidden; height: 100vh; /* https://caniuse.com/viewport-unit-variants */ height: 100dvh; } .overlay { padding: .6em .9em; background: #eee; border: 1px outset #eee; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } .title, .status { padding: .05em .3em; background: #eee; display: flex; justify-content: space-between; align-items: baseline; column-gap: .3em; position: relative; border-top: 3px solid #ccc; border-bottom: 2px solid #888; } .title { /* To approximate right-aligned space-between. */ flex-direction: row-reverse; } .title:before, .status:before { content: " "; position: absolute; left: 0; right: 0; height: 2px; top: -2px; background: #fff; } .title:after, .status:after { content: " "; position: absolute; left: 0; right: 0; height: 1px; bottom: -1px; background: #ccc; } .toolbar { display: flex; align-items: baseline; column-gap: .3em; } button { font: inherit; background: transparent; border: 1px solid transparent; } button:focus { border: 1px dashed #000; } button:hover { border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #888; border-bottom: 1px solid #888; } button:hover:active { border-left: 1px solid #888; border-top: 1px solid #888; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } .middle { flex: auto; display: flex; flex-direction: row; overflow: hidden; } .list { overflow-y: auto; border-right: 2px solid #ccc; min-width: 10em; flex-shrink: 0; } .item { padding: .05em .3em; cursor: default; } .item.highlighted { color: #ff5f00; } .item.activity { font-weight: bold; } .item.current { font-style: italic; background: #eee; } /* Only Firefox currently supports align-content: safe end, thus this. */ .buffer-container { flex: auto; display: flex; flex-direction: column; overflow: hidden; position: relative; } .filler { flex: auto; } .buffer { display: grid; grid-template-columns: max-content minmax(0, 1fr); overflow-y: auto; } .log { font-family: monospace; overflow-y: auto; } .log, .content { /* Note: https://bugs.chromium.org/p/chromium/issues/detail?id=1261435 */ white-space: break-spaces; overflow-wrap: break-word; } .log, .buffer .content { padding: .1em .3em; } .leaked { opacity: 50%; } .date { padding: .3em; grid-column: span 2; font-weight: bold; } .unread { grid-column: span 2; border-top: 1px solid #ff5f00; } .time { padding: .1em .3em; background: #f8f8f8; color: #bbb; border-right: 1px solid #ccc; } .time.hidden:after { border-top: .2em dotted #ccc; display: block; width: 50%; margin: 0 auto; content: ""; } .mark { padding-right: .3em; text-align: center; display: inline-block; min-width: 2em; } .mark.error { color: red; } .mark.join { color: green; } .mark.part { color: red; } .mark.action { color: darkred; } .content .b { font-weight: bold; } .content .i { font-style: italic; } .content .u { text-decoration: underline; } .content .s { text-decoration: line-through; } .content .m { font-family: monospace; } .completions { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; padding: .05em .3em; border-top: 1px solid #888; max-height: 50%; display: flex; flex-flow: column wrap; column-gap: .6em; overflow-x: auto; } .input { flex-shrink: 0; border: 2px inset #eee; overflow: hidden; resize: vertical; display: flex; } .input:focus-within { border-color: #ff5f00; } .prompt { padding: .05em .3em; border-right: 1px solid #ccc; background: #f8f8f8; font-weight: bold; } textarea { font: inherit; padding: .05em .3em; margin: 0; border: 0; flex-grow: 1; resize: none; } textarea:focus { outline: none; }