User:SBisson (WMF)/storification.css

.storyview-story { display: inline-block; position: relative; width: 300px; height: 300px; margin: 4px; }

.storyview-story-selected { display: block; margin: auto; width: 800px; height: 800px; }

.storyview-story-selected > .storyview-story-frame { background-blend-mode: normal; }

.storyview-story-frame { position: relative; display: none; width: 100%; height: 100%; border-radius: 10px; background-size: cover; background-position: center; cursor: pointer; background-color: #34333396; background-blend-mode: soft-light; }

.storyview-story:hover > .storyview-story-frame { background-blend-mode: normal; }

.storyview-story-frame-text { position: absolute; bottom: 40px; left: 10px; right: 10px; text-align: center; background-color: #616161; color: white; border-radius: 10px; font-size: 14px; padding: 2px; max-height: 60%; overflow: scroll; }

.storyview-story-frame:nth-of-type( 1 ) .storyview-story-frame-text { font-size: 24px; }

.storyview-story-frame.storyview-story-frame-current { display: block; }

.storyview-story-tools { display: none; position: absolute; bottom: 10px; right: 10px; height: 22px; }

.storyview-story:hover .storyview-story-tools { display: block; }

.storyview-story-tools > span { display: inline-block; width: 18px; height: 18px; margin: 4px 2px; background-color: white; border-radius: 10px; font-weight: bold; font-size: 16px; line-height: 16px; text-align: center; cursor: pointer; }

/* --- mobile --- */

.skin-minerva .storyview-story.storyview-story-selected { display: block; position: fixed; top: 0; bottom: 0; right: 0; left: 0; height: 100vh; width: 100vw; overflow: scroll; z-index: 99; background-size: cover; background-position: center; background-color: unset; }

.skin-minerva .storyview-story.storyview-story-selected .storyview-story-tools { display: none !important; }

.skin-minerva .storyview-story.storyview-story-selected p { top: 10px; left: 10px; right: unset; bottom: unset; background-color: unset; font-size: 36px; border-radius: 0; text-align: left; letter-spacing: 3px; max-height: 100%; overflow: hidden; }

.skin-minerva .storyview-story.storyview-story-selected p span { background-color: teal; color: pink; }

.skin-minerva .storyview-story.storyview-story-selected .storyview-story-frame { background-color: unset; display: block; background-size: 0; }