.wpcsn-notification .wpcsn-notification-item {
background: #fff;
position: fixed;
z-index: 9999;
display: none;
align-items: center;
width: calc(100% - 60px);
max-width: 450px;
padding: 0;
font-size: 15px;
border-radius: 0;
overflow: hidden;
border: 1px solid #eeeeee;
box-shadow: 0 4px 4px rgba(0, 0, 0, .03);
}
.wpcsn-notification .wpcsn-notification-item a {
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
outline: none;
}
.wpcsn-notification .wpcsn-notification-time {
font-size: 12px;
color: #999999;
}
.wpcsn-notification .wpcsn-notification-thumbnail {
display: inline-block;
width: 80px;
flex: 0 0 80px;
margin: 0;
text-align: center;
}
.wpcsn-notification .wpcsn-notification-thumbnail img {
border-radius: 0;
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
}
.wpcsn-notification .wpcsn-notification-content-wrap {
padding: 10px 30px 10px 10px;
flex-grow: 1;
}
.wpcsn-notification .wpcsn-notification-content-wrap .wpcsn-notification-title a {
display: inline-block;
font-weight: 700;
}
.wpcsn-notification .wpcsn-notification-item.wpcsn-notification-item-new-order .wpcsn-notification-content a, .wpcsn-notification .wpcsn-notification-item.wpcsn-notification-item-virtual-order .wpcsn-notification-content a {
display: inline-block;
font-weight: 700;
}
.wpcsn-notification .wpcsn-notification-item.wpcsn-notification-item-html a {
display: inline-block;
text-decoration: underline;
}
.wpcsn-notification .wpcsn-notification-item.wpcsn-notification-item-cart .wpcsn-cart-subtotal {
font-weight: 700;
}
.wpcsn-notification .wpcsn-notification-close {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
padding: 10px;
cursor: pointer;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXIteCI+PGxpbmUgeDE9IjE4IiB5MT0iNiIgeDI9IjYiIHkyPSIxOCI+PC9saW5lPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjE4IiB5Mj0iMTgiPjwvbGluZT48L3N2Zz4=") center no-repeat;
opacity: .5;
}
.wpcsn-notification .wpcsn-notification-item:after {
content: "";
clear: both;
display: table;
}
.wpcsn-notification.top-left .wpcsn-notification-item {
top: 30px;
left: 30px;
}
.wpcsn-notification.bottom-left .wpcsn-notification-item {
bottom: 30px;
left: 30px;
}
.wpcsn-notification.top-right .wpcsn-notification-item {
top: 30px;
right: 30px;
}
.wpcsn-notification.bottom-right .wpcsn-notification-item {
bottom: 30px;
right: 30px;
}
.wpcsn-notification-item.bounceIn {
animation-duration: 1s;
animation-name: wpcsnBounceIn;
}
.wpcsn-notification-item.bounceInUp {
animation-duration: 1.5s;
animation-name: wpcsnBounceInUp;
}
.wpcsn-notification-item.bounceInDown {
animation-duration: 1s;
animation-name: wpcsnBounceInDown;
}
.wpcsn-notification-item.bounceInLeft {
animation-duration: 1s;
animation-name: wpcsnBounceInLeft;
}
.wpcsn-notification-item.bounceInRight {
animation-duration: 1s;
animation-name: wpcsnBounceInRight;
}
.wpcsn-notification-item.bounceOut {
animation-duration: 1.5s;
animation-name: wpcsnBounceOut;
opacity: 0;
}
.wpcsn-notification-item.bounceOutUp {
animation-duration: 1.5s;
animation-name: wpcsnBounceOutUp;
opacity: 0;
}
.wpcsn-notification-item.bounceOutDown {
animation-duration: 1.5s;
animation-name: wpcsnBounceOutDown;
opacity: 0;
}
.wpcsn-notification-item.bounceOutLeft {
animation-duration: 1.5s;
animation-name: wpcsnBounceOutLeft;
opacity: 0;
}
.wpcsn-notification-item.bounceOutRight {
animation-duration: 1.5s;
animation-name: wpcsnBounceOutRight;
opacity: 0;
}
@media only screen and (max-width: 480px) {
.wpcsn-notification .wpcsn-notification-item {
width: calc(100% - 30px);
left: 15px;
right: 15px;
}
.wpcsn-notification.bottom-left .wpcsn-notification-item, .wpcsn-notification.bottom-right .wpcsn-notification-item {
bottom: 15px;
}
.wpcsn-notification.top-left .wpcsn-notification-item, .wpcsn-notification.top-right .wpcsn-notification-item {
bottom: 15px;
}
} @keyframes wpcsnBounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
} @keyframes wpcsnBounceInUp {
40%, 60%, 75%, 90%, 100% {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0%, 40% {
opacity: 0;
transform: translate3d(0, 100px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
} @keyframes wpcsnBounceInDown {
40%, 60%, 75%, 90%, 100% {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0%, 40% {
opacity: 0;
transform: translate3d(0, -100px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: none;
}
} @keyframes wpcsnBounceInLeft {
40%, 60%, 75%, 90%, 100% {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0%, 40% {
opacity: 0;
transform: translate3d(-100px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
100% {
transform: none;
}
} @keyframes wpcsnBounceInRight {
40%, 60%, 75%, 90%, 100% {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0%, 40% {
opacity: 0;
transform: translate3d(100px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
100% {
transform: none;
}
} @keyframes wpcsnBounceOut {
0% {
opacity: 1;
}
20% {
transform: scale3d(0.9, 0.9, 0.9);
}
50%, 55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
100% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
} @keyframes wpcsnBounceOutUp {
0% {
opacity: 1;
}
20% {
opacity: 1;
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 0.5;
transform: translate3d(0, 20px, 0);
}
80%, 100% {
opacity: 0;
transform: translate3d(0, -50px, 0);
}
}
@keyframes wpcsnBounceOutDown {
0% {
opacity: 1;
}
20% {
opacity: 1;
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 0.5;
transform: translate3d(0, -20px, 0);
}
80%, 100% {
opacity: 0;
transform: translate3d(0, 50px, 0);
}
} @keyframes wpcsnBounceOutLeft {
0% {
opacity: 1;
}
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
40%, 100% {
opacity: 0;
transform: translate3d(-100px, 0, 0);
}
} @keyframes wpcsnBounceOutRight {
0% {
opacity: 1;
}
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
40%, 100% {
opacity: 0;
transform: translate3d(100px, 0, 0);
}
}