amp-consent.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.
 */

/**
 * @fileoverview Styling for the amp-consent
 * component. This also has a lot of specific
 * styling for the CMP Modal. Note: this does
 * specifc percentage vs. viewport based css
 * for the heights and tranforms of the CMP modal,
 * to handle URL and Safari Navigation bar transitions.
 * Please refer to the following, before changing
 * the viewport or percentage based heights,
 * to avoid unintentionally breaking the intended
 * behavior.
 *
 * https://developers.google.com/web/updates/2016/12/url-bar-resizing
 *
 */

amp-consent {
  /* Fixed to make position independent of page other elements. */
  position: fixed !important;
  bottom: 0;
  left: 0;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .7);
  width: 100%;
  z-index: 2147483645;
}

amp-consent[i-amphtml-notbuilt] > * {
  display: none !important;
}

amp-consent > * {
  max-height: 100vh !important;
}

amp-consent.amp-active {
  visibility: visible;
}

amp-consent.amp-hidden {
  visibility: hidden;
}

@keyframes amp-consent-ui-placeholder-spin  {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.i-amphtml-consent-ui-placeholder {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.i-amphtml-consent-ui-placeholder > svg {
  width: 30px;
  height: 30px;

  fill: none;
  stroke-width: 1.5px;
  transform-origin: 50% 50%;
  animation: 1000ms amp-consent-ui-placeholder-spin linear infinite;
}

.i-amphtml-consent-alertdialog {
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
  left: -10000px;
  top: auto;
}

.i-amphtml-consent-ui-fill {
  position: absolute;
  top: 0;
  left: 0;
  /* Initial height (Default 30vh) will be set through styles */
  width: 100%;
}

iframe.i-amphtml-consent-ui-fill {
  border: none;
}

amp-consent.i-amphtml-consent-ui-iframe-active {
  width: 100% !important;
  height: 100vh !important;
  padding: 0px !important;
  margin: 0px !important;

  /**Scrolling support/UX for iOS**/
  overflow: auto !important;

  transform: translate3d(0px, 100vh, 0px) !important;
}

amp-consent.i-amphtml-consent-ui-iframe-active.i-amphtml-consent-ui-enable-border {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2) !important;
}

amp-consent.i-amphtml-consent-ui-iframe-active.i-amphtml-consent-ui-in {
  transition: transform 0.5s ease-out !important;
  /* Initial height transform will be set through styles */
}

amp-consent.i-amphtml-consent-ui-iframe-active.i-amphtml-consent-ui-in.i-amphtml-consent-ui-iframe-fullscreen {
  top: 0px !important;
  transform: translate3d(0px, 0px, 0px) !important;

  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

amp-consent.i-amphtml-consent-ui-in.i-amphtml-consent-ui-iframe-fullscreen > .i-amphtml-consent-ui-fill {
  height: 100% !important;
}

@keyframes i-amphtml-consent-ui-mask {
  0% {opacity: 0.0;}
  100% {opacity: 0.2;}
}

.i-amphtml-consent-ui-mask {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  opacity: 0.2;
  animation: i-amphtml-consent-ui-mask 0.25s ease-in;
  /* Prevent someone from making this a full-sceen image */
  background-image: none !important;
  background-color: #000;
  z-index: 2147483644;
}