From d8589d414d87c72ad514f1f04419e1f72e00d17d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 14 Jun 2020 13:23:19 +0900
Subject: [PATCH] chore(client): :art:

---
 src/client/components/uploader.vue | 60 +++---------------------------
 1 file changed, 5 insertions(+), 55 deletions(-)

diff --git a/src/client/components/uploader.vue b/src/client/components/uploader.vue
index 6ebdf123b..2d28bc84a 100644
--- a/src/client/components/uploader.vue
+++ b/src/client/components/uploader.vue
@@ -11,9 +11,7 @@
 					<span class="percentage" v-if="ctx.progressValue !== undefined">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
 				</p>
 			</div>
-			<progress v-if="ctx.progressValue !== undefined && ctx.progressValue !== ctx.progressMax" :value="ctx.progressValue" :max="ctx.progressMax"></progress>
-			<div class="progress initing" v-if="ctx.progressValue === undefined"></div>
-			<div class="progress waiting" v-if="ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax"></div>
+			<progress :value="ctx.progressValue" :max="ctx.progressMax" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
 		</li>
 	</ol>
 </div>
@@ -117,7 +115,6 @@ export default Vue.extend({
   padding: 0;
   height: 36px;
   width: 100%;
-  box-shadow: 0 -1px 0 var(--accentAlpha01);
   border-top: solid 8px transparent;
   grid-template-columns: 36px calc(100% - 44px);
   grid-template-rows: 1fr 8px;
@@ -146,7 +143,6 @@ export default Vue.extend({
   padding: 0 8px 0 0;
   margin: 0;
   font-size: 0.8em;
-  color: var(--accentAlpha07);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -163,16 +159,13 @@ export default Vue.extend({
   flex-shrink: 0;
 }
 .mk-uploader > ol > li > .top > .status > .initing {
-  color: var(--accentAlpha05);
 }
 .mk-uploader > ol > li > .top > .status > .kb {
-  color: var(--accentAlpha05);
 }
 .mk-uploader > ol > li > .top > .status > .percentage {
   display: inline-block;
   width: 48px;
   text-align: right;
-  color: var(--accentAlpha07);
 }
 .mk-uploader > ol > li > .top > .status > .percentage:after {
   content: '%';
@@ -186,57 +179,14 @@ export default Vue.extend({
   grid-column: 2/3;
   grid-row: 2/3;
   z-index: 2;
+	width: 100%;
+	height: 8px;
 }
 .mk-uploader > ol > li > progress::-webkit-progress-value {
   background: var(--accent);
 }
 .mk-uploader > ol > li > progress::-webkit-progress-bar {
-  background: var(--accentAlpha01);
-}
-.mk-uploader > ol > li > .progress {
-  display: block;
-  border: none;
-  border-radius: 4px;
-  background: linear-gradient(45deg, var(--accentLighten30) 25%, var(--accent) 25%, var(--accent) 50%, var(--accentLighten30) 50%, var(--accentLighten30) 75%, var(--accent) 75%, var(--accent));
-  background-size: 32px 32px;
-  animation: bg 1.5s linear infinite;
-  grid-column: 2/3;
-  grid-row: 2/3;
-  z-index: 1;
-}
-.mk-uploader > ol > li > .progress.initing {
-  opacity: 0.3;
-}
-@-moz-keyframes bg {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: -64px 32px;
-  }
-}
-@-webkit-keyframes bg {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: -64px 32px;
-  }
-}
-@-o-keyframes bg {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: -64px 32px;
-  }
-}
-@keyframes bg {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: -64px 32px;
-  }
+  //background: var(--accentAlpha01);
+	background: transparent;
 }
 </style>