From 7e1410479bef7cec778baa69ae750707b7d8bb06 Mon Sep 17 00:00:00 2001 From: "@OliverRedman" Date: Wed, 17 Feb 2021 15:20:52 +0000 Subject: [PATCH] neumorphism light mode --- src/mailgo.neumorphism.scss | 74 +++++++++++++++++++++++++++++++++++-- 1 file changed, 71 insertions(+), 3 deletions(-) diff --git a/src/mailgo.neumorphism.scss b/src/mailgo.neumorphism.scss index ce9b1591..916e9d63 100644 --- a/src/mailgo.neumorphism.scss +++ b/src/mailgo.neumorphism.scss @@ -1,11 +1,79 @@ @import "mailgo.scss"; +$default-color: #4a4a4a; +$gmail-color: #c2564d; +$outlook-color: #3178aa; +$yahoo-color: #6b429b; +$wa-color: #257268; +$telegram-color: #2c789e; +$skype-color: #2e748d; + +$default-color-hover: #3d3d3d; + +$default-dark-color: #eaeaea; +$gmail-dark-color: #e07d73; +$outlook-dark-color: #4c9cd7; +$yahoo-dark-color: #ac88d3; +$wa-dark-color: #4cd2c0; +$telegram-dark-color: #4cabdb; +$skype-dark-color: #4cc7f4; + .m-modal-content { + opacity: 0.95; box-shadow: 20px 20px 50px rgba(32, 35, 42, 0.5), -30px -30px 60px rgba(32, 35, 42, 0.5); a { - box-shadow: 20px 20px 50px rgba(32, 35, 42, 0.5), - -30px -30px 60px rgba(32, 35, 42, 0.5); - margin-bottom: 10px; + background: #e3e3e3; + box-shadow: 8px 8px 16px #c1c1c1, -8px -8px 16px #ffffff; + margin: 10px 0px; + } + a.m-by { + color: #4a4a4a; + } +} + +.m-modal { + .m-modal-content { + a.m-gmail, + a.m-outlook, + a.m-yahoo, + a.m-tg, + a.m-wa, + a.m-skype, + a.m-default, + a.m-copy, + a.m-by { + &:hover { + border-radius: 39px; + background: #e3e3e3; + box-shadow: inset 5px 5px 10px #bababa, inset -5px -5px 10px #ffffff; + } + &:focus { + border-radius: 39px; + background: #e3e3e3; + box-shadow: inset 5px 5px 10px #bababa, inset -5px -5px 10px #ffffff; + } + &:active { + border-radius: 39px; + background: #e3e3e3; + box-shadow: inset 5px 5px 10px #bababa, inset -5px -5px 10px #ffffff; + } + } + background: #e3e3e3; + opacity: 0.95; + &:hover, + &:focus, + &:active { + opacity: 0.95; + } + a.m-gmail { + color: $gmail-color; + } + a.m-outlook { + color: $outlook-color; + } + a.m-yahoo { + color: $yahoo-color; + } } }