web: new popup with meowbalt, fixes, removed migration popup

- new popup style featuring meowbalt
- removed migration popup
- rounder corners
- bottom glass-bkg in popups is no longer rounded on top right (accidentally matched as :last-child)
- small popup is now of fixed width on desktop
- small popup animation should be smoother on mobile
- better ui scaling across resolutions

src/front/cobalt.css

@@ -192,7 +192,7 @@ input[type="text"],
     z-index: -1;
     position: absolute;
     border: var(--accent-highlight) solid 0.15rem;
-    border-radius: 8px/9px;
+    border-radius: 22px;
 }
 .desktop button:hover,
 .desktop .switch:hover,
@@ -441,11 +441,17 @@ button:active,
     -webkit-backdrop-filter: blur(7px);
 }
 .popup.small {
-    width: 20%;
+    width: 21rem;
     box-shadow: 0px 0px 60px 0px var(--accent-hover);
-    padding: 1.7rem;
+    padding: 18px;
     transform: translate(-50%,-50%)scale(.95);
     pointer-events: all;
+    border-radius: 22px;
+}
+.popup.small .popup-content-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
 }
 .popup.small.visible {
     transform: translate(-50%, -50%);
@@ -462,12 +468,30 @@ button:active,
 .popup.small .popup-title {
     margin-bottom: 0.6rem;
 }
-.popup.small .explanation {
-    margin-bottom: 0.9rem;
-}
 .popup.small .close-error.switch {
     background: var(--accent)!important;
     color: var(--background);
+    height: 2.5rem;
+}
+#popup-error,
+#popup-download {
+    display: flex;
+    flex-direction: column;
+    padding-top: 4rem;
+}
+#popup-error {
+    justify-content: center;
+    align-items: center;
+}
+.popout-meowbalt {
+    position: absolute;
+    top: -7rem;
+    user-select: none;
+    -webkit-user-select: none;
+    pointer-events: none;
+    height: 180px;
+    width: 180px;
+    aspect-ratio: 1/1;
 }
 .popup.scrollable {
     height: 95%;
@@ -531,7 +555,8 @@ button:active,
     -webkit-user-select: text;
 }
 .desc-error {
-    padding-bottom: 1.5rem;
+    padding-bottom: 0rem;
+    text-align: center;
 }
 .popup-title {
     font-size: 1.5rem;
@@ -957,44 +982,43 @@ button:active,
 .changelog-img,
 .changelog-banner,
 .close-error,
-.changelog-tag-version,
 #download-switcher .switch,
 #popup-about .switch,
 .popup-tabs .switch,
 .text-to-copy,
 .text-to-copy.text-backdrop,
 #filename-preview {
-    border-radius: 6px / 7px;
+    border-radius: 8px / 9px;
 }
 [type=checkbox] {
     border-radius: 3px / 4px;
 }
 .popup,
 .scrollable .popup-content {
-    border-radius: 8px;
+    border-radius: 12px;
 }
 .popup-header .glass-bkg {
-    border-top-left-radius: 8px 9px;
+    border-top-left-radius: 11px 12px;
-    border-top-right-radius: 8px 9px;
+    border-top-right-radius: 11px 12px;
     border-bottom: var(--accent-highlight) solid 0.1rem;
     top: -1px;
 }
 .popup-tabs .glass-bkg {
-    border-bottom-left-radius: 8px 9px;
+    border-bottom-left-radius: 11px 12px;
-    border-bottom-right-radius: 8px 9px;
+    border-bottom-right-radius: 11px 12px;
     border-top: var(--accent-highlight) solid 0.1rem;
     bottom: -1px;
 }
-.switches :first-child {
+.switches .switch:first-child {
-    border-top-left-radius: 6px 7px;
+    border-top-left-radius: 8px 9px;
-    border-bottom-left-radius: 6px 7px;
+    border-bottom-left-radius: 8px 9px;
 }
-.switches :last-child {
+.switches .switch:last-child {
-    border-top-right-radius: 6px 7px;
+    border-top-right-radius: 8px 9px;
-    border-bottom-right-radius: 6px 7px;
+    border-bottom-right-radius: 8px 9px;
 }
 .text-backdrop {
-    border-radius: 3px / 4px;
+    border-radius: 4px / 5px;
 }
 .collapse-list:first-child,
 .collapse-list:first-child .collapse-header {
@@ -1017,17 +1041,11 @@ button:active,
 }
 /* adapt the page according to screen size */
 @media screen and (max-width: 1550px) {
-    .popup.small {
-        width: 25%
-    }
     .popup {
         width: 40%;
     }
 }
 @media screen and (max-width: 1440px) {
-    .popup.small {
-        width: 30%
-    }
     .popup {
         width: 45%;
     }
@@ -1038,17 +1056,11 @@ button:active,
     }
 }
 @media screen and (max-width: 1200px) {
-    .popup.small {
-        width: 35%
-    }
     .popup {
         width: 55%;
     }
 }
 @media screen and (max-width: 1025px) {
-    .popup.small {
-        width: 40%
-    }
     .popup {
         width: 60%;
     }
@@ -1058,6 +1070,16 @@ button:active,
         width: 75%;
     }
 }
+@media screen and (max-width: 680px) {
+    .popup {
+        width: 90%;
+    }
+}
+@media screen and (max-width: 660px) {
+    #cobalt-main-box {
+        width: calc(100% - (0.7rem * 2));
+    }
+}
 /* mobile page */
 @media screen and (max-width: 499px) {
     .tab {
@@ -1070,10 +1092,7 @@ button:active,
         width: calc(100% - 1.3rem);
     }
 }
-@media screen and (max-width: 660px) {
+@media screen and (max-width: 535px) {
-    #cobalt-main-box {
-        width: calc(100% - (0.7rem * 2));
-    }
     #cobalt-main-box #bottom {
         flex-direction: row-reverse;
     }
@@ -1128,7 +1147,7 @@ button:active,
         transform: unset;
     }
     .popup.small {
-        width: calc(100% - 1.7rem * 2);
+        width: calc(100% - 18px * 2);
         height: auto;
         top: unset;
         bottom: 0;
@@ -1143,8 +1162,8 @@ button:active,
         border-top: var(--accent-highlight) solid 0.15rem;
     }
     .popup.small.visible {
-        transform: none;
+        transform: translateY(0rem);
-        transition: transform 210ms cubic-bezier(0.062, 0.82, 0.165, 1), opacity 130ms ease-in-out;
+        transition: transform 250ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 130ms ease-in-out;
     }
     .popup.small .popup-header {
         background: none;

src/front/cobalt.js

@@ -600,15 +600,11 @@ window.onload = () => {
             if (setUn !== null) {
                 if (setUn) {
                     sSet("migrated", "true")
-                    eid("desc-migration").innerHTML += `<br><br>${loc.DataTransferSuccess}`
-                } else {
-                    eid("desc-migration").innerHTML += `<br><br>${loc.DataTransferError}`
                 }
             }
         }
         loadSettings();
         detectColorScheme();
-        popup("migration", 1);
     }
     window.history.replaceState(null, '', window.location.pathname);
 

src/localization/languages/en.json

@@ -16,7 +16,6 @@
         "AccessibilityOpenDonate": "open donation popup",
         "TitlePopupAbout": "what's cobalt?",
         "TitlePopupSettings": "settings",
-        "TitlePopupError": "uh-oh...",
         "TitlePopupChangelog": "what's new?",
         "TitlePopupDonate": "support cobalt",
         "TitlePopupDownload": "how to save?",

src/localization/languages/ru.json

@@ -16,7 +16,6 @@
         "AccessibilityOpenDonate": "сделать пожертвование",
         "TitlePopupAbout": "что за кобальт?",
         "TitlePopupSettings": "настройки",
-        "TitlePopupError": "опаньки...",
         "TitlePopupChangelog": "что нового?",
         "TitlePopupDonate": "поддержи кобальт",
         "TitlePopupDownload": "как сохранить?",

src/modules/pageRender/elements.js

@@ -69,15 +69,17 @@ export function popup(obj) {
     }
     return `
     ${obj.standalone ? `<div id="popup-${obj.name}" class="popup center${!obj.buttonOnly ? " box" : ''}${classes.length > 0 ? ' ' + classes.join(' ') : ''}">` : ''}
-        <div class="popup-header">
+        ${obj.buttonOnly ? obj.header.emoji : ``}
-            <div class="popup-header-contents">
+        ${obj.name === "error" ? `` :
-                ${obj.buttonOnly ? obj.header.emoji : ``}
+            `<div class="popup-header">
-                ${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
+                <div class="popup-header-contents">
-                ${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
+                    ${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
-                ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
+                    ${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
-            </div>
+                    ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
-            ${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''}
+                </div>
-        </div>
+                ${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''}
+            </div>`
+        }
         <div class="popup-content popup-content-inner">
             ${body}${obj.buttonOnly ? `<button class="close-error switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''}
         </div>

src/modules/pageRender/page.js

@@ -68,10 +68,12 @@ export default function(obj) {
         <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
 
         <link rel="manifest" href="manifest.webmanifest">
-        <link rel="preload" href="fonts/notosansmono.css" as="style">
         <link rel="stylesheet" href="fonts/notosansmono.css">
         <link rel="stylesheet" href="cobalt.css">
 
+        <link rel="preload" href="fonts/notosansmono.css" as="style">
+        <link rel="preload" href="assets/meowbalt/error.png" as="image">
+        <link rel="preload" href="assets/meowbalt/question.png" as="image">
     </head>
     <body id="cobalt-body" ${platform === "d" ? 'class="desktop"' : ''}>
         <noscript>
@@ -531,7 +533,9 @@ export default function(obj) {
                 classes: ["small"],
                 header: {
                     closeAria: t('AccessibilityGoBack'),
-                    emoji: emoji("🐱", 78, 1, 1),
+                    emoji: `<img class="popout-meowbalt" `
+                              + `draggable="false" loading="lazy"`
+                              + `alt="😿" src="assets/meowbalt/question.png">`,
                     title: t('TitlePopupDownload')
                 },
                 body: switcher({
@@ -551,28 +555,14 @@ export default function(obj) {
                 buttonOnly: true,
                 classes: ["small"],
                 header: {
-                    title: t('TitlePopupError'),
+                    emoji: `<img class="popout-meowbalt" `
-                    emoji: emoji("😿", 78, 1, 1),
+                              + `draggable="false" loading="lazy"`
+                              + `alt="😿" src="assets/meowbalt/error.png">`,
                 },
                 body: `<div id="desc-error" class="desc-padding subtext desc-error"></div>`,
                 buttonText: t('ErrorPopupCloseButton')
             })}
         </div>
-        <div id="popup-migration-container" class="popup-from-bottom">
-            ${popup({
-                name: "migration",
-                standalone: true,
-                buttonOnly: true,
-                classes: ["small"],
-                header: {
-                    title: t('NewDomainWelcomeTitle'),
-                    emoji: emoji("😸", 78, 1, 1),
-                },
-                body: `<div id="desc-migration" class="desc-padding subtext desc-error">${t('NewDomainWelcome')}</div>`,
-                buttonText: t('ErrorPopupCloseButton')
-            })}
-            <div id="popup-backdrop-message" onclick="popup('message', 0)"></div>
-        </div>
         <div id="popup-backdrop" onclick="hideAllPopups()"></div>
         <div id="home" style="visibility:hidden">
             ${urgentNotice({