amp-story-vertical.css

/**
 * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS-IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Vertical scrolling rendering, so the pages are visible to search engine
 * indexing tools, and not stacked on top of each other.
 */

amp-story[standalone][i-amphtml-vertical] {
  height: auto !important;
  contain: initial !important;
}

/* Overrides publishers custom CSS animations, if any. */
[i-amphtml-vertical] * {
  transition-delay: 0s !important;
  transition-duration: 0s !important;
}

[i-amphtml-vertical] amp-story-page {
  position: relative !important;
  /* iPhone 6/7/8 ratio. */
  height: 178vw !important;
  contain: initial !important;
  overflow: visible !important;
}

/* Increase CSS specifity. */
amp-story[i-amphtml-vertical].i-amphtml-element amp-story-page.i-amphtml-element {
  transform: none !important;
}

[i-amphtml-vertical] .i-amphtml-story-draggable-drawer-container[hidden] .i-amphtml-story-draggable-drawer-content {
  opacity: 1 !important;
}

[i-amphtml-vertical] .i-amphtml-story-draggable-drawer-container[hidden] .i-amphtml-story-draggable-drawer-content > * {
  display: block !important;
}

[i-amphtml-vertical] amp-story-bookend,
[i-amphtml-vertical] amp-story-page-attachment {
  display: block !important;
  position: relative !important;
  height: 178vw !important;
  transform: none !important;
}

[i-amphtml-vertical].i-amphtml-story-bookend-active amp-story-page[active]::after {
  content: none !important;
}

[i-amphtml-vertical] .i-amphtml-story-page-description {
  background: white !important;
  color: black !important;
  display: block !important;
  font-size: 0.8rem !important;
  padding: 32px !important;
  width: auto !important;
  z-index: 9999999 !important;
}