main.css

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hide the list while printing so it never covers anything up. */
@media print {
  #wishlist-total {
    display: none;
  }
}

/* Used when the total is loading to prevent a jarring "pop" when it appears. */
.animation-fade-in {
  animation: fade-in 150ms;
}

#wishlist-total {
  position: fixed;
  bottom: 36px;
  left: 36px;

  float: left;

  /* Make sure it's above most things, but _below_ the backdrops. */
  z-index: 1000;

  padding: 18px 27px;

  font-size: 14px;
  background-color: white;
  border: 1px solid #dddddd;
}

/* Only display the spinner while the result is actually loading. */
#wishlist-total         .spinner { display: none; }
#wishlist-total.loading .spinner { display: inline-block; }

/* The loading spinner displayed until all list items have been loaded. */
.spinner {
  display: inline-block;

  width: 1.2em;
  height: 1.2em;

  vertical-align: text-bottom;
  margin-left: 0.25em;
}

/* Reduce padding when somewhat narrow. */
@media (max-width: 1024px) {
  #wishlist-total {
    bottom: 10px;
    left: 10px;
  }
}

/* Take up the entire bottom of the screen when very narrow. */
@media (max-width: 400px) {
  #wishlist-total {
    right: 0;
    bottom: 0;
    left: 0;

    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}

#wishlist-total .total-text {
  font-style: italic;
}