MediaWiki:Wikia.css/plus.css

/**
 * Keyframes

@-webkit-keyframes rotate-like{ 0%{-webkit-transform: rotate(-2deg);} 15%{-webkit-transform: rotate(0deg);} 35%{-webkit-transform: rotate(-2deg);} 100%{-webkit-transform: rotate(-2deg);} }

@-moz-keyframes rotate-like{ 0%{-moz-transform: rotate(-2deg);} 15%{-moz-transform: rotate(0deg);} 35%{-moz-transform: rotate(-2deg);} 100%{-moz-transform: rotate(-2deg);} }

@-webkit-keyframes rotate-plus{ 0%{-webkit-transform: rotate(-1deg); top: 0;} 15%{-webkit-transform: rotate(-1deg); top: -7px;} 30%{-webkit-transform: rotate(-1deg); top: 0;} 50%{-webkit-transform: rotate(2deg); top: 0;} 70%{-webkit-transform: rotate(2deg); top: 0;} 100%{-webkit-transform: rotate(-1deg); top: 0;} }

@-moz-keyframes rotate-plus{ 0%{-moz-transform: rotate(-1deg); top: 0;} 15%{-moz-transform: rotate(-1deg); top: -7px;} 30%{-moz-transform: rotate(-1deg); top: 0;} 50%{-moz-transform: rotate(2deg); top: 0;} 70%{-moz-transform: rotate(2deg); top: 0;} 100%{-moz-transform: rotate(-1deg); top: 0;} }

@-webkit-keyframes like-arm-left{ 0%{-webkit-transform: rotate(10deg); margin-top: 81px;} 15%{-webkit-transform: rotate(0deg); margin-top: 81px;} 35%{-webkit-transform: rotate(10deg); margin-top: 81px;} 45%{margin-top: 65px;} 60%{margin-top: 81px;} 100%{-webkit-transform: rotate(10deg); margin-top: 81px;} }

@-moz-keyframes like-arm-left{ 0%{-moz-transform: rotate(10deg); margin-top: 81px;} 15%{-moz-transform: rotate(0deg); margin-top: 81px;} 35%{-moz-transform: rotate(10deg); margin-top: 81px;} 45%{margin-top: 65px;} 60%{margin-top: 81px;} 100%{-moz-transform: rotate(10deg); margin-top: 81px;} }

@-webkit-keyframes like-arm-right{ 0%{-webkit-transform: rotate(-10deg); margin-top: 65px;} 15%{-webkit-transform: rotate(0deg); margin-top: 65px;} 35%{-webkit-transform: rotate(-10deg); margin-top: 65px;} 45%{margin-top: 50px;} 60%{margin-top: 65px;} 100%{-webkit-transform: rotate(-10deg); margin-top: 65px;} }

@-moz-keyframes like-arm-right{ 0%{-moz-transform: rotate(-10deg); margin-top: 65px;} 15%{-moz-transform: rotate(0deg); margin-top: 65px;} 35%{-moz-transform: rotate(-10deg); margin-top: 65px;} 45%{margin-top: 50px;} 60%{margin-top: 65px;} 100%{-moz-transform: rotate(-10deg); margin-top: 65px;} }

@-webkit-keyframes plus-arm-left{ 0%{-webkit-transform: rotate(0deg);} 10%{-webkit-transform: rotate(10deg); margin-top: 55px;} 30%{-webkit-transform: rotate(0deg); margin-top: 65px;} }

@-moz-keyframes plus-arm-left{ 0%{-moz-transform: rotate(0deg);} 10%{-moz-transform: rotate(10deg); margin-top: 55px;} 30%{-moz-transform: rotate(0deg); margin-top: 65px;} }

@-webkit-keyframes plus-arm-right{ 0%{margin-top: 64px;} 10%{margin-top: 70px;} 30%{margin-top: 64px;} 100%{margin-top: 64px;} }

@-moz-keyframes plus-arm-right{ 0%{margin-top: 64px;} 10%{margin-top: 70px;} 30%{margin-top: 64px;} 100%{margin-top: 64px;} }

.like, .plus{ width: 50%; position: relative; width: 412px; height: 162px; }

/* Common elements */

.body{ width: 410px; height: 160px; }

.left-leg{ position: absolute; z-index: 90; bottom: 35px; left: 144px; }

.right-leg{ position: absolute; z-index: 90; bottom: 35px; right: 144px; }

.leg{ width: 10px; height: 70px; background-color: #000; position: absolute; }

.foot{ width: 35px; height: 12px; border-radius: 5px; background-color: #000; position: absolute; top: 70px; }

.left-leg > .foot{ left: -21px; }

.right-leg > .foot{ left: -4px; }

.left-eye-border{ width: 88px; height: 88px; padding: 3px 2px 2px 6px; background-image: -webkit-linear-gradient(240deg, transparent 27%, #fff 27%); background-image: -moz-linear-gradient(240deg, transparent 27%, #fff 27%); position: absolute; bottom: 14px; left: 20px; border-radius: 50%; }

.left-eye{ width: 85px; height: 85px; border-radius: 50%; background-image: -webkit-linear-gradient(240deg, transparent 30%, #000 30%); background-image: -moz-linear-gradient(240deg, transparent 30%, #000 30%); position: absolute; bottom: 18px; left: 26px; }

.right-eye-border{ width: 88px; height: 88px; padding: 3px 3px 3px 4px; background-image: -webkit-linear-gradient(-60deg, transparent 27%, #fff 27%); background-image: -moz-linear-gradient(-60deg, transparent 27%, #fff 27%); position: absolute; bottom: 14px; right: 20px; border-radius: 50%; }

.right-eye{ width: 85px; height: 85px; border-radius: 50%; background-image: -webkit-linear-gradient(-60deg, transparent 30%, #000 30%); background-image: -moz-linear-gradient(-60deg, transparent 30%, #000 30%); position: absolute; bottom: 18px; right: 26px; }

.small-circle, .big-circle{ border-radius: 50%; position: absolute; background-color: #fff; }

.small-circle{width: 5px; height: 5px;} .big-circle{width: 20px; height: 20px;}

.left-arm, .right-arm{ position: absolute; }

.left-arm{ margin-left: -34px; margin-top: 65px; }

.right-arm{ margin-left: 400px; margin-top: 81px; }

.left-arm .arm{ width: 30px; height: 30px; border-bottom-left-radius: 100%; border-left: 10px solid black; border-bottom: 10px solid black; }

.right-arm .arm{ width: 30px; height: 30px; border-bottom-right-radius: 100%; border-right: 10px solid black; border-bottom: 10px solid black; }

.glove{ width: 35px; height: 35px; border-radius: 50%; position: absolute; }

.glove{ top: -32px; left: -16px; }

.glove:before{ content: ""; width: 15px; height: 15px; border-radius: 50%; position: absolute; bottom: -5px; left: 12px; }

.glove:after{ content: ""; width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 4px; left: 11px; background: rgba(255, 255, 255, .3); }

.plus > .body{ background-image: -webkit-linear-gradient(top, #f1f1f1, #c9c9c9); background-image: -moz-linear-gradient(top, #f1f1f1, #c9c9c9); border-radius: 5px; z-index: 100; position: absolute; text-align: center; -webkit-animation: rotate-plus 2s infinite; -moz-animation: rotate-plus 2s infinite; }

.plus > .body span{ color: #2f79ed; font: bold 82px Arial; line-height: 115px; }

.plus > .body > .header{ width: 410px; height: 47px; border-top-left-radius: 5px; border-top-right-radius: 5px; background-image: -webkit-linear-gradient(left, #e32c3b 25%, #148ee3 25%, #148ee3 50%, #36c520 50%, #36c520 75%, #ffd041 75%); background-image: -moz-linear-gradient(left, #e32c3b 25%, #148ee3 25%, #148ee3 50%, #36c520 50%, #36c520 75%, #ffd041 75%); position: relative; }

.plus > .body > .header:before{ content: ""; width: 7px; height: 50px; background-color: #e32c3b; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position: absolute; top: 23px; left: 15px; }

.plus > .body > .header:after{ content: ""; width: 7px; height: 30px; background-color: #e32c3b; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position: absolute; top: 31px; left: 27px; } .plus .left-eye{left: 35px;} .plus .right-eye{right: 35px;} .plus .small-circle{	bottom: 20px; left: 35px;} .plus .big-circle{bottom: 25px; left: 15px;} .plus .glove{background: #e32c3b;} .plus .glove:before{background: #e32c3b;} .plus .left-arm{ -webkit-animation: plus-arm-left 2s infinite; -moz-animation: plus-arm-left 2s infinite; } .plus .right-arm { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -webkit-animation: plus-arm-right 2s infinite; -moz-animation: plus-arm-right 2s infinite; } .plus .right-arm .glove{ top: 20px; left: -37px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); }

.plus .glove:after{ left: 4px; }

.plus .indentation{ width: 47px; height: 15px; overflow: hidden; position: absolute; bottom: 11px; right: 52px; }

.plus .indentation > .indentation-content{ width: 80px; height: 80px; background-color: #cecece; border-radius: 50%; margin-left: -11px; }

.plus .indentation > .indentation-content >.duble-border{ width:70px; height: 70px; border: 3px solid #dbdbdb; background-color: #cccccc; border-radius: 50%; position: relative; top: 5px; left: 2px; }

.plus .smile{ border-style: solid; border-width: 7px 36px; border-color: transparent #fff transparent transparent; position: absolute; bottom: 10px; right: 125px; }

.plus .smile:after{ content: ""; border-style: solid; border-width: 9px; border-color: transparent #cecece transparent transparent; position: absolute; top: -9px; right: -38px; }

.plus .smile:before{ content: "-"; color: #cecece; position: absolute; top: -11px; right: -31px; }