diff --git a/src/front/assets/meowbalt/error.png b/src/front/assets/meowbalt/error.png new file mode 100644 index 00000000..533858a7 Binary files /dev/null and b/src/front/assets/meowbalt/error.png differ diff --git a/src/front/assets/meowbalt/question.png b/src/front/assets/meowbalt/question.png new file mode 100644 index 00000000..330cd69b Binary files /dev/null and b/src/front/assets/meowbalt/question.png differ diff --git a/src/front/cobalt.css b/src/front/cobalt.css index 585fb4e8..267092cb 100644 --- a/src/front/cobalt.css +++ b/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-right-radius: 8px 9px; + border-top-left-radius: 11px 12px; + 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-right-radius: 8px 9px; + border-bottom-left-radius: 11px 12px; + border-bottom-right-radius: 11px 12px; border-top: var(--accent-highlight) solid 0.1rem; bottom: -1px; } -.switches :first-child { - border-top-left-radius: 6px 7px; - border-bottom-left-radius: 6px 7px; +.switches .switch:first-child { + border-top-left-radius: 8px 9px; + border-bottom-left-radius: 8px 9px; } -.switches :last-child { - border-top-right-radius: 6px 7px; - border-bottom-right-radius: 6px 7px; +.switches .switch:last-child { + border-top-right-radius: 8px 9px; + 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) { - #cobalt-main-box { - width: calc(100% - (0.7rem * 2)); - } +@media screen and (max-width: 535px) { #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; - transition: transform 210ms cubic-bezier(0.062, 0.82, 0.165, 1), opacity 130ms ease-in-out; + transform: translateY(0rem); + transition: transform 250ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 130ms ease-in-out; } .popup.small .popup-header { background: none; diff --git a/src/front/cobalt.js b/src/front/cobalt.js index cdf143bc..3748deda 100644 --- a/src/front/cobalt.js +++ b/src/front/cobalt.js @@ -600,15 +600,11 @@ window.onload = () => { if (setUn !== null) { if (setUn) { sSet("migrated", "true") - eid("desc-migration").innerHTML += `

${loc.DataTransferSuccess}` - } else { - eid("desc-migration").innerHTML += `

${loc.DataTransferError}` } } } loadSettings(); detectColorScheme(); - popup("migration", 1); } window.history.replaceState(null, '', window.location.pathname); diff --git a/src/localization/languages/en.json b/src/localization/languages/en.json index 7bc69001..f2390af1 100644 --- a/src/localization/languages/en.json +++ b/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?", diff --git a/src/localization/languages/ru.json b/src/localization/languages/ru.json index 7af3413b..cb657772 100644 --- a/src/localization/languages/ru.json +++ b/src/localization/languages/ru.json @@ -16,7 +16,6 @@ "AccessibilityOpenDonate": "сделать пожертвование", "TitlePopupAbout": "что за кобальт?", "TitlePopupSettings": "настройки", - "TitlePopupError": "опаньки...", "TitlePopupChangelog": "что нового?", "TitlePopupDonate": "поддержи кобальт", "TitlePopupDownload": "как сохранить?", diff --git a/src/modules/pageRender/elements.js b/src/modules/pageRender/elements.js index 53ad3c42..79129398 100644 --- a/src/modules/pageRender/elements.js +++ b/src/modules/pageRender/elements.js @@ -69,15 +69,17 @@ export function popup(obj) { } return ` ${obj.standalone ? `
0 ? ' ' + classes.join(' ') : ''}">` : ''} -
-
- ${obj.buttonOnly ? obj.header.emoji : ``} - ${obj.header.aboveTitle ? `${obj.header.aboveTitle.text}` : ''} - ${obj.header.title ? `
${obj.header.title}
` : ''} - ${obj.header.subtitle ? `` : ''} -
- ${!obj.buttonOnly ? `
` : ''} -
+ ${obj.buttonOnly ? obj.header.emoji : ``} + ${obj.name === "error" ? `` : + `
+
+ ${obj.header.aboveTitle ? `${obj.header.aboveTitle.text}` : ''} + ${obj.header.title ? `
${obj.header.title}
` : ''} + ${obj.header.subtitle ? `` : ''} +
+ ${!obj.buttonOnly ? `
` : ''} +
` + }
${body}${obj.buttonOnly ? `` : ''}
diff --git a/src/modules/pageRender/page.js b/src/modules/pageRender/page.js index 77b87f29..72474d2b 100644 --- a/src/modules/pageRender/page.js +++ b/src/modules/pageRender/page.js @@ -68,10 +68,12 @@ export default function(obj) { - + + +
-