wip

# Conflicts:
#	codecs/cpp.Dockerfile
#	codecs/imagequant/example.html
#	codecs/webp/dec/webp_dec.d.ts
#	codecs/webp/dec/webp_dec.js
#	codecs/webp/dec/webp_dec.wasm
#	codecs/webp/enc/webp_enc.d.ts
#	codecs/webp/enc/webp_enc.js
#	codecs/webp/enc/webp_enc.wasm
#	package-lock.json
#	package.json
#	src/codecs/tiny.webp
#	src_old/codecs/encoders.ts
#	src_old/codecs/processor-worker/tiny.avif
#	src_old/codecs/processor-worker/tiny.webp
#	src_old/codecs/tiny.webp
#	src_old/components/compress/index.tsx
#	src_old/lib/util.ts
#	src_old/sw/util.ts

src_old/components/App/style.scss

@@ -0,0 +1,68 @@
+.app {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: strict;
+}
+
+.drop {
+  overflow: hidden;
+  touch-action: none;
+  height: 100%;
+  width: 100%;
+
+  &:global {
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      left: 10px;
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      border: 2px dashed #fff;
+      background-color:rgba(88, 116, 88, 0.2);
+      border-color: rgba(65, 129, 65, 0.5);
+      border-radius: 10px;
+      opacity: 0;
+      transform: scale(0.95);
+      transition: all 200ms ease-in;
+      transition-property: transform, opacity;
+      pointer-events: none;
+    }
+
+    &.drop-valid::after {
+      opacity: 1;
+      transform: scale(1);
+      transition-timing-function: ease-out;
+    }
+  }
+}
+
+.option-pair {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100%;
+
+  &.horizontal {
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  &.vertical {
+    flex-direction: column;
+  }
+}
+
+.app-loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  --size: 225px;
+  --stroke-width: 26px;
+}