ginpei/potoshop

:root {
  --app-animation-duration: 300ms;
  --app-animation-duration-quick: 100ms;
  --app-header-height: 20px;
  --app-space: 16px;
  --app-space-half: 8px;
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --color-main-bg: #036;
  --color-main-fg: #fff;
  --color-highlight: #0f9;
  --color-highlight-t: #0f99;
}

body {
  margin: 0;
  padding: 0;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", YuGothic, sans-serif;
}

.container {
  margin: auto;
  max-width: 800px;
  padding: 0 var(--app-space);
}
.text-right {
  text-align: right;
}

/* Nice button base */
.niceButtonBase {
  align-items: center;
  background-color: var(--color-main-fg);
  border-radius: 3px;
  border: 1px solid currentColor;
  color: var(--color-main-bg-bg);
  cursor: pointer;
  display: inline-flex;
  height: 50px;
  justify-content: center;
  min-width: 150px;
  text-decoration: none;
  vertical-align: middle;
}
/* .niceButtonBase:hover,
.niceButtonBase:active {
  background-color: var(--color-main-bg);
  color: var(--color-main-fg);
} */
.niceButtonBase:active {
  animation: poyon 300ms;
}
.niceButtonBase.-primary {
  background-color: var(--color-main-bg);
  color: var(--color-main-fg);
}
.niceButtonBase:disabled,
.niceButtonBase.-disabled,
.niceButtonBase.-primary:disabled,
.niceButtonBase.-primary.-disabled {
  animation: none;
  background-color: var(--color-main-fg);
  color: #999;
  cursor: default;
}
.niceButtonBase-leftIcon {
  margin-right: var(--app-space-half);
}

.fade-in {
  animation: fade-in backwards var(--app-animation-duration) var(--app-animation-duration);
}

@keyframes poyon {
  0% { transform: scale(0.9); }
  30% { transform: scale(1.1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}