stream/story.yml

stream-story(uistory)

A story in a stream, such as news feed, of list stream, and so on.

Notes about separator: There are two types of separators (the horizontal rule line that separates a story from another):

• stream-story--separator - use border-color to theme
• stream-story--separator-bg - use background to theme

Selectors:

• .uiStreamStory

stream-story(uistory)--highlighted

A highlighted story. For example, when clicking on a notification for a post in a group, the user is taken to that post. That post is highlighted briefly in yellow.

Selectors:

• .uiStreamStory[style^='background-color']

stream-story(uistory)--comment-button

The comment button in a post. Because it is a button and not a link, it needs special treatment here...

Selectors:

• .uiLinkButton.comment_link input

stream-story(uistory)--headline

The headline of an item in the news feed, usually they contain the author of the post and some descriptive items.

Selectors:

• h5.uiStreamHeadline

stream-story(uistory)--headline--author(active)

The main author of the news feed post, when they are standalone.

Selectors:

• h5.uiStreamHeadline .actorName a

stream-story(uistory)--headline--author(passive)

The main author of the news feed post, when they appear along with other text.

Selectors:

• h5.uiStreamHeadline a.passiveName

stream-story(uistory)--body

The message body.

Selectors:

• .uiStreamMessage .messageBody

stream-story(uistory)--separator

The separator line in stories in stream pages, such as between the [name] liked this. and the actual story that's being liked.

Selectors:

• ._5mxv

stream-story(uistory)--separator-bg

The separator line between the subject an object.

For example, in a close friends stream, you'll see when a close friend likes something. It's the line between the headline and that thing that your friend liked.

Found: Like-style post.

Selectors:

• .uiStreamEdgeStoryLine hr

stream-story(uistory)--separator(like-page-box)

When someone shares a photo of another page, sometimes a like button for that page appears. There is another separator line there.

Found: Close friend list, when a friend shared a photo of another page.

Selectors:

• .uiStreamShareLikePageBox

stream-story(uistory)--separator(pages-stream)

The separator between the title of the stream and the first post.

Found: https://www.facebook.com/pages/feed

Selectors:

• div#pagelet_home_stream

stream-story(uistory)--selected-story-indicator

The indicator at the left of the story. It will be shown when you use a keyboard to navigate facebook.

Selectors:

• .selectedStoryIndicator

stream-story(uistory)--bling-box

In a story of a friend liking another photo, the box that contains "likes count, comment count, and share count" in one single box.

Selectors:

• .UFIBlingBox
• .uiBlingBox

stream-story(2013-11-22)

Found: Discovered on the news feed on 2013-11-22.

Selectors:

• ._5srp

stream-story(2013-11-22)--headline

Selectors:

• ._5pbw

stream-story(2013-11-22)--headline--author

The main author of the news feed post.

Selectors:

• ._5pbw .fwb a

stream-story(2013-11-22)--separator

Selectors:

• ._5srp

stream-story(2013-11-22)--separator(multiple)

When multiple people shares the same link, there's another class of separator.

Selectors:

• ._5pbz
• ._4ks > li
• ._5pbv

stream-story(2013-11-23)

Selectors:

• ._5uch

stream-story(2013-11-23)--separator

Selectors:

• ._5uch

stream-story(suggested-page)

stream-story(suggested-page)--headline

Selectors:

• ._5srp ._66m

stream-story(suggested-page)--headline--author

Selectors:

• ._5srp ._66m ._706 a