confirmationHint.css

/**
 * CSS for showing a confirmation to the user.
 *
 * Adapted from Firefox source code, see
 * https://searchfox.org/mozilla-central/source/browser/themes/shared/customizableui/panelUI.inc.css#227
 * Licensed under the Mozilla Public License, v. 2.0, see the LICENSE.md.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

.popup {
  position: absolute;
  z-index: 999;
  padding: 8px;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 2px var(--grey-50);
  /* min-width: 100px; */

  /* no mouse interaction */
  user-select: none;
  -moz-user-select: none;
  pointer-events: none;
}

#confirmation-hint {
  background-color: #0060df;
  border-color: #0060df;
  color: #fff;
}

#confirmation-hint-checkmark-animation-container {
  position: relative;
  overflow: hidden;
  width: 14px;
  height: 14px;
}

/* Don't show the checkmark if there is a description */
#confirmation-hint.with-description #confirmation-hint-checkmark-animation-container  {
  display: none;
}

#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image {
  position: absolute;
  background-image: url(./img/check-animation.svg);
  background-repeat: no-repeat;
  min-width: 266px;
  max-width: 266px;
  min-height: 14px;
  max-height: 14px;
  animation-name: confirmation-hint-checkmark-animation;
  animation-duration: 300ms;
  animation-delay: 60ms;
  animation-fill-mode: forwards;
  animation-timing-function: steps(18);
}

#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image:-moz-locale-dir(rtl) {
  animation-name: confirmation-hint-checkmark-animation-rtl;
  transform: translateX(252px);
}

@keyframes confirmation-hint-checkmark-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-252px);
  }
}

@keyframes confirmation-hint-checkmark-animation-rtl {
  from {
    transform: translateX(252px);
  }
  to {
    transform: translateX(0);
  }
}

#confirmation-hint-message {
  margin-inline-start: 7px;
  margin-inline-end: 0;

  color: #fff;
}

#confirmation-hint.with-description #confirmation-hint-message {
  font-size: 1.2em;
  font-weight: 600;
}

#confirmation-hint-message-container {
  transform: scale(.8);
  opacity: 0;
  transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18),
              opacity 60ms linear;
}

#confirmation-hint-checkmark-animation-container[animate] + #confirmation-hint-message-container {
  transform: scale(1);
  opacity: 1;
}