summaryrefslogtreecommitdiff
path: root/xP/public/xP.css
diff options
context:
space:
mode:
Diffstat (limited to 'xP/public/xP.css')
-rw-r--r--xP/public/xP.css257
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;
+}