mod timeline UI tweaks

lichess-org · Oct 16, 2024 · 43f41b0 · 43f41b0
1 parent 004e474
commit 43f41b0
Showing 1 changed file with 24 additions and 5 deletions.
diff --git a/ui/mod/css/_mod-timeline.scss b/ui/mod/css/_mod-timeline.scss
@@ -28,16 +28,12 @@
   gap: 1em;
   padding: 0 1em;
 }
-.mod-timeline__event:has(.mod-timeline__event__action--modMessage),
-.mod-timeline__event:has(.mod-timeline__event__action--sentence) {
-  padding: 1em;
-  background: linear-gradient(to right, $c-brag, $c-bg 5px);
-}
 .mod-timeline__event__from {
   white-space: nowrap;
 }
 .mod-timeline__event__flair {
   @extend %flex-center;
+  padding: 0.2em;
   img {
     width: 1.6em;
     height: 1.6em;
@@ -52,6 +48,12 @@
   }
   .user-link {
     flex: 0 0 auto;
+    &:has(i.moderator) {
+      &,
+      i {
+        color: $c-brag;
+      }
+    }
   }
 }
 .mod-timeline__event__action {
@@ -62,3 +64,20 @@
   @extend %break-word-hard;
   font-size: 0.9em;
 }
+.mod-timeline__event:has(.mod-timeline__event__action--modMessage),
+.mod-timeline__event:has(.mod-timeline__event__action--sentence) {
+  padding: 0.5em 1em;
+  border-left: 4px solid $c-brag;
+  margin-left: -4px;
+  background: $c-bg-zebra2;
+  .mod-timeline__event__flair {
+    padding: 0;
+    img {
+      width: 2em;
+      height: 2em;
+    }
+  }
+  .mod-timeline__event__action {
+    font-weight: bold;
+  }
+}