diff options
Diffstat (limited to 'xP/public/xP.css')
| -rw-r--r-- | xP/public/xP.css | 257 |
1 files changed, 257 insertions, 0 deletions
diff --git a/xP/public/xP.css b/xP/public/xP.css new file mode 100644 index 0000000..e8b28f2 --- /dev/null +++ b/xP/public/xP.css @@ -0,0 +1,257 @@ +@font-face { + src: url('ircfmt.woff2') format('woff2'); + font-family: 'IRC Formatting'; + font-weight: normal; + font-style: normal; +} +body { + margin: 0; + padding: 0; + /* Firefox only renders C0 within the textarea, why? */ + font-family: 'IRC Formatting', 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; + z-index: 1; +} +.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; + margin-right: -.3em; +} +.indicator { + margin: 0 .3em; +} +button { + font: inherit; + background: transparent; + border: 1px solid transparent; + padding: 0 .3em; +} +button:focus { + border: 1px dotted #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, .completions { + /* 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; +} |