From 210631c9e5ce54dd48418e70dd257e92d09997a2 Mon Sep 17 00:00:00 2001 From: Ashelyn Rose Date: Sat, 10 May 2025 00:09:26 -0600 Subject: Working (mostly) Kind of broken on iOS --- static/index.html | 25 +++++++ static/settings.html | 27 +++++++ static/style.css | 195 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 247 insertions(+) create mode 100644 static/index.html create mode 100644 static/settings.html create mode 100644 static/style.css (limited to 'static') diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..efaf070 --- /dev/null +++ b/static/index.html @@ -0,0 +1,25 @@ + + + + + Slightly-less-minimally viable chat + + + + +
+
+ + +
+
+ +
diff --git a/static/settings.html b/static/settings.html new file mode 100644 index 0000000..4ff6cbb --- /dev/null +++ b/static/settings.html @@ -0,0 +1,27 @@ + + + + + Chat settings + + + + +
+

Chat Settings

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