diff --git a/ui/mod/css/_mod-timeline.scss b/ui/mod/css/_mod-timeline.scss index 7a9fb86dfe2a..c38320af9f22 100644 --- 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; + } +}