amp-story-system-layer.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.
 */

@import './amp-story-share.css';


.i-amphtml-story-system-layer {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), transparent) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 54px !important;
  z-index: 100000 !important;
  transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  pointer-events: none !important;
  font-family: 'Roboto', sans-serif !important;
}

[desktop] .i-amphtml-story-system-layer {
  height: 96px !important;
}

.i-amphtml-story-bookend-active.i-amphtml-story-system-layer {
  opacity: 0.3 !important;
  z-index: 1 !important;
  transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important;
}

.i-amphtml-story-hidden.i-amphtml-story-system-layer {
  opacity: 0 !important;
  transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1) !important;
}

.i-amphtml-story-hidden.i-amphtml-story-system-layer * {
  pointer-events: none !important;
}

.i-amphtml-story-desktop-panels.i-amphtml-story-bookend-active.i-amphtml-story-system-layer {
  opacity: 0 !important;
}

.i-amphtml-story-system-layer-buttons,
.i-amphtml-story-system-layer-buttons-start-position {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  padding-top: 6px !important;
  box-sizing: border-box !important;
}

.i-amphtml-story-system-layer-buttons-start-position {
  position: absolute !important;
  top: 0 !important;
  justify-content: flex-start !important;
}

[desktop] .i-amphtml-story-system-layer-buttons {
  padding: 8px 4px 0 !important;
}

.i-amphtml-story-system-layer-buttons .i-amphtml-story-ui-hide-button.i-amphtml-story-button {
  display: none !important;
}

.i-amphtml-story-button {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  height: 48px !important;
  width: 48px !important;
  cursor: pointer !important;
  border: none !important;
  pointer-events: auto !important;
  /* for svg backgrounds: */
  background: center center no-repeat !important;
  background-size: 24px 24px !important;
}

[desktop] .i-amphtml-story-button {
  margin: 0 4px !important;
  background-size: 32px 32px !important;
  padding: 8px !important;
}

.i-amphtml-story-button:active {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.i-amphtml-story-progress-bar {
  border: 0 !important;
  display: flex !important;
  height: 2px !important;
  left: 0 !important;
  margin: 4px 0 0 !important;
  padding: 0 2px !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  visibility: visible !important;
  z-index: 100001 !important;
}

[ad-showing] .i-amphtml-story-progress-bar {
  visibility: hidden !important;
}

[ad-showing] .i-amphtml-story-share-control {
  display: none !important;
}

[ad-showing]:not([i-amphtml-current-page-has-audio])
.i-amphtml-story-mute-audio-control,
[ad-showing]:not([i-amphtml-current-page-has-audio])
.i-amphtml-story-unmute-audio-control {
  visibility: hidden !important;
}

.i-amphtml-story-page-progress-bar {
  background: rgba(255, 255, 255, 0.4) !important;
  border-radius: 1px !important;
  height: 100% !important;
  list-style-type: none !important;
  margin: 0 2px !important;
  overflow: hidden !important;
  width: 100% !important;
}

.i-amphtml-story-page-progress-value {
  /* Do not remove `translateZ(0)` as it prevents an iOS repaint issue. */
  background: rgba(255, 255, 255, 1) !important;
  height: 100% !important;
  width: 100% !important;
  transform: translateZ(0) scaleX(0) !important; /* 0-width by default */
  transform-origin: left !important;
}

[dir=rtl] .i-amphtml-story-page-progress-value {
  transform-origin: right !important;
}

.i-amphtml-first-page-active[info] .i-amphtml-message-container {
  /* 48px for info button, add width to padding for additional story buttons. */
  padding-right: 48px !important;
}

.i-amphtml-first-page-active[info][dir=rtl] .i-amphtml-message-container {
  /* 48px for info button, add width to padding for additional story buttons. */
  padding-right: auto !important;
  padding-left: 48px !important;
}

.i-amphtml-message-container {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  transition-property: opacity, transform !important;
  position: absolute !important;
  top: 0 !important;
  right: 48px !important;
  height: 100% !important;
  color: #fff !important;
  font-size: 16px !important;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.36) !important;
}

[dir=rtl] .i-amphtml-message-container {
  right: auto !important;
  left: 48px !important;
}

[i-amphtml-story-messagedisplay="noshow"] .i-amphtml-message-container {
  transition: opacity 0.2s cubic-bezier(0.4, 0.0, 1, 1), visibility 0.2s, transform 0.0s 0.2s !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(10px) !important;
}

[i-amphtml-story-has-new-page="noshow"] .i-amphtml-story-has-new-page-notification-container {
  transition: opacity 1.5s, visibility 1.5s !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.i-amphtml-last-page-active[i-amphtml-story-has-new-page="show"] .i-amphtml-story-has-new-page-notification-container {
  transition: opacity 1.5s, visibility 1.5s !important;
  opacity: 1 !important;
  visibility: visible !important;
}

[dir=rtl][i-amphtml-story-messagedisplay="noshow"] .i-amphtml-message-container {
  transform: translateX(-10px) !important;
}

[i-amphtml-story-messagedisplay="show"] .i-amphtml-message-container {
  transition: opacity 0.2s cubic-bezier(0.0, 0.0, 0.2, 1), visibility 0.2s, transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0px) !important;
}

.i-amphtml-story-mute-text,
.i-amphtml-story-unmute-sound-text,
.i-amphtml-story-unmute-no-sound-text {
  width: max-content !important;
  color: #fff !important;
}

.i-amphtml-story-sound-display {
  display: inline-block !important;
  height: 46px !important;
  position: relative !important;
}

.i-amphtml-story-no-audio-ui .i-amphtml-story-sound-display {
  display: none !important;
}

.i-amphtml-story-mute-audio-control,
.i-amphtml-story-unmute-audio-control,
.i-amphtml-paused-display,
.i-amphtml-story-pause-control,
.i-amphtml-story-play-control,
.i-amphtml-story-mute-text,
.i-amphtml-story-unmute-sound-text,
.i-amphtml-story-unmute-no-sound-text,
.i-amphtml-story-sidebar-control,
.i-amphtml-story-skip-next  {
  display: none !important;
}

[i-amphtml-story-has-sidebar] .i-amphtml-story-sidebar-control {
  display: block !important;
}

.i-amphtml-story-has-audio:not([muted]) .i-amphtml-story-mute-audio-control,
.i-amphtml-story-has-audio[muted] .i-amphtml-story-unmute-audio-control {
  display: block !important;
}

[desktop] .i-amphtml-paused-display {
  display: block !important;
}

.i-amphtml-story-system-layer-buttons button[disabled] {
  opacity: 0.3 !important;
  cursor: initial !important;
}

.i-amphtml-story-has-playback-ui:not([paused]) .i-amphtml-story-pause-control,
.i-amphtml-story-has-playback-ui[paused] .i-amphtml-story-play-control {
  display: block !important;
}

.i-amphtml-story-has-audio[muted] .i-amphtml-story-mute-text,
[i-amphtml-current-page-has-audio].i-amphtml-story-has-audio:not([muted]) .i-amphtml-story-unmute-sound-text,
:not([i-amphtml-current-page-has-audio]).i-amphtml-story-has-audio:not([muted]) .i-amphtml-story-unmute-no-sound-text {
  display: block !important;
}

.i-amphtml-story-ui-no-buttons .i-amphtml-story-button,
.i-amphtml-story-ui-no-buttons .i-amphtml-story-system-layer-buttons {
  visibility: hidden !important;
}

.i-amphtml-story-unmute-audio-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M5.19944 4L4 5.19944L8.46722 9.66667H4V15.3333H7.77778L12.5 20.0556V13.6994L16.5139 17.7133C15.8811 18.2044 15.1728 18.5917 14.3889 18.8278V20.7733C15.6922 20.4806 16.8728 19.8761 17.8739 19.0639L19.8006 21L21 19.8006L12.5 11.3006L5.19944 4ZM18.6011 14.9933C18.9222 14.2189 19.1111 13.3878 19.1111 12.5C19.1111 9.50611 17.1183 6.975 14.3889 6.16278V4.21722C18.1761 5.07667 21 8.45778 21 12.5C21 13.9167 20.6506 15.2483 20.0272 16.4194L18.6011 14.9933ZM14.3889 8.69389C15.7867 9.39278 16.75 10.8283 16.75 12.5C16.75 12.7078 16.7311 12.9061 16.7028 13.095L14.3889 10.7811V8.69389ZM10.5261 6.91833L12.5 4.94444V8.89222L10.5261 6.91833Z"/></svg>') !important;
}

[desktop] .i-amphtml-story-unmute-audio-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M7.4,6L6,7.4l5.3,5.3H6v6.7h4.4l5.6,5.6v-7.5l4.7,4.7c-0.7,0.6-1.6,1-2.5,1.3v2.3c1.5-0.3,2.9-1.1,4.1-2l2.3,2.3l1.4-1.4l-10-10L7.4,6z M23.2,18.9c0.4-0.9,0.6-1.9,0.6-2.9c0-3.5-2.3-6.5-5.6-7.5V6.3c4.5,1,7.8,5,7.8,9.7c0,1.7-0.4,3.2-1.1,4.6L23.2,18.9z M18.2,11.5C19.9,12.3,21,14,21,16c0,0.2,0,0.5-0.1,0.7L18.2,14V11.5z M13.7,9.4L16,7.1v4.6L13.7,9.4z"/></svg>') !important;
}

.i-amphtml-story-mute-audio-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M4 9.5924V15.4077H7.77778L12.5 20.2537V4.74634L7.77778 9.5924H4Z"/><path d="M16.7498 12.4999C16.7498 10.7844 15.7864 9.31121 14.3887 8.59399V16.3962C15.7864 15.6886 16.7498 14.2154 16.7498 12.4999Z" /><path d="M14.3887 4V5.99658C17.1181 6.8301 19.1109 9.42759 19.1109 12.5C19.1109 15.5724 17.1181 18.1699 14.3887 19.0034V21C18.1759 20.118 20.9998 16.6482 20.9998 12.5C20.9998 8.35177 18.1759 4.88198 14.3887 4Z"/></svg>') !important;
}

[desktop] .i-amphtml-story-mute-audio-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M10.4,12.6L16,6.9v18.2l-5.6-5.7H6v-6.8H10.4z M21,16c0-2-1.1-3.8-2.8-4.6v9.2C19.9,19.8,21,18,21,16z M18.2,6v2.3c3.2,1,5.6,4,5.6,7.7c0,3.6-2.3,6.7-5.6,7.7V26c4.5-1,7.8-5.1,7.8-10C26,11.1,22.7,7,18.2,6z"/></svg>') !important;
}

.i-amphtml-story-pause-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M13.3,25.3H8V6.7h5.3V25.3z M18.7,25.3V6.7H24v18.7H18.7z"/></svg>') !important;
}

.i-amphtml-story-play-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M23.5211 16.335L9 25.67V7L23.5211 16.335Z"/></svg>') !important;
}

.i-amphtml-story-sidebar-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
}

.i-amphtml-story-share-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M15.6392 16.4092C16.125 15.9509 16.7758 15.6667 17.5 15.6667C19.0217 15.6667 20.25 16.895 20.25 18.4167C20.25 19.9384 19.0217 21.1667 17.5 21.1667C15.9783 21.1667 14.75 19.9384 14.75 18.4167C14.75 18.1967 14.7867 17.9859 14.8325 17.7842L8.37 14.0075C7.875 14.4659 7.22417 14.75 6.5 14.75C4.97833 14.75 3.75 13.5217 3.75 12C3.75 10.4784 4.97833 9.25004 6.5 9.25004C7.22417 9.25004 7.875 9.53421 8.37 9.99254L14.8325 6.22504C14.7867 6.02337 14.75 5.80337 14.75 5.58337C14.75 4.06171 15.9783 2.83337 17.5 2.83337C19.0217 2.83337 20.25 4.06171 20.25 5.58337C20.25 7.10504 19.0217 8.33337 17.5 8.33337C16.7758 8.33337 16.1158 8.04921 15.63 7.59087L9.1675 11.3584C9.21333 11.5692 9.25 11.78 9.25 12C9.25 12.22 9.21333 12.4309 9.1675 12.6417L15.6392 16.4092ZM18.4167 5.58337C18.4167 5.07921 18.0042 4.66671 17.5 4.66671C16.9958 4.66671 16.5833 5.07921 16.5833 5.58337C16.5833 6.08754 16.9958 6.50004 17.5 6.50004C18.0042 6.50004 18.4167 6.08754 18.4167 5.58337ZM6.5 12.9167C5.99583 12.9167 5.58333 12.5042 5.58333 12C5.58333 11.4959 5.99583 11.0834 6.5 11.0834C7.00417 11.0834 7.41667 11.4959 7.41667 12C7.41667 12.5042 7.00417 12.9167 6.5 12.9167ZM16.5833 18.4167C16.5833 18.9209 16.9958 19.3334 17.5 19.3334C18.0042 19.3334 18.4167 18.9209 18.4167 18.4167C18.4167 17.9125 18.0042 17.5 17.5 17.5C16.9958 17.5 16.5833 17.9125 16.5833 18.4167Z" fill-rule="evenodd"/></svg>') !important;
}

[desktop] .i-amphtml-story-share-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M20,20.8c0.5-0.5,1.2-0.8,2-0.8c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3c0-0.2,0-0.5,0.1-0.7l-7-4.1c-0.5,0.5-1.2,0.8-2,0.8c-1.7,0-3-1.3-3-3s1.3-3,3-3c0.8,0,1.5,0.3,2,0.8l7-4.1C19,9.5,19,9.2,19,9c0-1.7,1.3-3,3-3s3,1.3,3,3s-1.3,3-3,3c-0.8,0-1.5-0.3-2-0.8l-7,4.1c0,0.2,0.1,0.5,0.1,0.7s0,0.5-0.1,0.7L20,20.8z M23,9c0-0.5-0.5-1-1-1s-1,0.5-1,1s0.5,1,1,1S23,9.5,23,9z M10,17c-0.5,0-1-0.5-1-1s0.5-1,1-1s1,0.5,1,1S10.5,17,10,17z M21,23c0,0.5,0.5,1,1,1s1-0.5,1-1s-0.5-1-1-1S21,22.5,21,23z" fill-rule="evenodd"/></svg>') !important;
}

[ios] .i-amphtml-story-share-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path fill="white" d="M15.6665 4.58329L14.3648 5.88496L12.9073 4.42746V14.6666H11.0923V4.42746L9.63484 5.88496L8.33317 4.58329L11.9998 0.916626L15.6665 4.58329ZM19.3332 9.16663V19.25C19.3332 20.2583 18.5082 21.0833 17.4998 21.0833H6.49984C5.48234 21.0833 4.6665 20.2583 4.6665 19.25V9.16663C4.6665 8.14913 5.48234 7.33329 6.49984 7.33329H9.24984V9.16663H6.49984V19.25H17.4998V9.16663H14.7498V7.33329H17.4998C18.5082 7.33329 19.3332 8.14913 19.3332 9.16663Z"/></svg>') !important;
  background-size: auto !important;
}

.i-amphtml-story-info-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M11.1,7.3h1.9v1.9h-1.9V7.3z M11.1,11.1h1.9v5.7h-1.9V11.1z M12,2.5c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S17.2,2.5,12,2.5z M12,19.6c-4.2,0-7.6-3.4-7.6-7.6S7.8,4.4,12,4.4s7.6,3.4,7.6,7.6S16.2,19.6,12,19.6z"/></svg>') !important;
  display: none !important;
  background-size: auto !important;
}

.i-amphtml-story-close-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/></svg>') !important;
}

[desktop] .i-amphtml-story-close-control {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M25.3332 8.54663L23.4532 6.66663L15.9998 14.12L8.5465 6.66663L6.6665 8.54663L14.1198 16L6.6665 23.4533L8.5465 25.3333L15.9998 17.88L23.4532 25.3333L25.3332 23.4533L17.8798 16L25.3332 8.54663Z"/></svg>') !important;
}

.i-amphtml-story-skip-next {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M19.3333 16L8 24V8L19.3333 16ZM24 24H21.3333V8H24V24Z"/></svg>') !important;
}

[desktop] .i-amphtml-story-skip-next {
  display: block !important;
}

.i-amphtml-story-has-new-page-notification-container {
  display: flex !important;
  position: absolute !important;
  justify-content: center !important;
  z-index: 100002 !important; /* On top of the progress bar. */
  top: 32px !important;
  right: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
}

.i-amphtml-story-has-new-page-text-wrapper {
  background-color: rgba(32, 33, 37, 0.8) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 4px 10px 4px 0 !important;
  border-radius: 5px !important;
}

[dir=rtl] .i-amphtml-story-has-new-page-text-wrapper {
  padding-right: 0 !important;
  padding-left: 10px !important;
}

.i-amphtml-story-has-new-page-text {
  color: #fff !important;
  font-size: 16px !important;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.36) !important;
  font-weight: 700 !important;
}

.i-amphtml-story-has-new-page-circle-icon {
  background: rgba(3, 255, 160, 1) !important;
  border-radius: 50% !important;
  height: 6px !important;
  width: 6px !important;
  position: relative !important;
  box-shadow: 0 0 0 2px rgba(3, 255, 160, 0.5) !important;
  margin: 0px 10px !important;
}

.i-amphtml-story-desktop-panels .i-amphtml-story-has-new-page-notification-container {
  top: 0 !important;
}

.i-amphtml-embedded.i-amphtml-first-page-active .i-amphtml-story-info-control {
  display: block !important;
}

.i-amphtml-story-no-sharing .i-amphtml-story-share-control,
.i-amphtml-story-no-sharing .i-amphtml-story-info-control {
  display: none !important;
}

.i-amphtml-story-desktop-panels.i-amphtml-story-system-layer {
  background: transparent !important;
  top: auto !important;
  bottom: 0 !important;
  height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row-reverse !important;
}

.i-amphtml-animate-progress li {
  transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.i-amphtml-progress-bar-overflow.i-amphtml-story-progress-bar {
  width: calc(100% - 4px) !important;
  margin: 4px 2px 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.i-amphtml-story-desktop-panels .i-amphtml-story-progress-bar {
  position: relative !important;
  height: 3px !important;
  width: calc(100vw / 3) !important;
  margin: 0 24px !important;
}

.i-amphtml-story-desktop-fullbleed .i-amphtml-story-progress-bar {
  height: 3px !important;
}

.i-amphtml-story-desktop-panels .i-amphtml-story-page-progress-bar {
  border-radius: 100px !important;
}

.i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar {
  border-radius: 0px !important;
  list-style: none !important;
  margin: 0 2px !important;
  width: 2px !important;
  position: absolute !important;
  transform-origin: left !important;
}

[dir=rtl].i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar {
  transform-origin: right !important;
}

[desktop] .i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar {
  width: 3px !important;
}

.i-amphtml-story-desktop-panels.i-amphtml-story-system-layer .i-amphtml-story-system-layer-buttons,
.i-amphtml-story-desktop-panels.i-amphtml-story-system-layer .i-amphtml-story-system-layer-buttons-start-position
 {
  position: fixed !important;
  top: 0 !important;
  width: 100vw !important;
}