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
This commit is contained in:
wukko
parent
3315be4350
commit
ea7ac37a0f
8 changed files with 79 additions and 74 deletions
BIN
src/front/assets/meowbalt/error.png
Normal file
BIN
src/front/assets/meowbalt/error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/front/assets/meowbalt/question.png
Normal file
BIN
src/front/assets/meowbalt/question.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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?",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
"AccessibilityOpenDonate": "сделать пожертвование",
|
||||
"TitlePopupAbout": "что за кобальт?",
|
||||
"TitlePopupSettings": "настройки",
|
||||
"TitlePopupError": "опаньки...",
|
||||
"TitlePopupChangelog": "что нового?",
|
||||
"TitlePopupDonate": "поддержи кобальт",
|
||||
"TitlePopupDownload": "как сохранить?",
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<div class="popup-header-contents">
|
||||
${obj.buttonOnly ? obj.header.emoji : ``}
|
||||
${obj.name === "error" ? `` :
|
||||
`<div class="popup-header">
|
||||
<div class="popup-header-contents">
|
||||
${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
|
||||
${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
|
||||
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
|
||||
</div>
|
||||
${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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: emoji("😿", 78, 1, 1),
|
||||
emoji: `<img class="popout-meowbalt" `
|
||||
+ `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({
|
||||
|
|
|
|||
Loading…
Reference in a new issue