# HG changeset patch
# User Kim Alvefur <zash@zash.se>
# Date 1670192191 -3600
# Node ID 1e10ddbf5c872cc63a60b31589ab834c24149571
# Parent  630887a50a7d1080956f6e8d5c4437fde1acfabc
mod_http_muc_log: Tweak style towards the "modern"

Also accidentally converted the hand-minified CSS to SCSS for easier
editing.

This gets rid of the <q> element because it makes browsers (at least
Firefox) add annoying quotes to any text copied out of them,
interfering with opening non-linkified URLs. That could have been
considered a sort of security mechanism, but convenience trumps
security!

diff -r 630887a50a7d -r 1e10ddbf5c87 mod_http_muc_log/res/http_muc_log.html
--- a/mod_http_muc_log/res/http_muc_log.html	Sun Dec 04 22:23:56 2022 +0100
+++ b/mod_http_muc_log/res/http_muc_log.html	Sun Dec 04 23:16:31 2022 +0100
@@ -59,10 +59,10 @@
 
 <ol class="chat-logs">{lines#
 <li {item.lang&lang="{item.lang}"} class="{item.st_name} {item.st_type?} {item.edited&edited}" id="{item.archive_id}">
-<a class="time" href="#{item.archive_id}"><time id="{item.time}" datetime="{item.datetime}">{item.time}</time></a>
 <b class="nick">{item.nick}</b>
 <em class="verb">{item.verb?}</em>
-<q class="body">{item.edited&<del>}{item.body?}{item.edited&</del> <a href="#{item.edited}" title="jump to corrected version">&#9998;</a>}{item.edit& <a href="#{item.edit}" title="jump to previous version">&#9999;</a>}{item.reply& <a href="#{item.reply}" title="jump to message responded to">&#8634;</a>}</q>
+<a class="time" href="#{item.archive_id}"><time id="{item.time}" datetime="{item.datetime}">{item.time}</time></a>
+<p class="body">{item.edited&<del>}{item.body?}{item.edited&</del> <a href="#{item.edited}" title="jump to corrected version">&#9998;</a>}{item.edit& <a href="#{item.edit}" title="jump to previous version">&#9999;</a>}{item.reply& <a href="#{item.reply}" title="jump to message responded to">&#8634;</a>}</p>
 {item.reactions%<span class="reaction">{idx} {item}</span>}
 {item.oob.url&<figure><a rel="nofollow" href="{item.oob.url?}"><img alt="{item.oob.desc?}" src="{item.oob.url?}"/></a><figcaption>{item.oob.desc?}</figcaption></figure>}
 </li>}
diff -r 630887a50a7d -r 1e10ddbf5c87 mod_http_muc_log/static/style.css
--- a/mod_http_muc_log/static/style.css	Sun Dec 04 22:23:56 2022 +0100
+++ b/mod_http_muc_log/static/style.css	Sun Dec 04 23:16:31 2022 +0100
@@ -1,52 +1,81 @@
-:link,:visited{color:#3465a4;text-decoration:none;}
-:link:hover,:visited:hover{color:#6197df;}
-body{background-color:#eeeeec;margin:1ex 0;padding-bottom:3em;font-family:Arial,Helvetica,sans-serif;}
-ul,ol{padding:0;}
-li{list-style:none;}
-hr{visibility:hidden;clear:both;}
-br{clear:both;}
-header,footer{margin:1ex 1em;}
-footer{font-size:smaller;color:#babdb6;}
-nav{font-size:large;margin:1ex 1ex;clear:both;line-height:1.5em;}
-footer nav .up{display:none;}
-@media screen and (min-width: 460px) {
-nav {font-size:x-large;margin:1ex 1em;}
-}
-nav a{padding:1ex}
-nav li,nav dt{margin:1ex}
-nav .up{font-size:smaller;display:block;clear:both;}
-nav .up::before{content:"↑ ";}
-nav .prev{float:left;}
-nav .next{float:right;}
-nav .next::after{content:" →";}
-nav .prev::before{content:"← ";}
-nav .last::after{content:" ⇥";}
-nav :empty::after,nav :empty::before{content:""}
-table{display:inline-block; margin:1ex 1em;vertical-align:top;}
-th{font-size:x-small}
-td{text-align:right;color:#bababa}
-td > a, td > span{padding:0.4em}
-.content{background-color:white;padding:1em;list-style-position:inside;}
-.time{float:right;font-size:small;opacity:0.2;}
-li:hover .time{opacity:1;}
-.description{font-size:smaller;}
-.body{white-space:pre-line;}
-.body::before,.body::after{content:"";}
-.presence .verb{font-style:normal;color:#30c030;}
-.unavailable .verb{color:#c03030;}
-.button{display:inline-block}
-.button>a{color:white;background-color:orange;border-radius:4px}
-.reaction{font-size:smaller;outline:1px solid silver;border-radius:2px}
-form{text-align:right}
-li.edited{display:none}
-li:target{outline:1px gray dotted;display:inherit}
-figure img{max-height:9em;max-width:16em}
-@media (prefers-color-scheme: dark) {
-html{color:#eee}
-body{background-color:#161616}
-.content{background-color:#1c1c1c}
-footer{color:#444}
-td{color:#444}
-.button>a{background-color:#282828}
-}
+@charset "UTF-8";
+/* Style for mod_http_muc_log */
+:link, :visited { color: #3465a4; text-decoration: none; }
+
+:link:hover, :link:hover, :visited:hover, :visited:hover { color: #6197df; }
+
+body { background-color: #eeeeec; margin: 1ex 0; padding-bottom: 3em; font-family: Arial,Helvetica,sans-serif; }
+
+ul, ol { padding: 0; }
+
+li { list-style: none; }
+
+li.edited { display: none; }
+
+li:target { outline: 1px gray dotted; display: inherit; }
+
+hr { visibility: hidden; clear: both; }
+
+br { clear: both; }
+
+header, footer { margin: 1ex 1em; }
+
+footer { font-size: smaller; color: #babdb6; }
+
+footer nav .up { display: none; }
+
+nav { font-size: large; margin: 1ex 1ex; clear: both; line-height: 1.5em; }
+
+nav a { padding: 1ex; }
+
+nav li, nav dt { margin: 1ex; }
+
+nav .up { font-size: smaller; display: block; clear: both; }
+
+nav .up::before { content: "↑ "; }
+
+nav .prev { float: left; }
+
+nav .prev::before { content: "← "; }
 
+nav .next { float: right; }
+
+nav .next::after { content: " →"; }
+
+nav .last::after { content: " ⇥"; }
+
+nav :empty::after, nav :empty::before { content: ""; }
+
+@media screen and (min-width: 460px) { nav { font-size: x-large; margin: 1ex 1em; } }
+
+table { display: inline-block; margin: 1ex 1em; vertical-align: top; }
+
+th { font-size: x-small; }
+
+td { text-align: right; color: #bababa; }
+
+td > a, td > span { padding: 0.4em; }
+
+.content { background-color: white; padding: 1em; list-style-position: inside; }
+
+.time { margin-left: 1em; font-size: small; }
+
+.description { font-size: smaller; }
+
+.body { white-space: pre-line; margin: 1pt 0 1ex; }
+
+.presence .verb { font-style: normal; color: #30c030; }
+
+.unavailable .verb { color: #c03030; }
+
+.button { display: inline-block; }
+
+.button > a { color: white; background-color: orange; border-radius: 4px; }
+
+.reaction { font-size: smaller; outline: 1px solid silver; border-radius: 2px; }
+
+form { text-align: right; }
+
+figure img { max-height: 9em; max-width: 16em; }
+
+@media (prefers-color-scheme: dark) { html { color: #eee; } body { background-color: #161616; } .content { background-color: #1c1c1c; } footer { color: #444; } td { color: #444; } .button > a { background-color: #282828; } }