extensions/amp-subscriptions/0.1/amp-subscriptions.css - main - githubmirror/amphtml

extensions/amp-subscriptions/0.1/amp-subscriptions.css
131 строка3 KB
Kristofer Baxter
♻️ Remove Notice from JS and Markdown (#35717)
19 авг 2021, 21:21
19 авг 2021, 21:21f564b7e



/**
 * Loading indicator.
 * Hide when `i-amphtml-subs-loading` class is not set.
 */
body:not(.i-amphtml-subs-loading) [subscriptions-section="loading"] {
  display: none !important;
}


/**
 * Content section.
 * Hide when not known or denied.
 */
body:not(.i-amphtml-subs-grant-yes) [subscriptions-section="content"] {
  display: none !important;
}


/**
 * Content-not-granted section.
 * Hide when not known or granted.
 */
body:not(.i-amphtml-subs-grant-no) [subscriptions-section="content-not-granted"] {
  display: none !important;
}


/**
 * Actions sections.
 * Hide when not known or delegated.
 */
body.i-amphtml-subs-grant-unk [subscriptions-section="actions"],
body.i-amphtml-subs-delegated [subscriptions-section="actions"] {
  display: none !important;
}


/**
 * Actions.
 */

/** Hide actions until state is known. */
body.i-amphtml-subs-grant-unk [subscriptions-action] {
  display: none !important;
}

[subscriptions-actions]:not(.i-amphtml-subs-display),
[subscriptions-section="actions"]:not(.i-amphtml-subs-display),
[subscriptions-action]:not(.i-amphtml-subs-display) {
  display: none !important;
}

/** Dialog. */
amp-subscriptions-dialog {
  display: block !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  z-index: 2147483641 !important;  /* Paywall is behind iframes from swg.js */
  max-height: 90vh;
  box-sizing: border-box;
  opacity: 1;
  background-image: none;
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2);
  margin-bottom: 0;
  transition: transform 0.3s ease-in;
}

.i-amphtml-subs-dialog-close-button {
  position: absolute;
  width: 28px;
  height: 28px;
  top: -28px;
  right: 0;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="13" height="13" viewBox="341 8 13 13" xmlns="http://www.w3.org/2000/svg"><path fill="#4F4F4F" d="M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z" fill-rule="evenodd"/></svg>');
  background-size: 13px 13px;
  background-position: 9px center;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 -1px 1px 0 rgba(0,0,0, 0.2);
  border: none;
  border-radius: 12px 0 0 0;
  cursor: pointer;
}

body:not(.i-amphtml-subs-grant-yes) .i-amphtml-subs-dialog-close-button {
  display: none;
}

.i-amphtml-subs-progress {
  height: 2px;
  background-color: #ccc;
  position: relative;
  margin: 8px;
  overflow: hidden;
}

.i-amphtml-subs-progress:after {
  content: '';
  background-color: #2196F3;
  height: 2px;
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  animation: i-amphtml-subs-loading-progress 1500ms ease-in-out infinite;
}

@keyframes i-amphtml-subs-loading-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(500%);
  }
}

/**
 * The maximum width allowed for the dialog is 480 px. Default width
 * is 100% (for container width < 480 px).
 */
@media (min-width: 480px) {
  amp-subscriptions-dialog {
    width: 480px !important;
    left: -240px !important;
    margin-left: calc(100vw - 100vw / 2) !important;
  }
}