@vela-ventures/ao-sync-sdk
Version:
JavaScript SDK for Beacon wallet
114 lines (113 loc) • 3.35 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.mobileStylesCSS = exports.modalStyles = void 0;
exports.modalStyles = {
modal: {
position: "fixed",
top: "0",
left: "0",
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: "999999",
},
backdrop: {
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "100%",
backgroundColor: "rgba(0, 0, 0, 0.5)",
},
content: {
background: "white",
borderRadius: "16px",
padding: "28px",
paddingTop: "47px",
textAlign: "center",
minWidth: "364px",
maxWidth: "364px",
display: "flex",
justifyContent: "center",
flexDirection: "column",
alignItems: "center",
backgroundRepeat: "no-repeat",
zIndex: "10",
boxSizing: "border-box",
backgroundImage: "url(https://arweave.net/zNeeL2prnXwctfwCo07xyhT8ob-M6F70RgYObK51Y90)",
},
iconContainer: {
width: "50px",
height: "50px",
borderRadius: "50%",
backgroundColor: "#F7FAFD",
marginBottom: "12px",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
title: {
color: "#000",
fontSize: "18px",
fontWeight: "500",
marginBottom: "5px",
marginTop: "0px",
fontFamily: "Sora",
},
subtitle: {
fontSize: "14px",
color: "#2B2B2B",
marginBottom: "2px",
},
description: {
fontSize: "11px",
color: "#2B2B2B",
fontFamily: "Sora",
},
statusMark: {
width: "200px",
height: "200px",
marginBottom: "10px",
display: "flex",
justifyContent: "center",
alignItems: "center",
paddingBottom: "30px",
boxSizing: "border-box",
},
modalLink: {
color: "#09084B",
},
};
if (typeof window !== "undefined" &&
(window === null || window === void 0 ? void 0 : window.matchMedia) &&
(window === null || window === void 0 ? void 0 : window.matchMedia("(prefers-color-scheme: dark)").matches)) {
exports.modalStyles.content.backgroundImage =
"url(https://arweave.net/fqogTk0hEVP6YXgMsfsucioYUfOd4gVHHJvd8pG-Dg4)";
exports.modalStyles.content.backgroundColor = "#0A0B19";
exports.modalStyles.iconContainer.backgroundColor = "#232330";
exports.modalStyles.title.color = "#ffffff";
exports.modalStyles.description.color = "#ffffff";
exports.modalStyles.subtitle.color = "#84858C";
exports.modalStyles.modalLink.color = "#4969FF";
exports.modalStyles.backdrop.backgroundColor = "rgba(0, 0, 0, 0.3)";
}
exports.mobileStylesCSS = `
@media (max-width: 768px) {
#aosync-modal-content {
width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
border-radius: 16px 16px 0 0 !important;
position: fixed !important;
bottom: 0 !important;
max-height: 90vh !important;
overflow-y: auto !important;
background-size: 100% !important;
}
#aosync-modal {
align-items: flex-end !important;
}
}
`;