ampshared.css

/**
 * Copyright 2019 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.
 */

/**
 * We intentionally break with HTML5's default [hidden] styling to apply
 * !important.
 */
[hidden] {
  /* This must be !important, else the toggle helper system would break down
     due to specificity */
  display: none !important;
}

.i-amphtml-element {
  display: inline-block;
}

.i-amphtml-blurry-placeholder {
  transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
}

/* layout=nodisplay are automatically hidden until JS initializes. */
[layout=nodisplay]:not(.i-amphtml-element) {
  display: none !important;
}

/* Initialized layout=nodisplay contain [hidden] */
.i-amphtml-layout-nodisplay[hidden],
[layout=nodisplay][hidden]:not(.i-amphtml-layout-nodisplay)
{
  /* Display is set/reset via the hidden attribute */
}
.i-amphtml-layout-nodisplay:not([hidden]),
[layout=nodisplay]:not(.i-amphtml-layout-nodisplay[hidden])
{
  /* Display is set/reset via the hidden attribute */
}

.i-amphtml-layout-fixed,
[layout=fixed][width][height]:not(.i-amphtml-layout-fixed)
{
  display: inline-block;
  position: relative;
}

.i-amphtml-layout-responsive,
[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),
[width][height][sizes]:not(.i-amphtml-layout-responsive)
{
  display: block;
  position: relative;
}

.i-amphtml-layout-intrinsic
{
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.i-amphtml-intrinsic-sizer {
  max-width: 100%;
  display: block !important;
}

.i-amphtml-layout-fixed-height,
[layout=fixed-height][height]
{
  display: block;
  position: relative;
}

.i-amphtml-layout-container,
[layout=container]
{
  display: block;
  position: relative;
}

.i-amphtml-layout-fill,
[layout=fill]:not(.i-amphtml-layout-fill)
{
  display: block;
  overflow: hidden !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.i-amphtml-layout-flex-item,
[layout=flex-item]:not(.i-amphtml-layout-flex-item)
{
  display: block;
  position: relative;
  flex: 1 1 auto;
}

.i-amphtml-layout-fluid {
  position: relative;
}

.i-amphtml-layout-size-defined {
  overflow: hidden !important;
}

.i-amphtml-layout-awaiting-size {
  position: absolute !important;
  top: auto !important;
  bottom: auto !important;
}

i-amphtml-sizer {
  display: block !important;
}

.i-amphtml-fill-content,
.i-amphtml-blurry-placeholder {
  display: block;
  /* These lines are a work around to this issue in iOS:     */
  /* https://bugs.webkit.org/show_bug.cgi?id=155198          */
  /* And: https://github.com/ampproject/amphtml/issues/11133 */
  height: 0;
  max-height: 100%;
  max-width: 100%;
  min-height: 100%;
  min-width: 100%;
  width: 0;
  margin: auto;
}

.i-amphtml-layout-size-defined .i-amphtml-fill-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.i-amphtml-layout-intrinsic .i-amphtml-sizer {
  max-width: 100%;
}

.i-amphtml-replaced-content {
  padding: 0 !important;
  border: none !important;
  /* TODO(dvoytenko): explore adding here object-fit. */
}

/**
 * Makes elements visually invisible but still accessible to screen-readers.
 *
 * This Css has been carefully tested to ensure screen-readers can read and
 * activate (in case of links and buttons) the elements with this class. Please
 * use caution when changing anything, even seemingly safe ones. For example
 * changing width from 1 to 0 would prevent TalkBack from activating (clicking)
 * buttons despite TalkBack reading them just fine. This is because
 * element needs to have a defined size and be on viewport otherwise TalkBack
 * does not allow activation of buttons.
 */
.i-amphtml-screen-reader {
  position: fixed !important;
  /* keep it on viewport */
  top: 0px !important;
  left: 0px !important;
  /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
     before allowing buttons to be activated. */
  width: 4px !important;
  height: 4px !important;
  /* visually hide it with overflow and opacity */
  opacity: 0 !important;
  overflow: hidden !important;
  /* remove any margin or padding */
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* ensure no other style sets display to none */
  display: block !important;
  visibility: visible !important;
}

.i-amphtml-screen-reader ~ .i-amphtml-screen-reader {
  left: 8px !important;
}
.i-amphtml-screen-reader ~ .i-amphtml-screen-reader ~ .i-amphtml-screen-reader {
  left: 12px !important;
}
.i-amphtml-screen-reader ~ .i-amphtml-screen-reader ~ .i-amphtml-screen-reader ~ .i-amphtml-screen-reader {
  left: 16px !important;
}

/* For author styling. */
.amp-unresolved {
}

.i-amphtml-unresolved {
  position: relative;
  overflow: hidden !important;
}

.i-amphtml-select-disabled {
  user-select: none !important;
}

/* "notbuild" classes are set as soon as an element is created and removed
   as soon as the element is built. */

.amp-notbuilt {
  /* For author styling. */
}

.i-amphtml-notbuilt,
[layout]:not(.i-amphtml-element)
{
  position: relative;
  overflow: hidden !important;
  color: transparent !important;
}

.i-amphtml-notbuilt:not(.i-amphtml-layout-container) > * ,
[layout]:not([layout=container]):not(.i-amphtml-element) > *
{
  display: none;
}

.i-amphtml-ghost {
  visibility: hidden !important;
}

.i-amphtml-layout {
  /* Just state. */
}

.i-amphtml-error {
  /* Just state. */
}

.i-amphtml-element > [placeholder],
[layout]:not(.i-amphtml-element) > [placeholder] {
  display: block;
}

.i-amphtml-element > [placeholder].hidden,
.i-amphtml-element > [placeholder].amp-hidden {
  visibility: hidden;
}
/* Placeholder, by design, expands layout=container unlike other layouts where
   it is position:absolute and overlays the layout box.
   However, when it goes away it should no longer expand the parent, so instead
   of visibility:hidden it must be display:none */
.i-amphtml-layout-container > [placeholder].hidden,
.i-amphtml-layout-container > [placeholder].amp-hidden {
  display: none;
}

.i-amphtml-element:not(.amp-notsupported) > [fallback] {
  display: none;
}

.i-amphtml-layout-size-defined > [placeholder],
.i-amphtml-layout-size-defined > [fallback] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1;
}

.i-amphtml-notbuilt > [placeholder] {
  display: block !important;
}

.i-amphtml-hidden-by-media-query {
  display: none !important;
}

.i-amphtml-element-error {
  background: red !important;
  color: white !important;
  position: relative !important;
}

.i-amphtml-element-error::before {
  content: attr(error-message);
}

/**
 * Wraps an element to make the contents scrollable. This is
 * used to wrap iframes which in iOS always behave as if they had the
 * seamless attribute.
 * TODO(dvoytenko, #8464): cleanup old `i-amp-scroll-container`.
 */
i-amphtml-scroll-container, i-amp-scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

/**
 * Overflow:auto will be set with delay due to iOS bug where iframe is not
 * rendered.
 * TODO(dvoytenko, #8464): cleanup old `i-amp-scroll-container`.
 */
i-amphtml-scroll-container.amp-active, i-amp-scroll-container.amp-active {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.i-amphtml-loading-container {
  display: block !important;
  pointer-events: none;
  z-index: 1;
}

.i-amphtml-notbuilt > .i-amphtml-loading-container {
  display: block !important;
}

.i-amphtml-loading-container.amp-hidden {
  visibility: hidden;
}

/**
 * "overflow" element is an element shown when more content is available but
 * not currently visible. Typically tapping on this element shows the full
 * content.
 */
.i-amphtml-element > [overflow] {
  cursor: pointer;
  /* position:relative is critical to ensure that [overflow] is displayed
     above an iframe; z-index is not enough. */
  position: relative;
  z-index: 2;
  visibility: hidden;
}

.i-amphtml-element > [overflow].amp-visible {
  visibility: visible;
}

/* Polyfill for IE and any other browser that don't understand templates. */
template {
  display: none !important;
}

/**
 * Authors can set this class on their html tags to provide `border-box` box-sizing
 * to every element in their document. Individual elements can override as necessary.
 */
.amp-border-box,
.amp-border-box *,
.amp-border-box *:before,
.amp-border-box *:after {
  box-sizing: border-box;
}

/* amp-pixel is always non-displayed. */
amp-pixel {
  display: none !important;
}

/**
 * Analytics & amp-story-auto-ads tags should never be visible. keep them hidden.
 */
amp-analytics, amp-story-auto-ads {
  /* Fixed to make position independent of page other elements. */
  position: fixed !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  visibility: hidden;
}

html.i-amphtml-fie > amp-analytics {
  /* Remove position fixed if it's in iframe.
  * So runtime can measure layoutBox correctly
  */
  position: initial !important;
}


/**
 * Forms error/success messaging containers should be hidden at first.
 */
form [submitting],
form [submit-success],
form [submit-error] {
  display: none;
}

/**
 * amp-list error messaging container should be hidden at first.
 */
amp-list [fetch-error] {
  display: none;
}

/**
 * Form validation error messages should be hidden at first.
 */
[visible-when-invalid]:not(.visible) {
  display: none;
}

/**
 * amp-accordion to avoid FOUC.
 */

/* Non-overridable properties */
amp-accordion {
  display: block !important;
}

/* Make sections non-floatable */
amp-accordion > section {
  float: none !important;
}

/*  Display the first 2 elements (heading and content) */
amp-accordion > section > * {
  float: none !important;
  display: block !important;
  overflow: hidden !important; /* clearfix */
  position: relative !important;
}

amp-accordion,
amp-accordion > section {
  margin: 0;
}

/* Collapse content by default. */
amp-accordion > section > :last-child {
  display: none !important;
}

/* Expand content when needed. */
amp-accordion > section[expanded] > :last-child {
  display: block !important;
}