List of steps to reproduce

1. Create a story using pictures that are white at the upper half of them.
2. Publish the story and view the story frames.
3. Look out for the (X) icon at the top-right of the frame and the story page numbers.

What happens?:
The white X icon and page numbers are not visible against a white background

What should have happened instead?:
There should be a border or shadow around these white components. They should be visible against a white background.

Design details

Apply overlay & shadow related changes to the following parts of Wikistories.

Text box

• Apply shadow to the text box. This would make it visible against a white background.

In class .ext-wikistories-current-frame-textbox-select-cta

Modify following properties

From

border-radius: 10px;

To

border-radius: 2px;

From

background color: #fff

To

background: linear-gradient(0deg, #FFFFFF, #FFFFFF), #FFFFFF;

Add following property

box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);

Apply overlay on story builder. This would make overlay icon visible against white background.

Overlay while creating story

In class .ext-wikistories-storybuilder-story-topbar

Modify following property

From

height: 44px;

To

height: 140px;

From

background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(255,255,255,0));

To

background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);

Apply overlay on story viewer, this would make icons and status bar visible against white background.

Overlay during story viewer

Add following code to existing story viewer code.

height: 140px; 
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);