@keyframes wpra-plus-one-anim {
from {
top: 10px;
opacity: 1;
}
to {
top: -50px;
font-size: 26px;
}
}
.wpra-plugin-container {
opacity: 0;
}
.wpra-plugin-container.wpra-rendered {
opacity: 1;
}
.wpra-reactions-container { display: flex;
flex-direction: column;
align-items: center;
}
.wpra-call-to-action {
font-size: 18px;
color: #000;
font-weight: bold;
text-align: center;
line-height: 1.2;
max-width: 100%;
margin-bottom: 35px;
text-decoration: none;
-webkit-user-select: none;
}
.wpra-plugin-container .wpra-reaction .wpra-reaction-static-holder {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 100%;
height: 100%;
}
.wpra-plugin-container .wpra-reactions-container .wpra-reactions {
background: #ffffff;
display: flex;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50px;
-webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.45);
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.45);
}
.wpra-plugin-container .wpra-reactions-container .wpra-reactions > .wpra-reaction.emoji-hidden {
display: none;
}
.wpra-plugin-container .wpra-reactions > .wpra-reaction {
display: inline-block;
margin: 0;
cursor: pointer;
position: relative;
padding: 2px;
}
.size-small .wpra-reaction {
width: 50px;
height: 50px;
}
.size-small .wpra-reaction > .wpra-arrow-badge {
top: -16px;
}
.size-medium .wpra-reaction {
width: 60px;
height: 60px;
}
.size-medium .wpra-reaction > .wpra-arrow-badge {
top: -13px;
}
.size-large .wpra-reaction {
width: 90px;
height: 90px;
}
.size-large .wpra-reaction > .wpra-arrow-badge {
top: -15px;
min-width: 32px;
height: 18px;
line-height: 18px;
font-size: 14px;
}
.wpra-reactions-container .size-xlarge .wpra-reaction {
width: 110px;
height: 110px;
}
.wpra-reactions-container .size-xlarge .wpra-reaction > .wpra-arrow-badge {
top: -17px;
min-width: 40px;
height: 20px;
line-height: 20px;
font-size: 18px;
}
.wpra-reaction .wpra-arrow-badge.hide-count {
display: none;
}
.wpra-narrow-container .wpra-reaction .wpra-reaction-static-holder {
width: 100%;
height: 100%;
}
.wpra-narrow-container .wpra-static-emojis.wpra-reactions > .wpra-reaction {
padding: 5px;
}
.wpra-narrow-container .wpra-reactions .wpra-reaction {
margin: 0;
}
.wpra-reactions-wrap {
display: flex;
clear: both;
padding-top: 30px;
padding-bottom: 30px;
}
.wpra-reactions-wrap * {
box-sizing: border-box;
word-break: normal;
word-wrap: normal;
}
.wpra-button-reveal-wrap .wpra-reactions-wrap {
padding-top: 0;
padding-bottom: 10px;
}
.wpra-reaction.active {
-webkit-transform: scale( 1.15) translate(0, -4px);
transform: scale( 1.15) translate(0, -4px);
}
.wpra-reaction.active:before {
opacity: 1;
}
.wpra-reactions-container .wpra-reaction img {
width: 100%;
vertical-align: middle;
}
.wpra-reaction::before {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #fff;
background: rgba(0, 0, 0, .75);
display: inline-block;
font-weight: bold;
padding: 0 6px;
border-radius: 10px;
box-sizing: border-box;
position: absolute;
line-height: 18px;
max-width: 100%;
overflow: hidden;
top: -10px;
left: 50%;
opacity: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: opacity 50ms ease;
transition: opacity 50ms ease;
text-decoration: none;
text-overflow: ellipsis;
-webkit-user-select: none;
}
.wpra-reaction:hover {
-webkit-transform: scale( 1.15) translate(0, -4px);
transform: scale( 1.15) translate(0, -4px);
transition: 0.5s all;
-webkit-transition: 0.5s all;
}
.wpra-reaction:active {
-webkit-transform: scale( 1.15) translate(0, -4px);
transform: scale( 1.15) translate(0, -4px);
transition: 0.5s all;
-webkit-transition: 0.5s all;
}
.wpra-reaction:hover::before {
opacity: 1;
}
.wpra-plugin-container .wpra-share-wrap a.share-btn {
color: #333 ;
text-decoration: none !important;
text-align: center;
}
.wpra-plugin-container .wpra-share-wrap { background: rgba(0, 0, 0, 0);
margin-top: 20px;
justify-content: center;
display: none;
flex-wrap: nowrap;
}
.wpra-plugin-container .wpra-share-wrap a.share-btn {
display: flex;
align-items: center;
flex-direction: row;
font-family: Arial, Helvetica, sans-serif;
margin: 0 5px;
padding: 4px 13px;
border-radius: 30px;
color: #fff;
background-color: #fff;
cursor: pointer;
font-weight: bold;
font-size: 14px;
line-height: 10px;
text-decoration: none;
transition: box-shadow 0.3s;
}
.wpra-plugin-container .wpra-share-popup .wpra-share-wrap a.share-btn {
flex-direction: column;
}
.wpra-plugin-container .wpra-share-wrap a.share-btn .share-btn-icon {
margin-right: 7px;
display: inline-block;
width: 23px;
height: 23px;
}
.wpra-plugin-container .wpra-share-wrap.wpra-share-wrap-narrow {
flex-wrap: wrap;
}
.wpra-plugin-container .wpra-share-wrap.wpra-share-wrap-narrow a.share-btn {
margin-bottom: 10px;
}
.wpra-plugin-container .wpra-share-wrap.wpra-share-wrap-narrow a.share-btn .share-btn-icon {
margin-right: 0;
}
.wpra-plugin-container .wpra-share-wrap-narrow .share-btn span:last-child {
display: none;
}
.wpra-plugin-container .wpra-share-popup .wpra-share-wrap a.share-btn .share-btn-icon {
width: 84px;
height: 84px;
border-radius: 50%;
padding: 1rem;
margin-bottom: 1rem;
margin-right: 0;
}
.wpra-plugin-container .wpra-share-wrap a.share-btn-facebook {
border: 2px solid #3b5998;
}
.wpra-plugin-container .wpra-share-wrap a.share-btn-twitter {
border: 2px solid #00acee;
}
.wpra-plugin-container .wpra-share-wrap a.share-btn-email {
border: 2px solid #424242;
}
.wpra-plugin-container .wpra-share-wrap a.share-btn-telegram {
border: 2px solid #0088cc;
}
.wpra-plugin-container .wpra-share-buttons-bordered a.share-btn {
background-color: #fff;
}
.wpra-plugin-container .wpra-share-buttons-solid a.share-btn-facebook {
background-color: #3b5998;
}
.wpra-plugin-container .wpra-share-buttons-solid a.share-btn-twitter {
background-color: #00acee;
}
.wpra-plugin-container .wpra-share-buttons-solid a.share-btn-email {
background-color: #424242;
}
.wpra-plugin-container .wpra-share-buttons-solid a.share-btn-telegram {
background-color: #0088cc;
}
.wpra-plugin-container .wpra-share-buttons-bordered a.share-btn-facebook {
color: #3b5998;
}
.wpra-plugin-container .wpra-share-buttons-bordered a.share-btn-twitter {
color: #00acee;
}
.wpra-plugin-container .wpra-share-buttons-bordered a.share-btn-email {
color: #424242;
}
.wpra-plugin-container .wpra-share-buttons-bordered a.share-btn-telegram {
color: #0088cc;
}
.wpra-plugin-container .wpra-share-wrap.custom-buttons a.share-btn:hover {
opacity: 0.8;
}
.wpra-plugin-container .custom-buttons a.share-btn {
box-shadow: none;
}
.wpra-plugin-container .wpra-share-wrap a.share-btn img {
margin-right: 4px;
display: inline-block;
width: 100%;
} .wpra-arrow-badge {
text-align: center;
min-width: 27px;
height: 16px;
background-color: #dc3545;
position: absolute;
border-radius: 3px;
color: #fff;
font-size: 12px;
line-height: 16px;
font-weight: 500;
font-family: monospace, sans-serif;
padding: 0 2px;
z-index: 2;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.wpra-arrow-badge > .tail {
content: "";
display: block;
border-width: 20px 20px 0;
border-style: solid;
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #dc3545;
}
.btn-buy-now {
display: inline-block;
background-color: #9F55FF;
border-color: #9F55FF;
color: #fff;
padding: 0.15rem 0.75rem;
border-radius: 5px;
transition: all 0.5s;
font-weight: 500;
}
.btn-buy-now:hover {
color: #fff;
background-color: #892fff;
border-color: #8222ff;
}
.wpra-plus-one {
visibility: hidden;
opacity: 0;
position: absolute; color: #000;
z-index: 9999;
padding: 2px 7px;
border-radius: 50%;
font-size: 16px;
font-weight: 500;
top: 10px;
right: 0;
}
.wpra-plus-one.triggered {
visibility: visible;
animation: wpra-plus-one-anim 2.5s;
}
.wpra-plugin-container .wpra-reactions > .wpra-reaction.wpra-pad-fix {
padding: 6px;
}
@media only screen and (max-width: 768px) {
.wpra-reactions-container {
width: 100%;
}
.wpra-share-wrap .share-btn {
position: relative;
text-align: center;
margin: 0 3px;
padding: 10px 14px;
flex-basis: 0;
flex-grow: 1;
}
.share-btn i {
margin-right: 0;
}
.share-btn span {
display: none;
}
.wpra-plugin-container .wpra-share-wrap {
justify-content: flex-start;
}
.wpra-plugin-container .wpra-share-wrap a.share-btn {
border-radius: 5px !important;
padding: 4px;
width: calc(33.333% - 0.5rem);
flex-basis: calc(33.333% - 0.5rem);
flex-grow: unset;
}
.wpra-plugin-container .wpra-share-wrap a.share-btn .share-btn-icon {
margin-right: 0;
}
}