6.3: new error and save popups

- remade error and save popups. both are now properly located and sized on mobile screens. this is the first step in modernizing cobalt ui!
- fixed >> button getting stuck in error state.

package.json

@@ -1,7 +1,7 @@
 {
     "name": "cobalt",
     "description": "save what you love",
-    "version": "6.2.4",
+    "version": "6.3",
     "author": "wukko",
     "exports": "./src/cobalt.js",
     "type": "module",

src/front/cobalt.css

@@ -16,7 +16,10 @@
         --accent-highlight: rgb(225, 225, 225, 4%);
         --accent-subtext: rgb(110, 110, 110);
         --accent-hover: rgb(30, 30, 30);
+        --accent-hover-elevated: rgb(48, 48, 48);
         --accent-button: rgb(25, 25, 25);
+        --accent-button-elevated: rgb(42, 42, 42);
+        --glass: rgba(25, 25, 25, 0.85);
         --subbackground: rgb(10, 10, 10);
         --background: rgb(0, 0, 0);
     }
@@ -27,7 +30,10 @@
         --accent-highlight: rgb(25, 25, 25, 4%);
         --accent-subtext: rgb(110, 110, 110);
         --accent-hover: rgb(230, 230, 230);
+        --accent-hover-elevated: rgb(215, 215, 215);
         --accent-button: rgb(225, 225, 225);
+        --accent-button-elevated: rgb(210, 210, 210);
+        --glass: rgba(230, 230, 230, 0.85);
         --subbackground: rgb(240, 240, 240);
         --background: rgb(255, 255, 255);
     }
@@ -37,7 +43,10 @@
     --accent-highlight: rgb(225, 225, 225, 4%);
     --accent-subtext: rgb(110, 110, 110);
     --accent-hover: rgb(30, 30, 30);
+    --accent-hover-elevated: rgb(48, 48, 48);
     --accent-button: rgb(25, 25, 25);
+    --accent-button-elevated: rgb(42, 42, 42);
+    --glass: rgba(25, 25, 25, 0.85);
     --subbackground: rgb(10, 10, 10);
     --background: rgb(0, 0, 0);
 }
@@ -46,7 +55,10 @@
     --accent-highlight: rgb(25, 25, 25, 4%);
     --accent-subtext: rgb(110, 110, 110);
     --accent-hover: rgb(230, 230, 230);
+    --accent-hover-elevated: rgb(215, 215, 215);
     --accent-button: rgb(225, 225, 225);
+    --accent-button-elevated: rgb(210, 210, 210);
+    --glass: rgba(230, 230, 230, 0.85);
     --subbackground: rgb(240, 240, 240);
     --background: rgb(255, 255, 255);
 }
@@ -327,7 +339,32 @@ button:active,
     max-height: 85%;
 }
 .popup.small {
-    width: 20%
+    width: 20%;
+    background: var(--glass);
+    backdrop-filter: blur(7px);
+    -webkit-backdrop-filter: blur(7px);
+    box-shadow: 0px 0px 80px 0px var(--accent-hover);
+    padding: 1.7rem;
+    border: var(--accent-highlight) solid 0.15rem;
+}
+.popup.small #popup-title {
+    margin-bottom: .2rem;
+}
+.popup.small #popup-header {
+    padding-top: 0;
+}
+.popup.small .explanation {
+    margin-bottom: 0.8rem;
+}
+.popup.small .switch {
+    background: var(--accent-button-elevated);
+}
+.popup.small .switch:hover {
+    background: var(--accent-hover-elevated);
+}
+#close-error {
+    background: var(--accent);
+    color: var(--background);
 }
 #popup-backdrop {
     opacity: 0.5;
@@ -421,7 +458,6 @@ button:active,
 }
 #popup-header {
     position: relative;
-    background: var(--background);
     z-index: 999;
     padding-top: 0.8rem;
 }
@@ -537,7 +573,6 @@ button:active,
 #close-button {
     max-width: 2.6rem;
     margin-left: var(--padding-1);
-    background: var(--background);
     border: var(--border-15);
     color: var(--accent);
     padding: 0.3rem 0.75rem 0.5rem;
@@ -886,8 +921,24 @@ button:active,
     .urgent-notice {
         width: 100%;
     }
-}
-@media screen and (max-width: 949px) {
+    .popup.small {
+        width: calc(100% - 1.7rem * 2);
+        height: auto;
+        top: unset;
+        bottom: 0;
+        left: 0;
+        transform: none;
+        position: absolute;
+        border: none;
+        border-top: var(--accent-highlight) solid 0.15rem;
+        padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.7rem)
+    }
+    .popup.small #popup-header {
+        background: none;
+    }
+    #close-error {
+        bottom: 3rem;
+    }
     #picker-holder::-webkit-scrollbar {
         display: none;
     }
@@ -903,23 +954,12 @@ button:active,
         height: 20rem;
         max-width: 100%;
     }
-    #popup-header {
-        padding-top: 1.2rem;
-    }
-    #popup-settings #popup-header {
-        padding-top: 0.8rem;
-    }
     .picker-image-container {
         height: 7rem;
         width: 7rem;
         line-height: 7rem;
     }
-    #close-error {
-        bottom: 3rem;
-        position: absolute;
-        width: var(--without-padding);
-    }
-    .popup, .popup.scrollable, .popup.small {
+    .popup, .popup.scrollable {
         border: none;
         width: 90%;
         height: 95%;

src/front/cobalt.js

@@ -245,11 +245,6 @@ function changeSwitcher(li, b) {
         }
     }
 }
-function internetError() {
-    eid("url-input-area").disabled = false
-    changeDownloadButton(2, '!!');
-    popup("error", 1, loc.noInternet);
-}
 function checkbox(action) {
     sSet(action, !!eid(action).checked);
     switch(action) {
@@ -283,8 +278,9 @@ function changeButton(type, text) {
         case 0: //error
             eid("url-input-area").disabled = false
             eid("url-clear").style.display = "block";
-            changeDownloadButton(2, '!!')
+            changeDownloadButton(2, '!!');
             popup("error", 1, text);
+            setTimeout(() => { changeButton(1); }, 2500);
             break;
         case 1: //enable back
             changeDownloadButton(1, '>>');
@@ -299,6 +295,12 @@ function changeButton(type, text) {
             break;
     }
 }
+function internetError() {
+    eid("url-input-area").disabled = false
+    changeDownloadButton(2, '!!');
+    setTimeout(() => { changeButton(1); }, 2500);
+    popup("error", 1, loc.noInternet);
+}
 function resetSettings() {
     localStorage.clear();
     window.location.reload();