From 5541acee88cad3679600a06e2fd9a10c0019c675 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 16 Aug 2023 16:08:24 +0600
Subject: [PATCH] 7.0.1: ui tweaks

- fixed streamable downloads in safari
- added background blur to popup backdrop
- reduced shadow blur for popups
- fixed content going out of corners in picker
---
 package.json         |  2 +-
 src/front/cobalt.css | 28 +++++++++++++++++++---------
 src/front/cobalt.js  |  4 +++-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index fee12c4c..e43894a3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "cobalt",
     "description": "save what you love",
-    "version": "7.0",
+    "version": "7.0.1",
     "author": "wukko",
     "exports": "./src/cobalt.js",
     "type": "module",
diff --git a/src/front/cobalt.css b/src/front/cobalt.css
index 2b7d630e..1e8e0569 100644
--- a/src/front/cobalt.css
+++ b/src/front/cobalt.css
@@ -26,6 +26,7 @@
         --glass-lite: rgba(25, 25, 25, 0.98);
         --subbackground: rgb(10, 10, 10);
         --background: rgb(0, 0, 0);
+        --background-backdrop: rgba(0, 0, 0, 0.5);
     }
 }
 @media (prefers-color-scheme: light) {
@@ -42,6 +43,7 @@
         --glass-lite: rgba(230, 230, 230, 0.98);
         --subbackground: rgb(240, 240, 240);
         --background: rgb(255, 255, 255);
+        --background-backdrop: rgba(255, 255, 255, 0.5);
     }
 }
 [data-theme="dark"] {
@@ -57,6 +59,7 @@
     --glass-lite: rgba(25, 25, 25, 0.98);
     --subbackground: rgb(10, 10, 10);
     --background: rgb(0, 0, 0);
+    --background-backdrop: rgba(0, 0, 0, 0.5);
 }
 [data-theme="light"] {
     --accent: rgb(25, 25, 25);
@@ -64,13 +67,14 @@
     --accent-subtext: rgb(110, 110, 110);
     --accent-hover: rgb(230, 230, 230);
     --accent-hover-elevated: rgb(215, 215, 215);
-    --accent-hover-transparent: rgba(215, 215, 215, 0.5);
+    --accent-hover-transparent: rgba(219, 219, 219, 0.5);
     --accent-button: rgb(225, 225, 225);
     --accent-button-elevated: rgb(210, 210, 210);
     --glass: rgba(230, 230, 230, 0.85);
     --glass-lite: rgba(230, 230, 230, 0.98);
     --subbackground: rgb(240, 240, 240);
     --background: rgb(255, 255, 255);
+    --background-backdrop: rgba(255, 255, 255, 0.5);
 }
 html,
 body {
@@ -371,7 +375,7 @@ button:active,
     max-height: 95%;
     opacity: 0;
     transform: translate(-50%,-48%)scale(.95);
-    box-shadow: 0 0 40px 0 var(--accent-hover-transparent);
+    box-shadow: 0 0 20px 0 var(--accent-hover-transparent);
 }
 .popup.visible {
     visibility: visible;
@@ -388,16 +392,18 @@ button:active,
     height: 100%;
     z-index: 998;
     opacity: 0;
-    background-color: var(--background);
+    background: var(--background-backdrop);
 }
 #popup-backdrop.visible {
     visibility: visible;
-    opacity: 0.5;
-    transition: opacity 130ms ease-in-out;
+    opacity: 1;
+    transition: opacity .13s ease-in-out;
+    backdrop-filter: blur(7px);
+    -webkit-backdrop-filter: blur(7px);
 }
 .popup.small {
     width: 20%;
-    box-shadow: 0px 0px 80px 0px var(--accent-hover);
+    box-shadow: 0px 0px 60px 0px var(--accent-hover);
     border: var(--accent-highlight) solid 0.15rem;
     padding: 1.7rem;
     transform: translate(-50%,-50%)scale(.95);
@@ -803,11 +809,14 @@ button:active,
     align-items: center;
     padding-top: calc(env(safe-area-inset-top) + 1rem);
 }
-.no-transparency .glass-bkg {
-    background: var(--glass-lite);
+.no-transparency .glass-bkg,
+.no-transparency #popup-backdrop {
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
 }
+.no-transparency .glass-bkg {
+    background: var(--glass-lite);
+}
 .no-animation .popup,
 .no-animation #popup-backdrop {
     transition: none;
@@ -896,7 +905,8 @@ button:active,
 [type=checkbox] {
     border-radius: 3px / 4px;
 }
-.popup {
+.popup,
+.scrollable #popup-content {
     border-radius: 8px / 9px;
 }
 #popup-header {
diff --git a/src/front/cobalt.js b/src/front/cobalt.js
index 23ea0e88..459e7546 100644
--- a/src/front/cobalt.js
+++ b/src/front/cobalt.js
@@ -1,8 +1,10 @@
 const ua = navigator.userAgent.toLowerCase();
 const isIOS = ua.match("iphone os");
 const isMobile = ua.match("android") || ua.match("iphone os");
+const isSafari = ua.match("safari/");
 const isFirefox = ua.match("firefox/");
 const isOldFirefox = ua.match("firefox/") && ua.split("firefox/")[1].split('.')[0] < 103;
+
 const version = 33;
 const regex = new RegExp(/https:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/);
 const notification = `<div class="notification-dot"></div>`;
@@ -412,7 +414,7 @@ async function download(url) {
                     let jp = await res.json();
                     if (jp.status === "continue") {
                         changeDownloadButton(2, '>>>');
-                        if (isMobile) {
+                        if (isMobile || isSafari) {
                             window.location.href = j.url;
                         } else window.open(j.url, '_blank');
                         setTimeout(() => { changeButton(1) }, 2500);