a bit more light...

dist/mailgo.min.css

@@ -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}

src/mailgo.js

@@ -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.id = "m-title";
-      title.className = "mailgo-title";
+      title.className = "m-title";
       modalContent.appendChild(title);
 
       // details
       let details = document.createElement("div");
-      details.id = "mailgo-details";
+      details.id = "m-details";
-      details.className = "mailgo-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("m-open");
-      gmail.classList.add("mailgo-gmail");
+      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("m-open");
-      outlook.classList.add("mailgo-outlook");
+      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("m-open");
-      open.classList.add("mailgo-default");
+      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.id = "m-tel-title";
-      titleTel.className = "mailgo-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("m-open");
-      telegram.classList.add("mailgo-telegram");
+      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("m-open");
-      wa.classList.add("mailgo-wa");
+      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("m-open");
-      skype.classList.add("mailgo-skype");
+      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("m-open");
-      call.classList.add("mailgo-default");
+      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");

src/mailgo.scss

@@ -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;
-    }
+      p {
-
-    .mailgo-details 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,
+      &.m-default:hover,
-      &.mailgo-copy:hover {
+      &.m-copy:hover {
         background-color: rgba(0, 0, 0, 0.08);
         color: $default-color;
       }
 
-      &.mailgo-gmail:hover {
+      &.m-by {
-        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 {
         font-size: 8px;
         margin-top: 0.8rem;
         padding: 5px;