.layout {
border: 1px solid {{design.borderColor.toColor()}};
}
.background {
background-color: {{design.bgColor.toColor()}};
opacity: {{design.bgAlpha}};
}
.gradient .background {
background-image: -moz-linear-gradient(top, white, {{design.bgColor.toColor()}});
background-image: -ms-linear-gradient(top, white, {{design.bgColor.toColor()}});
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from({{design.bgColor.toColor()}}), to(white));
background-image: -webkit-linear-gradient(top, white, {{design.bgColor.toColor()}});
background-image: linear-gradient(to bottom, white, {{design.bgColor.toColor()}});
}
.footer {
background-color:{{design.bgColorAlt.toColor()}};
}
.gradient .button {
background-image: -moz-linear-gradient(top, {{design.btnColor.toColor()}}, rgba(0, 0, 0, 0.5));
background-image: -ms-linear-gradient(top, {{design.btnColor.toColor()}}, rgba(0, 0, 0, 0.5));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.5)), to({{design.btnColor.toColor()}}));
background-image: -webkit-linear-gradient(top, {{design.btnColor.toColor()}}, rgba(0, 0, 0, 0.5));
background-image: linear-gradient(to bottom, {{design.btnColor.toColor()}}, rgba(0, 0, 0, 0.5));
}
.gradient .button:hover {
background-image: -moz-linear-gradient(top, {{design.btnRollColor.toColor()}}, rgba(0, 0, 0, 0.5));
background-image: -ms-linear-gradient(top, {{design.btnRollColor.toColor()}}, rgba(0, 0, 0, 0.5));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.5)), to({{design.btnRollColor.toColor()}}));
background-image: -webkit-linear-gradient(top, {{design.btnRollColor.toColor()}}, rgba(0, 0, 0, 0.5));
background-image: linear-gradient(to bottom, {{design.btnRollColor.toColor()}}, rgba(0, 0, 0, 0.5));
}
.image .background {
background-image: url({{design.bgImageUrl}});
}
.layout .button {
background-color: {{design.btnColor.toColor()}};
color: {{design.txtColorCta.toColor()}};
}
.layout .button.text {
color: {{design.txtColorCta.toColor()}};
}
.layout .button:hover {
background-color: {{design.btnRollColor.toColor()}};
}
.layout .button.text:hover {
background: none;
color: {{design.btnRollColor.toColor()}};
}
.product-content:hover {
-moz-box-shadow: 0 0 4px {{design.glowColor.toColor()}};
-webkit-box-shadow: 0 0 4px {{design.glowColor.toColor()}};
box-shadow: 0 0 4px {{design.glowColor.toColor()}};
}
.productName {
font-size: {{design.nameSize}}px;
}
.productPrice {
font-size: {{design.priceSize}}px;
}
.headline {
color: {{design.txtColorTitle.toColor()}};
font-size: {{design.headlineSize}}px;
}
.productDetails {
background-color: {{convertTooLightColorsToBlack(design.txtColorPrice)}};
}