[Customize] 단일 ZXP파일을 설치하도록 프로젝트 변경

2020-02-24 18:22:13 +09:00
commit 00b6b34f3a
50 changed files with 25877 additions and 0 deletions
--- a/app/style.css
+++ b/app/style.css
@@ -0,0 +1,172 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #5c1820;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  margin: 0;
+  transition: background-color 1s;
+}
+
+.main-view {
+  background-color: #471319;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: 5px;
+  border: 1px solid #751f29;
+  position: absolute;
+  margin: 100px;
+  padding: 25px;
+  transition: border-color .5s;
+}
+
+.holder {
+  height: 100%;
+}
+
+.icon {
+  width: 74px;
+  margin: 0 auto 15px;
+}
+
+.status {
+  font-weight: bold;
+  color: #fff;
+  text-align: center;
+}
+
+@keyframes spinner {
+  0% { opacity: 0; }
+  10% { opacity: 1; }
+  30% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes arrow {
+  0%, 100% { transform: translate(0px, 0px); }
+  50% { transform: translate(0px, 7px); }
+}
+
+@-webkit-keyframes spinner {
+  0% { opacity: 0; }
+  10% { opacity: 1; }
+  30% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@-webkit-keyframes arrow {
+  0%, 100% { transform: translate(0px, 0px); }
+  50% { transform: translate(0px, 7px); }
+}
+
+
+.white,
+.red,
+.green {
+  transform: translate(0px, 14px);
+}
+
+.white,
+.red,
+.red .arrow,
+.green,
+.green .one,
+.green .two,
+.green .three {
+  transition: opacity .5s;
+}
+
+.red,
+.red .arrow,
+.green .one,
+.green .two,
+.green .three,
+.green .backplate {
+  opacity: 0;
+}
+
+.red .arrow {
+  animation-name: arrow;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  -webkit-animation-name: arrow;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: ease-in-out;
+}
+
+.has-error .red {
+  opacity: 1;
+}
+
+.is-dragging .red,
+.is-dragging .arrow {
+  opacity: 1;
+}
+
+.is-dragging .white {
+  opacity: 0;
+}
+
+.is-dragging .main-view {
+  border-color: #9D2A37;
+}
+
+.was-successful .white,
+.was-successful .red {
+  opacity: 0;
+}
+
+.was-successful .green .one,
+.was-successful .green .two,
+.was-successful .green .three {
+  opacity: 1;
+}
+
+
+.is-showing-spinner .white {
+  opacity: 0;
+}
+
+.is-showing-spinner .red {
+  opacity: 1;
+}
+
+.is-showing-spinner .green .one,
+.is-showing-spinner .green .two,
+.is-showing-spinner .green .three {
+  animation-name: spinner;
+  animation-duration: .9s;
+  animation-iteration-count: infinite;
+  -webkit-animation-name: spinner;
+  -webkit-animation-duration: .9s;
+  -webkit-animation-iteration-count: infinite;
+}
+
+.is-showing-spinner .green .two {
+  animation-delay: .3s;
+  -webkit-animation-delay: .3s;
+}
+
+.is-showing-spinner .green .three {
+  animation-delay: .6s;
+  -webkit-animation-delay: .6s;
+}
+
+.version {
+  color: #5c1820;
+  padding: 5px 10px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  cursor: default;
+  font-size: 12px;
+}
+
+.version:hover {
+  color: #fff;
+}