@aws-amplify/ui 5.8.0 → 6.0.0

package/dist/styles/liveness.css

@@ -0,0 +1,374 @@
+.amplify-liveness-cancel-container {
+  z-index: 2;
+  position: absolute;
+  top: var(--amplify-space-medium);
+  right: var(--amplify-space-medium);
+}
+
+.amplify-liveness-cancel-button {
+  background-color: var(--amplify-colors-background-primary);
+}
+
+.amplify-liveness-fade-out {
+  animation-name: amplify-liveness-animation-fadeout;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes amplify-liveness-animation-fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.amplify-liveness-camera-module {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--amplify-components-liveness-camera-module-background-color);
+  border: 1px solid var(--amplify-colors-neutral-40);
+  position: relative;
+}
+
+.amplify-liveness-camera-module--mobile {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.amplify-liveness-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.amplify-liveness-freshness-canvas {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.amplify-liveness-loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-oval-canvas {
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.amplify-liveness-oval-canvas--mobile {
+  position: fixed;
+}
+
+.amplify-liveness-video-anchor {
+  position: relative;
+  width: 100%;
+}
+
+.amplify-liveness-recording-icon-container {
+  z-index: 1;
+  position: absolute;
+  top: var(--amplify-space-medium);
+  left: var(--amplify-space-medium);
+}
+
+.amplify-liveness-recording-icon {
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--amplify-colors-background-primary);
+  padding: var(--amplify-space-xxs);
+  gap: var(--amplify-space-xxs);
+  border-radius: var(--amplify-radii-small);
+}
+
+.amplify-liveness-instruction-overlay {
+  z-index: 1;
+}
+
+.amplify-liveness-countdown-container {
+  background-color: var(--amplify-colors-background-primary);
+  border-radius: 100%;
+  padding: var(--amplify-space-xs);
+}
+
+.amplify-liveness-instruction-list {
+  flex-direction: column;
+}
+.amplify-liveness-instruction-list li {
+  display: flex;
+}
+
+.amplify-liveness-toast {
+  background-color: var(--amplify-colors-background-primary);
+  padding: var(--amplify-space-small);
+  border-radius: var(--amplify-radii-medium);
+}
+
+.amplify-liveness-toast__message {
+  color: var(--amplify-colors-font-primary);
+  text-align: center;
+  flex-direction: column;
+}
+
+.amplify-liveness-toast--large {
+  font-size: var(--amplify-font-sizes-xl);
+}
+
+.amplify-liveness-toast--primary {
+  background-color: var(--amplify-colors-primary-80);
+}
+.amplify-liveness-toast--primary .amplify-liveness-toast__message {
+  color: var(--amplify-colors-font-inverse);
+  text-align: center;
+  flex-direction: column;
+}
+
+.amplify-liveness-toast__container {
+  gap: var(--amplify-space-xs);
+  flex-direction: column;
+  align-items: center;
+}
+
+.amplify-liveness-toast--error {
+  background-color: var(--amplify-colors-red-80);
+}
+.amplify-liveness-toast--error .amplify-liveness-toast__message {
+  color: var(--amplify-colors-font-inverse);
+}
+
+.amplify-liveness-match-indicator {
+  display: block;
+  width: min(70%, 200px);
+  position: relative;
+  --amplify-liveness-match-indicator-transition: transform 0.2s linear;
+}
+
+.amplify-liveness-match-indicator__bar {
+  --percentage: 0;
+  display: block;
+  width: 100%;
+  height: var(--amplify-space-medium);
+  border-radius: var(--amplify-radii-medium);
+  background: var(--amplify-colors-white);
+  position: relative;
+  overflow: hidden;
+  /* 
+    This translateZ transform fixes in issue in Safari where the bar::after
+    element doesn't appear clipped from overflow: hidden here */
+  transform: translateZ(0);
+  border: 1px solid var(--amplify-colors-border-tertiary);
+}
+
+.amplify-liveness-match-indicator__pin {
+  --percentage: 0;
+  display: block;
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(var(--percentage), 0);
+  transition: var(--amplify-liveness-match-indicator-transition);
+}
+
+.amplify-liveness-match-indicator__bar:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: var(--amplify-colors-primary-40);
+  left: -100%;
+  transform: translate(var(--percentage), 0);
+  transition: var(--amplify-liveness-match-indicator-transition);
+}
+
+.amplify-liveness-match-indicator__pin:after {
+  --height: var(--amplify-space-xl);
+  position: absolute;
+  content: "";
+  width: var(--amplify-space-small);
+  height: var(--height);
+  border-radius: var(--amplify-radii-medium);
+  background: var(--amplify-colors-primary-80);
+  left: 0;
+  top: 0;
+  transform: translate(-50%, calc(var(--height) / 2 * -1));
+}
+
+.amplify-liveness-figures {
+  flex-wrap: wrap;
+}
+
+.amplify-liveness-figure {
+  flex-direction: column;
+  gap: 0;
+}
+
+.amplify-liveness-figure__caption {
+  padding: var(--amplify-space-xxs);
+}
+
+.amplify-liveness-figure__caption--success {
+  background-color: var(--amplify-colors-background-success);
+  color: var(--amplify-colors-font-success);
+}
+
+.amplify-liveness-figure__caption--error {
+  background-color: var(--amplify-colors-background-error);
+  color: var(--amplify-colors-font-error);
+}
+
+.amplify-liveness-figure__image {
+  background-color: #fff;
+  border: 1px solid var(--amplify-colors-border-primary);
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+.amplify-liveness-figure__image svg {
+  display: block;
+}
+
+.amplify-liveness-figure__image--success {
+  border-color: var(--amplify-colors-green-90);
+}
+
+.amplify-liveness-figure__image--error {
+  border-color: var(--amplify-colors-border-error);
+}
+
+.amplify-liveness-figure__icon {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.amplify-liveness-landscape-error-modal {
+  background-color: var(--amplify-colors-background-primary);
+  direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.amplify-liveness-landscape-error-modal__header {
+  font-size: large;
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-landscape-error-modal__button {
+  justify-content: center;
+}
+
+.amplify-liveness-start-screen-header {
+  display: flex;
+  flex-direction: column;
+}
+
+.amplify-liveness-start-screen-header__heading {
+  color: var(--amplify-colors-font-primary);
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-start-screen-header__body {
+  color: var(--amplify-colors-font-primary);
+}
+
+.amplify-liveness-start-screen-warning {
+  color: var(--amplify-colors-orange-80);
+  background-color: var(--amplify-colors-orange-20);
+  align-items: center;
+}
+
+.amplify-liveness-start-screen-instructions__heading {
+  color: var(--amplify-colors-font-primary);
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-overlay-opaque {
+  background-color: var(--amplify-colors-overlay-40);
+}
+
+.amplify-liveness-overlay {
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: var(--amplify-space-xl);
+}
+
+.amplify-liveness-error-modal {
+  gap: var(--amplify-space-xs);
+  align-items: center;
+  justify-content: center;
+  color: var(--amplify-colors-font-error);
+}
+
+.amplify-liveness-error-modal__heading {
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-hint__text {
+  align-items: center;
+  gap: var(--amplify-space-xs);
+}
+
+.amplify-liveness-popover {
+  position: relative;
+  cursor: pointer;
+}
+
+.amplify-liveness-popover__anchor {
+  position: absolute;
+  top: 26px;
+  left: 3px;
+  z-index: 3;
+  border-style: solid;
+  border-width: 0 9px 9px 9px;
+  border-color: transparent transparent var(--amplify-colors-background-primary) transparent;
+}
+
+.amplify-liveness-popover__anchor-secondary {
+  position: absolute;
+  top: 24px;
+  left: 2px;
+  z-index: 2;
+  border-style: solid;
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent var(--amplify-colors-border-secondary) transparent;
+}
+
+.amplify-liveness-popover__container {
+  position: absolute;
+  background-color: var(--amplify-colors-background-primary);
+  color: var(--amplify-colors-font-primary);
+  flex-direction: row;
+  font-size: var(--amplify-font-sizes-xs);
+  padding: var(--amplify-space-small);
+  top: 33px;
+  width: 240px;
+  border: 1px solid var(--amplify-colors-border-secondary);
+  border-radius: 2px;
+}