[wp-meta] [Making WordPress.org] #2147: Support Theme needs styling for badges

[Making WordPress.org]

#2147: Support Theme needs styling for badges
-----------------------------------------+------------------
 Reporter:  SergeyBiryukov               |       Owner:
     Type:  defect                       |      Status:  new
 Priority:  normal                       |   Milestone:
Component:  Support Forums               |  Resolution:
 Keywords:  ui-feedback has-screenshots  |
-----------------------------------------+------------------

Comment (by mapk):

 Replying to [comment:5 SergeyBiryukov]:
 > [attachment:meta-2147.left-badge.png] was my initial attempt as well,
 but I thought it doesn't look good, because there's no space between the
 border and Gravatar. Adding some space would help, but it would also break
 left alignment for non-moderator posts.
 >
 > @mapk: What would you prefer here?

 I like the direction. Thanks for picking this up!  What if we adjusted the
 CSS so it's a `box-shadow` instead of a `border-left`? Something like
 this:

 {{{
 .by-moderator {
     box-shadow: -4px 0 0 white, -6px 0 0 #33B4CE;
 }
 }}}

 and

 {{{
 .by-moderator .author-badge-moderator {
     position: absolute;
     top: 14px;
     left: -6px;
     padding: 2px 5px;
     background: #33B4CE;
     color: white;
     font-size: 0.6rem;
     letter-spacing: 1px;
     border-radius: 0 2px 2px 0;
 }
 }}}

 The double box-shadow values help push the blue border/shadow away from
 the avatar. Let me know what you think? Are there other tags that we
 should also consider? Maybe we can come up with a color scheme for them?

 [[Image(https://cldup.com/YyOUSJc34f.png)]]

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/2147#comment:7>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org