/*BACK*/ .love-me-options .alert{ padding: 8px 35px 8px 14px; margin-bottom: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; display: inline-block; } #meta-box-love-me .badge { border-radius: 9px; display: inline-block; font-size: 11.844px; font-weight: bold; line-height: 14px; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); white-space: nowrap; padding: 4px 10px; } #meta-box-love-me .badge-info { background-color: #3a87ad; } #meta-box-love-me .dashicons-heart{ color: #C40925; } .love-me-options .alert-warning{ color: #c09853; } .love-me-options table th, .love-me-options table td { padding: 8px; line-height: 20px; text-align: left; vertical-align: top; } /*FRONT*/ .love{ position: relative; font-size: 1em; margin: 1em 0; } .LoveCheck{ visibility: hidden; top: 0; left: 0; position: absolute; } .LoveLabel{ font-size: 1.2em; width: 1em; height: 1em; vertical-align: middle; cursor: pointer; line-height: 1em; position: relative; margin: 0; } .LoveLabel::before{ font-size: inherit; width: auto; height: auto; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } .LoveLabel::after{ content: "\f487"; width: auto; height: auto; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; font-size: inherit; opacity: 0.8; } .LoveCount{ margin: 0; display: inline-block; font-size: 0.8em; line-height: 1.5em;/*1.2/0.8*/ vertical-align: middle; margin-left: 0.3em; color: #7F7F7F; } .LoveLabel:hover{ animation: battement .25s infinite alternate; } .LoveCheck:not(:checked) + .LoveLabel{ color: #BFBFBF; } .LoveCheck:checked + .LoveLabel{ color: #ef1d5f; will-change: font-size; animation: grossissement 1s cubic-bezier(.17, .89, .32, 1.49); } .LoveCheck:checked + .LoveLabel::after{ opacity: 0; transform: translate(-50%, -150%) scale(1.2); transition: opacity .5s ease-in-out, transform .5s ease-in-out; } .LoveCheck:checked + .LoveLabel:hover{ will-change: font-size; animation: grossissement 1s cubic-bezier(.17, .89, .32, 1.49), battement .25s infinite alternate; } @keyframes grossissement { 0%, 17.5% { font-size: 0.5em; } } @keyframes battement { to { transform: scale(1.2); } }