odit
/
mailymaily
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

colors also in dark mode, as suggested in #41

This commit is contained in:
Matteo Manzinello 2020-07-23 12:44:39 +02:00
parent cd0f047ac0
commit ffb5ebb918
7 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/mailgo.dark.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.dark.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mailgo.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
lib/mailgo.js
View File

@ -122,7 +122,7 @@ module.exports = JSON.parse("{\"languages\":[\"en\",\"it\",\"es\",\"de\"],\"tran
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3);
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, ".m-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.m-modal p,.m-modal span,.m-modal strong,.m-modal a{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\";text-rendering:optimizeLegibility}.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:#20232a;opacity:0.8}.m-modal .m-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:0.95;border-radius:20px;box-shadow:0 3px 20px rgba(32,35,42,0.5);color:#4a4a4a;display:flex;flex-direction:column;overflow:auto;padding:24px;transition:0.5s box-shadow}.m-modal .m-modal-content:hover{opacity:1}.m-modal .m-modal-content .m-title{margin-bottom:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2em}.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;border-radius:20px;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,0.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,0.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,136,204,0.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,0.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,0.08);color:#00aff0}.m-modal .m-modal-content a.m-copy{padding:16px 10px;font-size:16px}.m-modal .m-modal-content a.m-default:hover,.m-modal .m-modal-content a.m-copy:hover{background-color:rgba(0,0,0,0.08);color:#4a4a4a}.m-modal .m-modal-content a.m-by{font-size:9px;margin-top:0.8rem;padding:5px;color:#4a4a4a;opacity:0.55}.m-modal .m-modal-content a.m-by:hover{opacity:1}.m-modal .m-modal-content .w-500{font-weight:500}.m-modal.m-dark .m-modal-content{color:#fff;background-color:#20232a}.m-modal.m-dark .m-modal-content a{color:#bbb}.m-modal.m-dark .m-modal-content a:hover{color:#fff}.m-modal.m-dark .m-modal-content a.m-gmail:hover{color:#faeceb}.m-modal.m-dark .m-modal-content a.m-outlook:hover{color:#e5f0f9}.m-modal.m-dark .m-modal-content a.m-tg:hover{color:#e5f3f9}.m-modal.m-dark .m-modal-content a.m-wa:hover{color:#e5f8f6}.m-modal.m-dark .m-modal-content a.m-skype:hover{color:#e5f7fd}\n", ""]);
exports.push([module.i, ".m-modal{position:fixed;top:0;right:0;bottom:0;left:0;justify-content:center;align-items:center;flex-direction:column;overflow:hidden;font-size:15px;z-index:10000}.m-modal p,.m-modal span,.m-modal strong,.m-modal a{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\";text-rendering:optimizeLegibility}.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:#20232a;opacity:0.8}.m-modal .m-modal-content{position:relative;z-index:10002;box-sizing:content-box;text-align:center;min-width:200px;max-width:240px;background-color:#fff;opacity:0.95;border-radius:20px;box-shadow:0 3px 20px rgba(32,35,42,0.5);color:#4a4a4a;display:flex;flex-direction:column;overflow:auto;padding:24px;transition:0.5s box-shadow}.m-modal .m-modal-content:hover{opacity:1}.m-modal .m-modal-content .m-title{margin-bottom:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2em}.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;border-radius:20px;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,0.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,0.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,136,204,0.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,0.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,0.08);color:#00aff0}.m-modal .m-modal-content a.m-copy{padding:16px 10px;font-size:16px}.m-modal .m-modal-content a.m-default:hover,.m-modal .m-modal-content a.m-copy:hover{background-color:rgba(0,0,0,0.08);color:#4a4a4a}.m-modal .m-modal-content a.m-by{font-size:9px;margin-top:0.8rem;padding:5px;color:#4a4a4a;opacity:0.55}.m-modal .m-modal-content a.m-by:hover{opacity:1}.m-modal .m-modal-content .w-500{font-weight:500}.m-modal.m-dark .m-modal-content{background-color:#20232a}.m-modal.m-dark .m-modal-content,.m-modal.m-dark .m-modal-content p,.m-modal.m-dark .m-modal-content p span,.m-modal.m-dark .m-modal-content strong{color:#fff}.m-modal.m-dark .m-modal-content a,.m-modal.m-dark .m-modal-content a:hover{color:#eaeaea}.m-modal.m-dark .m-modal-content a.m-gmail,.m-modal.m-dark .m-modal-content a.m-gmail:hover{color:#e07d73}.m-modal.m-dark .m-modal-content a.m-outlook,.m-modal.m-dark .m-modal-content a.m-outlook:hover{color:#4c9cd7}.m-modal.m-dark .m-modal-content a.m-tg,.m-modal.m-dark .m-modal-content a.m-tg:hover{color:#4cabdb}.m-modal.m-dark .m-modal-content a.m-wa,.m-modal.m-dark .m-modal-content a.m-wa:hover{color:#4cd2c0}.m-modal.m-dark .m-modal-content a.m-skype,.m-modal.m-dark .m-modal-content a.m-skype:hover{color:#4cc7f4}\n", ""]);
// Exports
module.exports = exports;

2
lib/mailgo.js.map
View File

File diff suppressed because one or more lines are too long

29
src/mailgo.scss
View File

@ -10,12 +10,12 @@ $wa-color: #00bfa5;
$telegram-color: #0088cc;
$skype-color: #00aff0;
$default-dark-color: #bbbbbb;
$gmail-dark-color: #faeceb;
$outlook-dark-color: #e5f0f9;
$wa-dark-color: #e5f8f6;
$telegram-dark-color: #e5f3f9;
$skype-dark-color: #e5f7fd;
$default-dark-color: #eaeaea;
$gmail-dark-color: #e07d73;
$outlook-dark-color: #4c9cd7;
$wa-dark-color: #4cd2c0;
$telegram-dark-color: #4cabdb;
$skype-dark-color: #4cc7f4;
// other vars
$default-border-radius: 20px;
@ -175,40 +175,49 @@ $default-border-radius: 20px;
&.m-dark {
.m-modal-content {
color: #fff;
background-color: #20232a;
&,
& p,
& p span,
& strong {
color: #fff;
}
a {
color: $default-dark-color;
&,
&:hover {
color: #fff;
color: $default-dark-color;
}
&.m-gmail {
&,
&:hover {
color: $gmail-dark-color;
}
}
&.m-outlook {
&,
&:hover {
color: $outlook-dark-color;
}
}
&.m-tg {
&,
&:hover {
color: $telegram-dark-color;
}
}
&.m-wa {
&,
&:hover {
color: $wa-dark-color;
}
}
&.m-skype {
&,
&:hover {
color: $skype-dark-color;
}