a bit more light...

This commit is contained in:
Matteo Manzinello 2019-10-28 21:16:33 +01:00
parent 194e277690
commit 955b8635ff
5 changed files with 93 additions and 99 deletions

2
dist/mailgo.min.css vendored
View File

@ -1 +1 @@
.mailgo-modal{position:fixed;top:0;right:0;bottom:0;left:0;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.mailgo-modal a,.mailgo-modal p,.mailgo-modal span,.mailgo-modal strong{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.mailgo-modal strong{font-weight:700}.mailgo-modal .mailgo-modal-background{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(32,35,42,.75);opacity:.8}.mailgo-modal .mailgo-modal-content{position:relative;z-index:10002;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:.97;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 3px 20px rgba(32,35,42,.5);-moz-box-shadow:0 3px 20px rgba(32,35,42,.5);box-shadow:0 3px 20px rgba(32,35,42,.5);color:#4a4a4a;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:auto;padding:20px;-webkit-transition:.5s -webkit-box-shadow;transition:.5s -webkit-box-shadow;-o-transition:.5s box-shadow;-moz-transition:.5s box-shadow,.5s -moz-box-shadow;transition:.5s box-shadow;transition:.5s box-shadow,.5s -webkit-box-shadow,.5s -moz-box-shadow}.mailgo-modal .mailgo-modal-content:hover{opacity:1;-webkit-box-shadow:0 7px 20px rgba(32,35,42,.85);-moz-box-shadow:0 7px 20px rgba(32,35,42,.85);box-shadow:0 7px 20px rgba(32,35,42,.85)}.mailgo-modal .mailgo-modal-content .mailgo-title{margin-bottom:8px;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}.mailgo-modal .mailgo-modal-content .mailgo-details{margin-bottom:10px}.mailgo-modal .mailgo-modal-content .mailgo-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.mailgo-modal .mailgo-modal-content a{padding:10px;color:#4a4a4a;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-decoration:none}.mailgo-modal .mailgo-modal-content a.mailgo-gmail{color:#d44638}.mailgo-modal .mailgo-modal-content a.mailgo-outlook{color:#0072c6}.mailgo-modal .mailgo-modal-content a.mailgo-wa{color:#00bfa5}.mailgo-modal .mailgo-modal-content a.mailgo-telegram{color:#08c}.mailgo-modal .mailgo-modal-content a.mailgo-skype{color:#00aff0}.mailgo-modal .mailgo-modal-content a.mailgo-copy{padding:16px 10px;font-size:16px}.mailgo-modal .mailgo-modal-content a.mailgo-copy:hover,.mailgo-modal .mailgo-modal-content a.mailgo-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.mailgo-modal .mailgo-modal-content a.mailgo-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.mailgo-modal .mailgo-modal-content a.mailgo-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.mailgo-modal .mailgo-modal-content a.mailgo-telegram:hover{background-color:rgba(0,114,198,.08);color:#08c}.mailgo-modal .mailgo-modal-content a.mailgo-wa:hover{background-color:rgba(0,191,165,.08);color:#00bfa5}.mailgo-modal .mailgo-modal-content a.mailgo-skype:hover{background-color:rgba(0,175,240,.08);color:#00aff0}.mailgo-modal .mailgo-modal-content a.mailgo-by{font-size:8px;margin-top:.8rem;padding:5px;color:#4a4a4a;opacity:.5}.mailgo-modal .mailgo-modal-content a.mailgo-by:hover{opacity:1}.mailgo-modal .mailgo-modal-content .w-500{font-weight:500}
.m-modal{position:fixed;top:0;right:0;bottom:0;left:0;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.m-modal a,.m-modal p,.m-modal span,.m-modal strong{margin:0;padding:0;font-size:100%;line-height:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.m-modal strong{font-weight:700}.m-modal .m-modal-back{position:absolute;z-index:10001;top:0;right:0;bottom:0;left:0;background-color:rgba(32,35,42,.75);opacity:.8}.m-modal .m-modal-content{position:relative;z-index:10002;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:.97;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 3px 20px rgba(32,35,42,.5);-moz-box-shadow:0 3px 20px rgba(32,35,42,.5);box-shadow:0 3px 20px rgba(32,35,42,.5);color:#4a4a4a;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:auto;padding:20px;-webkit-transition:.5s -webkit-box-shadow;transition:.5s -webkit-box-shadow;-o-transition:.5s box-shadow;-moz-transition:.5s box-shadow,.5s -moz-box-shadow;transition:.5s box-shadow;transition:.5s box-shadow,.5s -webkit-box-shadow,.5s -moz-box-shadow}.m-modal .m-modal-content:hover{opacity:1;-webkit-box-shadow:0 7px 20px rgba(32,35,42,.85);-moz-box-shadow:0 7px 20px rgba(32,35,42,.85);box-shadow:0 7px 20px rgba(32,35,42,.85)}.m-modal .m-modal-content .m-title{margin-bottom:8px;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}.m-modal .m-modal-content .m-details{margin-bottom:10px}.m-modal .m-modal-content .m-details p{font-size:12px;margin-top:3px;margin-bottom:3px}.m-modal .m-modal-content a{padding:10px;color:#4a4a4a;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-decoration:none}.m-modal .m-modal-content a.m-gmail{color:#d44638}.m-modal .m-modal-content a.m-gmail:hover{background-color:rgba(212,70,56,.08);color:#d44638}.m-modal .m-modal-content a.m-outlook{color:#0072c6}.m-modal .m-modal-content a.m-outlook:hover{background-color:rgba(0,114,198,.08);color:#0072c6}.m-modal .m-modal-content a.m-tg{color:#08c}.m-modal .m-modal-content a.m-tg:hover{background-color:rgba(0,114,198,.08);color:#08c}.m-modal .m-modal-content a.m-wa{color:#00bfa5}.m-modal .m-modal-content a.m-wa:hover{background-color:rgba(0,191,165,.08);color:#00bfa5}.m-modal .m-modal-content a.m-skype{color:#00aff0}.m-modal .m-modal-content a.m-skype:hover{background-color:rgba(0,175,240,.08);color:#00aff0}.m-modal .m-modal-content a.m-copy{padding:16px 10px;font-size:16px}.m-modal .m-modal-content a.m-copy:hover,.m-modal .m-modal-content a.m-default:hover{background-color:rgba(0,0,0,.08);color:#4a4a4a}.m-modal .m-modal-content a.m-by{font-size:8px;margin-top:.8rem;padding:5px;color:#4a4a4a;opacity:.5}.m-modal .m-modal-content a.m-by:hover{opacity:1}.m-modal .m-modal-content .w-500{font-weight:500}

2
dist/mailgo.min.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -54,73 +54,73 @@
let modal = document.createElement("div");
modal.style.display = "none";
modal.id = "mailgo";
modal.classList.add("mailgo-modal");
modal.classList.add("m-modal");
// background
let modalBackground = document.createElement("div");
modalBackground.className = "mailgo-modal-background";
modalBackground.className = "m-modal-back";
modal.appendChild(modalBackground);
// modal content
let modalContent = document.createElement("div");
modalContent.className = "mailgo-modal-content";
modalContent.className = "m-modal-content";
modal.appendChild(modalContent);
// title (email address)
title = document.createElement("strong");
title.id = "mailgo-title";
title.className = "mailgo-title";
title.id = "m-title";
title.className = "m-title";
modalContent.appendChild(title);
// details
let details = document.createElement("div");
details.id = "mailgo-details";
details.className = "mailgo-details";
details.id = "m-details";
details.className = "m-details";
detailCc = document.createElement("p");
detailCc.id = "mailgo-cc";
detailCc.id = "m-cc";
let ccSpan = document.createElement("span");
ccSpan.className = "w-500";
let ccContent = document.createTextNode("cc ");
ccSpan.appendChild(ccContent);
ccValue = document.createElement("span");
ccValue.id = "mailgo-cc-value";
ccValue.id = "m-cc-value";
detailCc.appendChild(ccSpan);
detailCc.appendChild(ccValue);
details.appendChild(detailCc);
detailBcc = document.createElement("p");
detailBcc.id = "mailgo-bcc";
detailBcc.id = "m-bcc";
let bccSpan = document.createElement("span");
bccSpan.className = "w-500";
let bccContent = document.createTextNode("bcc ");
bccSpan.appendChild(bccContent);
bccValue = document.createElement("span");
bccValue.id = "mailgo-bcc-value";
bccValue.id = "m-bcc-value";
detailBcc.appendChild(bccSpan);
detailBcc.appendChild(bccValue);
details.appendChild(detailBcc);
detailSubject = document.createElement("p");
detailSubject.id = "mailgo-subject";
detailSubject.id = "m-subject";
let subjectSpan = document.createElement("span");
subjectSpan.className = "w-500";
let subjectContent = document.createTextNode("subject ");
subjectSpan.appendChild(subjectContent);
subjectValue = document.createElement("span");
subjectValue.id = "mailgo-subject-value";
subjectValue.id = "m-subject-value";
detailSubject.appendChild(subjectSpan);
detailSubject.appendChild(subjectValue);
details.appendChild(detailSubject);
detailBody = document.createElement("p");
detailBody.id = "mailgo-body";
detailBody.id = "m-body";
let bodySpan = document.createElement("span");
bodySpan.className = "w-500";
let bodyContent = document.createTextNode("body ");
bodySpan.appendChild(bodyContent);
bodyValue = document.createElement("span");
bodyValue.id = "mailgo-body-value";
bodyValue.id = "m-body-value";
detailBody.appendChild(bodySpan);
detailBody.appendChild(bodyValue);
details.appendChild(detailBody);
@ -129,10 +129,10 @@
// Gmail
gmail = document.createElement("a");
gmail.id = "mailgo-gmail";
gmail.id = "m-gmail";
gmail.href = DEFAULT_BTN_HREF;
gmail.classList.add("mailgo-open");
gmail.classList.add("mailgo-gmail");
gmail.classList.add("m-open");
gmail.classList.add("m-gmail");
let gmailContent = document.createTextNode("open in ");
gmail.appendChild(gmailContent);
let gmailSpan = document.createElement("span");
@ -145,10 +145,10 @@
// Outlook
outlook = document.createElement("a");
outlook.id = "mailgo-outlook";
outlook.id = "m-outlook";
outlook.href = DEFAULT_BTN_HREF;
outlook.classList.add("mailgo-open");
outlook.classList.add("mailgo-outlook");
outlook.classList.add("m-open");
outlook.classList.add("m-outlook");
let outlookContent = document.createTextNode("open in ");
outlook.appendChild(outlookContent);
let outlookSpan = document.createElement("span");
@ -161,10 +161,10 @@
// open default
open = document.createElement("a");
open.id = "mailgo-open";
open.id = "m-open";
open.href = DEFAULT_BTN_HREF;
open.classList.add("mailgo-open");
open.classList.add("mailgo-default");
open.classList.add("m-open");
open.classList.add("m-default");
let openSpan = document.createElement("span");
openSpan.className = "w-500";
let openSpanContent = document.createTextNode("open");
@ -177,9 +177,9 @@
// copy
copyMail = document.createElement("a");
copyMail.id = "mailgo-copy";
copyMail.id = "m-copy";
copyMail.href = DEFAULT_BTN_HREF;
copyMail.classList.add("mailgo-copy");
copyMail.classList.add("m-copy");
copyMail.classList.add("w-500");
let copyContent = document.createTextNode("copy");
copyMail.appendChild(copyContent);
@ -200,30 +200,30 @@
let modal = document.createElement("div");
modal.style.display = "none";
modal.id = "mailgo-tel";
modal.classList.add("mailgo-modal");
modal.classList.add("m-modal");
// background
let modalBackground = document.createElement("div");
modalBackground.className = "mailgo-modal-background";
modalBackground.className = "m-modal-back";
modal.appendChild(modalBackground);
// modal content
let modalContent = document.createElement("div");
modalContent.className = "mailgo-modal-content";
modalContent.className = "m-modal-content";
modal.appendChild(modalContent);
// title (telephone number)
titleTel = document.createElement("strong");
titleTel.id = "mailgo-tel-title";
titleTel.className = "mailgo-title";
titleTel.id = "m-tel-title";
titleTel.className = "m-title";
modalContent.appendChild(titleTel);
// Telegram
telegram = document.createElement("a");
telegram.id = "mailgo-telegram";
telegram.id = "m-tg";
telegram.href = DEFAULT_BTN_HREF;
telegram.classList.add("mailgo-open");
telegram.classList.add("mailgo-telegram");
telegram.classList.add("m-open");
telegram.classList.add("m-tg");
// by default not display
telegram.style.display = "none";
@ -240,10 +240,10 @@
// WhatsApp
wa = document.createElement("a");
wa.id = "mailgo-wa";
wa.id = "m-wa";
wa.href = DEFAULT_BTN_HREF;
wa.classList.add("mailgo-open");
wa.classList.add("mailgo-wa");
wa.classList.add("m-open");
wa.classList.add("m-wa");
let waContent = document.createTextNode("open in ");
wa.appendChild(waContent);
let waSpan = document.createElement("span");
@ -256,10 +256,10 @@
// Skype
skype = document.createElement("a");
skype.id = "mailgo-skype";
skype.id = "m-skype";
skype.href = DEFAULT_BTN_HREF;
skype.classList.add("mailgo-open");
skype.classList.add("mailgo-skype");
skype.classList.add("m-open");
skype.classList.add("m-skype");
let skypeContent = document.createTextNode("open in ");
skype.appendChild(skypeContent);
let skypeSpan = document.createElement("span");
@ -272,10 +272,10 @@
// call default
call = document.createElement("a");
call.id = "mailgo-call";
call.id = "m-call";
call.href = DEFAULT_BTN_HREF;
call.classList.add("mailgo-open");
call.classList.add("mailgo-default");
call.classList.add("m-open");
call.classList.add("m-default");
let callSpan = document.createElement("span");
callSpan.className = "w-500";
let callSpanContent = document.createTextNode("call");
@ -288,9 +288,9 @@
// copy
copyTel = document.createElement("a");
copyTel.id = "mailgo-tel-copy";
copyTel.id = "m-tel-copy";
copyTel.href = DEFAULT_BTN_HREF;
copyTel.classList.add("mailgo-copy");
copyTel.classList.add("m-copy");
copyTel.classList.add("w-500");
let copyContent = document.createTextNode("copy");
copyTel.appendChild(copyContent);
@ -423,7 +423,7 @@
}
// information
// let titleEl = getE("mailgo-tel-title");
// let titleEl = getE("m-tel-title");
// Telegram username
if (mailgo.hasAttribute("data-telegram")) {
@ -442,7 +442,7 @@
wa.addEventListener("click", openWhatsApp);
if (telegramUsername) {
setDisplay("mailgo-telegram", "block");
setDisplay("m-tg", "block");
telegram.addEventListener("click", openTelegram);
}
@ -760,7 +760,7 @@
// by
let by = document.createElement("a");
by.href = "https://mailgo.js.org?ref=mailgo-modal";
by.className = "mailgo-by";
by.className = "m-by";
by.target = "_blank";
by.rel = "noopener noreferrer";
let textBy = document.createTextNode("mailgo.js.org");

View File

@ -13,7 +13,7 @@ $skype-color: #00aff0;
// other vars
$default-border-radius: 8px;
.mailgo-modal {
.m-modal {
position: fixed;
top: 0;
right: 0;
@ -41,7 +41,7 @@ $default-border-radius: 8px;
font-weight: 700;
}
.mailgo-modal-background {
.m-modal-back {
position: absolute;
z-index: 10001;
top: 0;
@ -52,7 +52,7 @@ $default-border-radius: 8px;
opacity: 0.8;
}
.mailgo-modal-content {
.m-modal-content {
position: relative;
z-index: 10002;
box-sizing: content-box;
@ -75,22 +75,21 @@ $default-border-radius: 8px;
box-shadow: 0px 7px 20px rgba(32, 35, 42, 0.85);
}
.mailgo-title {
.m-title {
margin-bottom: $default-border-radius;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mailgo-details {
.m-details {
margin-bottom: 10px;
}
.mailgo-details p {
p {
font-size: 12px;
margin-top: 3px;
margin-bottom: 3px;
}
}
a {
padding: 10px;
@ -98,63 +97,58 @@ $default-border-radius: 8px;
border-radius: 5px;
text-decoration: none;
&.mailgo-gmail {
&.m-gmail {
color: $gmail-color;
&:hover {
background-color: rgba(212, 70, 56, 0.08);
color: $gmail-color;
}
}
&.mailgo-outlook {
&.m-outlook {
color: $outlook-color;
&:hover {
background-color: rgba(0, 114, 198, 0.08);
color: $outlook-color;
}
&.mailgo-wa {
color: $wa-color;
}
&.mailgo-telegram {
&.m-tg {
color: $telegram-color;
&:hover {
background-color: rgba(0, 114, 198, 0.08);
color: $telegram-color;
}
&.mailgo-skype {
color: $skype-color;
}
&.mailgo-copy {
&.m-wa {
color: $wa-color;
&:hover {
background-color: rgba(0, 191, 165, 0.08);
color: $wa-color;
}
}
&.m-skype {
color: $skype-color;
&:hover {
background-color: rgba(0, 175, 240, 0.08);
color: $skype-color;
}
}
&.m-copy {
padding: 16px 10px;
font-size: 16px;
}
&.mailgo-default:hover,
&.mailgo-copy:hover {
&.m-default:hover,
&.m-copy:hover {
background-color: rgba(0, 0, 0, 0.08);
color: $default-color;
}
&.mailgo-gmail:hover {
background-color: rgba(212, 70, 56, 0.08);
color: $gmail-color;
}
&.mailgo-outlook:hover {
background-color: rgba(0, 114, 198, 0.08);
color: $outlook-color;
}
&.mailgo-telegram:hover {
background-color: rgba(0, 114, 198, 0.08);
color: $telegram-color;
}
&.mailgo-wa:hover {
background-color: rgba(0, 191, 165, 0.08);
color: $wa-color;
}
&.mailgo-skype:hover {
background-color: rgba(0, 175, 240, 0.08);
color: $skype-color;
}
&.mailgo-by {
&.m-by {
font-size: 8px;
margin-top: 0.8rem;
padding: 5px;