Style system message comments

It's a bit tricky to review without the real CSS colors. A few things I noticed:

- The hover on messages causes the text to wrap to the next line.
- The message #, how relevant is that? When do you refer to a test that didn't pass?
- The actual text is a little hard to scan, both because of the gray on gray and the actual terminology used.
- We probably shouldn't be using a special font size for these messages.

1. The reason the hover timestamp is causing the text wrap is because the original design doesn't expect long messages. In fact, we should customize the commit messages accordingly (I'll create a separate issue).
2. I originally took this out, but had some blowback about the fact that a comment number "jumps". This would be evident in the above link where it would "jump" from #7 to #9.
3. The colors used for foreground and background are fine: http://leaverou.github.io/contrast-ratio/#%23666-on-%23f6f6f2
4. These messages are intended to be smaller (expect the permalink, which should match the normal comments for consistency), especially when dealing with long commit messages.

@drumm, while working on #2275317: Cleanup commit message theme hook, I noticed that there are supposed to be <pre> tags around the commit message, however they are not currently showing up anywhere. I don't see any commits that have possibly stripped them out, however I do see field-name-comment-body is setup for multiple field-items (commits). Is the field somehow stripping these out?

Actually, it just dawned on me: System Message is posting using the Filtered HTML filter (which doesn't have <pre>). I'll create an issue to resolve this as well.

Closed #2275911: Give System User its own user picture as a dupe :)

drumm closed #2276395: The System Message comments should use Druplicon as the avatar as a dupe too.

@drumm, could you add the fix for #2275363: Add <pre> to list of allowed tags in Filtered HTML to https://drumm2-drupal.redesign.devdrupal.org/node/2257197#comment-8774563 as well? Thanks!

Looks good. I have a few trivial comments that could be addressed as a follow-up (only if necessary):

1. The comment links should not exist. The will never need to be reported for spam, edited or deleted :)
2. The node changes table should probably be transparent and flushed with the message below it.

Actually, I delete system messages *all the time* in order to stay below the 300 comment threshold.
But, I could reshow that in a userstyle if its hidden with CSS.

Well, yet again, I'm not privy to such links and don't think about those kinds of things generally. Regardless it's very trivial and shouldn't block the majority of the styling that needs to make it on d.o. The issues @drumm mention should be sufficient to address them.

Noticed a couple things:

1. The new indicator needs to be aligned:
   Un-aligned:
   

   Aligned:
   

   CSS fix:

   #content .comment.system-message .new {
     margin: 5px 5px 0 -5px;
   }
   

2. The commit message is sometimes too long, it's verbiage/styling needs to change slightly. I opened: #2290033: Hovering commit system messages can sometimes causes text to wrap/jump.