add colored frames for later; add transparent background for loader; install izitoast;

package-lock.json

@@ -12,6 +12,7 @@
         "bootstrap": "^5.2.0-beta1",
         "bootswatch": "^5.1.3",
         "core-js": "^3.8.3",
+        "izitoast": "^1.4.0",
         "moment": "^2.29.3",
         "momentjs": "^2.0.0",
         "vue": "^3.2.13",
@@ -8776,6 +8777,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/izitoast": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz",
+      "integrity": "sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w=="
+    },
     "node_modules/javascript-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
@@ -22888,6 +22894,11 @@
         "istanbul-lib-report": "^3.0.0"
       }
     },
+    "izitoast": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz",
+      "integrity": "sha512-Oc1X2wiQtPp39i5VpIjf3GJf5sfCtHKXZ5szx7RareyEeFLUlcEW0FSfBni28+Ul6KNKZRKzhVuWzSP4Xngh0w=="
+    },
     "javascript-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "bootstrap": "^5.2.0-beta1",
     "bootswatch": "^5.1.3",
     "core-js": "^3.8.3",
+    "izitoast": "^1.4.0",
     "moment": "^2.29.3",
     "momentjs": "^2.0.0",
     "vue": "^3.2.13",

src/components/CropField.vue

@@ -133,6 +133,7 @@ export default {
 .percent-bar-wrapper {
     z-index: 300;
     margin-top: -0.2em;
+    background-color: rgba(5,5,5,0.3);
 }
 
 .percent-bar {