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;
+}