logs-content: Added styles for posts to differentiate post types more easily and highlight scenes.

marko/page/logs-content/components/post-meta/index.marko

@@ -1,5 +1,5 @@
 <if(state.text != null && state.text != "")>
-  <div class=["post-meta", input.kind, state.color, input.weak ? "weak" : null] title=state.tooltip>
+  <div class=["post-meta", input.kind, state.color, input.weak ? "weak" : null, input.class] title=state.tooltip>
     <a if(state.href != null) href=state.href>${state.text}</a>
     <span else>${state.text}</span>
   </div>

marko/page/logs-content/components/post-meta/style.less

@@ -17,4 +17,14 @@ div.post-meta {
 
 div.post-meta.weak {
   opacity: 0.5;
+}
+
+div.post-meta.nick.pk-text {
+  color: #AAA;
+}
+div.post-meta.nick.pk-action {
+  color: #A64;
+}
+div.post-meta.nick.pk-scene {
+  color: #68A;
 }

marko/page/logs-content/components/post/index.marko

@@ -1,4 +1,4 @@
-<div if(!state.removed) class=["post", component.kindClass("post-type"), state.multipart ? "multipart" : null]>
+<div if(!state.removed) class=["post", component.kindClass("pk-"), state.multipart ? "multipart" : null]>
   <div class="post-meta-row">
     <div class="options color-menu">
       <if-permitted user=input.user permission="post.move">
@@ -13,7 +13,7 @@
       </if-permitted>
     </div>
     <post-meta kind="timestamp" value=input.post.time />
-    <post-meta kind="nick" value=input.post.nick />
+    <post-meta kind="nick" class=("pk-"+input.post.kind) value=input.post.nick />
   </div>
   <div if(input.post.kind.startsWith("annotation.")) class="post-body" >
     <annotation level=(input.post.kind.substring(11))>

marko/page/logs-content/components/post/style.less

@@ -1,5 +1,7 @@
 div.post {
   margin-bottom: 1ch;
+  margin-left: -12px;
+  padding-left: 12px;
 
   div.post-meta-row {
     padding: 0;
@@ -48,11 +50,17 @@ div.post {
     div.annotation {
       margin-top: 0.33em;
     }
-  }
-  div.post-body p:first-of-type {
-    margin-top: 0;
-    padding-top: 0;
-  }
+
+    p:first-of-type {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  } 
+}
+
+div.post.pk-scene {
+  margin-left: -14px;
+  border-left: 2px solid #68A;
 }
 
 div.post.multipart {