welcome to dark mode!

This commit is contained in:
Matteo Manzinello 2020-07-03 19:24:22 +02:00
parent eb28125f51
commit 36b6dc5111
7 changed files with 52 additions and 12 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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

@ -122,7 +122,7 @@ module.exports = JSON.parse("{\"a\":[\"en\",\"it\"],\"b\":{\"en\":{\"open_in\":\
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}.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,114,198,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:8px;margin-top:0.8rem;padding:5px;color:#4a4a4a;opacity:0.5}.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:white;background-color:#20232a}.m-modal.m-dark .m-modal-content a{color:white}\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}.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:8px;margin-top:0.8rem;padding:5px;color:#4a4a4a}.m-modal .m-modal-content a.m-by:hover{color:#4a4a4a}.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
module.exports = exports;

File diff suppressed because one or more lines are too long

View File

@ -10,6 +10,13 @@ $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;
// other vars
$default-border-radius: 20px;
@ -49,7 +56,7 @@ $default-border-radius: 20px;
right: 0;
bottom: 0;
left: 0;
background-color: rgb(32, 35, 42);
background-color: #20232a;
opacity: 0.8;
}
@ -116,7 +123,7 @@ $default-border-radius: 20px;
&.m-tg {
color: $telegram-color;
&:hover {
background-color: rgba(0, 114, 198, 0.08);
background-color: rgba(0, 136, 204, 0.08);
color: $telegram-color;
}
}
@ -153,9 +160,8 @@ $default-border-radius: 20px;
margin-top: 0.8rem;
padding: 5px;
color: $default-color;
opacity: 0.5;
&:hover {
opacity: 1;
color: $default-color;
}
}
}
@ -167,10 +173,44 @@ $default-border-radius: 20px;
&.m-dark {
.m-modal-content {
color: white;
color: #fff;
background-color: #20232a;
a {
color: white;
color: $default-dark-color;
&:hover {
color: #fff;
}
&.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;
}
}
}
}
}