1 files changed, 195 insertions, 0 deletions
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..b50a57f
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,195 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+}
+
+html {
+  overflow: hidden;
+}
+
+body {
+  width: 100%;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  height: 100%;
+  position: fixed;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+body > div#messages {
+  order: -1;
+  display: grid;
+  grid-template-columns: fit-content(120px) 1fr fit-content(80px);
+}
+
+.message {
+  display: contents;
+}
+
+.message .nick {
+  padding: 4px 8px;
+  padding-left: 16px;
+  grid-column: 1 / 2;
+  overflow-x: hidden;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  align-content: center;
+}
+
+.message .content {
+  grid-column: 2 / 4;
+  padding: 4px 8px;
+  align-content: center;
+}
+
+.message:has(.actions) .content {
+  grid-column: 2 / 3;
+}
+
+.message .actions {
+  padding: 0 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  grid-column: 3 / 4;
+  align-content: center;
+}
+
+.message .actions > button,
+.message .actions > form button {
+  background: none;
+  border: none;
+}
+
+@media (pointer:fine) {
+  .message .actions button {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.message:hover,
+.message:has(.actions dialog[popover]:popover-open) {
+  & .actions button {
+    opacity: 1;
+    pointer-events: initial;
+    cursor: pointer;
+  }
+}
+
+.message.currentUser {
+  & > * {
+    /* background: #def6ff; */
+  }
+
+  & > .nick {
+    border-left: solid 6px #88dbfb;
+    padding-left: 10px;
+  }
+}
+
+.nickChange,
+.join,
+.part {
+  grid-column: 1 / 4;
+  opacity: .4;
+  padding: 4px 16px;
+  background: #d3d3d342;
+  font-size: .95em;
+}
+
+#chat {
+  order: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 8px;
+  margin-top: 8px;
+}
+
+#chat > form {
+  display: contents;
+}
+
+#chat > form input {
+  flex: 1;
+  padding: 8px;
+}
+
+#chat button {
+  margin-left: 8px;
+  border: none;
+  background: none;
+}
+
+#footer {
+  order: 2;
+  padding: 4px 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+
+  & p {
+    margin: 0;
+    text-align: right;
+    font-style: italic;
+  }
+
+  & > button {
+    color: blue;
+    background: none;
+    border: none;
+    margin-left: 16px;
+    cursor: pointer;
+  }
+}
+
+#settings_modal {
+  height: 300px;
+  padding: none;
+  overflow: hidden;
+
+  & > iframe {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+#settings {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  width: calc(100% - 16px);
+  max-width: 600px;
+  margin: 0 auto;
+  position: initial;
+  min-height: 100vh;
+}
+
+#settings form {
+  display: contents;
+}
+
+#settings form h3 {
+  margin: 0;
+  margin-bottom: 8px;
+}
+
+#settings form label {
+  display: block;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}