.feedback-wrapper {position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: white; max-width: 480px; height: 200px; border-radius: 10px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transition: 0.55s cubic-bezier(0.1, 1, 0.25, 1.15); } .feedback-wrapper.title-hovered:active {transform: translateY(-5%); } .feedback-wrapper.at-bottom {top: auto; transform: translateY(100%); bottom: 68px; transition: 0.2s ease-out; } .feedback-wrapper.at-bottom:active {transform: translateY(105%); } .feedback-wrapper .feedback-title {padding: 20px; color: #fff; background: #7f28ff; border-radius: 10px 10px 0 0; height: 68px; } .feedback-wrapper .feedback-title h1 {margin: 0; font-size: 1.4rem; } .feedback-wrapper .feedback-content {max-height: calc(100vh - 68px); overflow-y: auto; } .feedback-wrapper .feedback-faces {padding: 20px; height: 130px; overflow: hidden; } .face-wrapper {position: relative; left: 0; right: 0; width: 60px; height: 60px; padding: 10px; box-sizing: content-box; transition: 0.25s ease-out; } .face-wrapper .face-counter {position: absolute; right: 0; background: #dc230f; width: 25%; height: 25%; text-align: center; line-height: 170%; font-size: 80%; border-radius: 50%; font-weight: 800; color: #fff; z-index: 99; box-shadow: inset 0 -1.2px 1.8px #b92413; transform: rotate(0deg) scale(1); transition: 0.25s ease-out; } .face-wrapper .face-counter.invisible {transform: rotate(150deg) scale(0); opacity: 0; } .face-wrapper .face {display: block; position: relative; background: #ffcd00; border-radius: 50%; width: 60px; height: 60px; box-shadow: 0 0.6px 1.2px #cc9117; transition: 0.25s ease-out; } .face-wrapper .face:not([disabled]) {cursor: pointer; } .face-wrapper .face:after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset 0px -3px 9px #eaa514; z-index: 9; } .face-wrapper .face .eye {position: absolute; width: 15.6px; height: 15.6px; margin-top: 32%; left: 18%; border-radius: 50%; transition: 0.25s ease-out; } .face-wrapper .face .eye:last-of-type {right: 18%; left: auto; } .face-wrapper .face .eye .pupil {position: absolute; background: #000; left: 0; right: 0; top: 0; margin: auto; width: 85%; height: 85%; border-radius: 50%; background: #794014; box-shadow: inset 0 -1.2px 0.6px 0px #ca7432; transition: width 0.25s ease-out, height 0.25s ease-out; } .face-wrapper .face .eye .eyelid {position: absolute; width: 100%; height: 0%; bottom: -5%; border-radius: 50%; background: #ffcd27; transition: 0.25s ease-out; } .face-wrapper .face .mouth-wrapper {position: absolute; top: 60%; width: 100%; } .face-wrapper .face .mouth-wrapper .mouth {width: 40%; height: 14.4px; background: #784015; left: 0; right: 0; margin: auto; position: relative; border-radius: 290%; box-shadow: inset 0 -1.2px 0.6px 0px #ca7432; transition: 0.25s ease-out; } .face-wrapper .face .mouth-wrapper .mouth:before {content: ''; position: absolute; width: 120%; height: 73%; background: #ffcd27; border-radius: 0 0 140% 140%; top: 0; left: -10%; transition: 0.25s ease-out; } .face-wrapper .face.grayscale {transform: scale(0.9); background: #d3d3d3; box-shadow: 0 0.6px 1.2px #ccc; } .face-wrapper .face.grayscale:after {box-shadow: inset 0px -3px 9px #bbb; } .face-wrapper .face.grayscale .pupil {background: #4f4f4f; box-shadow: inset 0 -1.2px 0.6px 0px #949494; } .face-wrapper .face.grayscale .eyelid {background: #d3d3d3; } .face-wrapper .face.grayscale.face-love .eyelid, .face-wrapper .face.grayscale.face-love .eyelid:before, .face-wrapper .face.grayscale.face-love .eyelid:after {background: #707070; } .face-wrapper .face.grayscale .mouth {background: #4f4f4f; box-shadow: inset 0 -1.2px 0.6px 0px #949494; } .face-wrapper .face.grayscale .mouth:before {background: #d3d3d3; } .face-wrapper:hover .face {transform: scale(1.1); } .face-wrapper:hover .eyes-wrapper {animation: shake infinite 0.15s; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } .face-wrapper:hover .eyes-wrapper .eyelid {height: 50%; } .face-wrapper:hover .mouth-wrapper .mouth {transform: scaleX(1.2); } .face-wrapper:hover .mouth-wrapper .mouth:before {transform: translateY(-20%) scaleY(0.75); } .face-wrapper:active .face {transform: scale(1.05); } .face-wrapper:active .eyes-wrapper .eye .eyelid {height: 75%; } .face-wrapper .face-sad .mouth-wrapper .mouth {height: 2.4px; top: 8.4px; border-radius: 4.2px; width: 30%; } .face-wrapper .face-sad .mouth-wrapper .mouth:before {display: none; } .face-wrapper:hover .face-sad .eyes-wrapper .eye {transform: scale(0.9); } .face-wrapper:hover .face-sad .eyes-wrapper .eyelid {height: 0; } .face-wrapper:hover .face-sad .mouth-wrapper .mouth {transform: scaleX(0.9) rotateZ(-10deg); } .face-wrapper:active .face-sad .eyes-wrapper .eye .pupil {top: 0%; height: 70%; } .face-wrapper .face-disappointed .mouth-wrapper {transform: rotateZ(-180deg); } .face-wrapper .face-disappointed .mouth-wrapper .mouth {top: -6px; height: 9px; } .face-wrapper .face-disappointed .mouth-wrapper .mouth:before {transform: translateY(-30%); width: 120%; height: 120%; } .face-wrapper:hover .face-disappointed .eyes-wrapper .eye {transform: scale(0.9); } .face-wrapper:hover .face-disappointed .eyes-wrapper .eyelid {height: 0; } .face-wrapper:hover .face-disappointed .mouth-wrapper .mouth {transform: translateY(-5%) scale3d(0.8, 1, 1); } .face-wrapper:hover .face-disappointed .mouth-wrapper .mouth:before {transform: translateY(-30%); width: 120%; height: 120%; } .face-wrapper:active .face-disappointed .eyes-wrapper .eye .pupil {top: 0%; height: 70%; } .face-wrapper .face-wtf .mouth-wrapper {transform: rotateZ(-180deg); } .face-wrapper .face-wtf .mouth-wrapper .mouth {top: -3.6px; } .face-wrapper:hover .face-disappointed .mouth-wrapper .mouth {top: -3.6px; } .face-wrapper .face-love .eye .pupil {background: none; box-shadow: none; } .face-wrapper .face-love .eye .eyelid {position: absolute; transform: rotate(-45deg); width: 12px; height: 12px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #dc0e0e; border-radius: 0; z-index: 999; transition: 0.25s ease-out, background 0s; } .face-wrapper .face-love .eye .eyelid:before, .face-wrapper .face-love .eye .eyelid:after {content: ''; position: absolute; width: 100%; height: 100%; background: #dc0e0e; top: -50%; border-radius: 50% 50% 0 0; } .face-wrapper .face-love .eye .eyelid:after {top: auto; right: -50%; border-radius: 0 50% 50% 0; } .face-wrapper:hover .face-love .eyes-wrapper .eye .eyelid {transform: translateY(-5px) rotate(-45deg) scale3d(1.1, 1.1, 1.1); } .face-wrapper:active .face-love .eyes-wrapper .eye .pupil {top: 0%; height: 85%; } .face-wrapper:active .face-love .eyes-wrapper .eye .eyelid {height: 12px; transform: translateY(-5px) rotate(-45deg) scale3d(1.3, 1.3, 1.3); } @keyframes shake {0%, 100% {transform: translate3d(0, 0, 0); } 25% {transform: translate3d(1%, 1%, 0); } 75% {transform: translate3d(1%, 1%, 0); } } /* -----------------------EMOJI 2------------------------------------- */ .feedback-wrapper1 {position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: white; max-width: 480px; height: 200px; border-radius: 10px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transition: 0.55s cubic-bezier(0.1, 1, 0.25, 1.15); } .feedback-wrapper1.at-bottom {top: auto; transform: translateY(100%); bottom: 68px; transition: 0.2s ease-out; } .feedback-wrapper1.at-bottom:active {transform: translateY(105%); } .feedback-wrapper1 .feedback-content1 {max-height: calc(100vh - 68px); overflow-y: auto; } .feedback-wrapper1 .feedback-faces1 {padding: 20px; height: 130px; overflow: hidden; } .face-wrapper1 {position: relative; left: 0; right: 0; width: 60px; height: 60px; padding: 10px; box-sizing: content-box; transition: 0.25s ease-out; } .face-wrapper1 .face-counter1 {position: absolute; right: 0; background: #dc230f; width: 25%; height: 25%; text-align: center; line-height: 170%; font-size: 80%; border-radius: 50%; font-weight: 800; color: #fff; z-index: 99; box-shadow: inset 0 -1.2px 1.8px #b92413; transform: rotate(0deg) scale(1); transition: 0.25s ease-out; } .face-wrapper1 .face-counter1.invisible {transform: rotate(150deg) scale(0); opacity: 0; } .face-wrapper1 .face1 {display: block; position: relative; background: #ffcd00; border-radius: 50%; width: 60px; height: 60px; box-shadow: 0 0.6px 1.2px #cc9117; transition: 0.25s ease-out; } .face-wrapper1 .face1:not([disabled]) {cursor: pointer; } .face-wrapper1 .face1:after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset 0px -3px 9px #eaa514; z-index: 9; } .face-wrapper1 .face1 .eye1 {position: absolute; width: 15.6px; height: 15.6px; margin-top: 32%; left: 18%; border-radius: 50%; transition: 0.25s ease-out; } .face-wrapper1 .face1 .eye1:last-of-type {right: 18%; left: auto; } .face-wrapper1 .face1 .eye1 .pupil1 {position: absolute; background: #000; left: 0; right: 0; top: 0; margin: auto; width: 85%; height: 85%; border-radius: 50%; background: #794014; box-shadow: inset 0 -1.2px 0.6px 0px #ca7432; transition: width 0.25s ease-out, height 0.25s ease-out; } .face-wrapper1 .face1 .eye1 .eyelid1 {position: absolute; width: 100%; height: 0%; bottom: -5%; border-radius: 50%; background: #ffcd27; transition: 0.25s ease-out; } .face-wrapper1 .face1 .mouth-wrapper1 {position: absolute; top: 60%; width: 100%; } .face-wrapper1 .face1 .mouth-wrapper1 .mouth1 {width: 40%; height: 14.4px; background: #784015; left: 0; right: 0; margin: auto; position: relative; border-radius: 290%; box-shadow: inset 0 -1.2px 0.6px 0px #ca7432; transition: 0.25s ease-out; } .face-wrapper1 .face1 .mouth-wrapper1 .mouth1:before {content: ''; position: absolute; width: 120%; height: 73%; background: #ffcd27; border-radius: 0 0 140% 140%; top: 0; left: -10%; transition: 0.25s ease-out; } .face-wrapper1 .face1.grayscale1 {transform: scale(0.9); background: #d3d3d3; box-shadow: 0 0.6px 1.2px #ccc; } .face-wrapper1 .face1.grayscale1:after {box-shadow: inset 0px -3px 9px #bbb; } .face-wrapper1 .face1.grayscale1 .pupil1 {background: #4f4f4f; box-shadow: inset 0 -1.2px 0.6px 0px #949494; } .face-wrapper1 .face1.grayscale1 .eyelid1 {background: #d3d3d3; } .face-wrapper1 .face1.grayscale1.face-love .eyelid, .face-wrapper1 .face.grayscale.face-love .eyelid:before, .face-wrapper1 .face.grayscale.face-love .eyelid:after {background: #707070; } .face-wrapper1:hover .face1 {transform: scale(1.1); } .face-wrapper1:hover .eyes-wrapper1 {animation: shake infinite 0.15s; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } .face-wrapper1:hover .eyes-wrapper1 .eyelid1 {height: 50%; } .face-wrapper1:hover .mouth-wrapper1 .mouth1 {transform: scaleX(1.2); } .face-wrapper1:hover .mouth-wrapper1 .mouth1:before {transform: translateY(-20%) scaleY(0.75); } .face-wrapper1:active .face1 {transform: scale(1.05); } .face-wrapper1:active .eyes-wrapper1 .eye1 .eyelid1 {height: 75%; } .face-wrapper1 .face-sad1 .mouth-wrapper1 .mouth1 {height: 2.4px; top: 8.4px; border-radius: 4.2px; width: 30%; } .face-wrapper1 .face-sad1 .mouth-wrapper1 .mouth1:before {display: none; } .face-wrapper1:hover .face-sad1 .eyes-wrapper1 .eye1 {transform: scale(0.9); } .face-wrapper1:hover .face-sad1 .eyes-wrapper1 .eyelid1 {height: 0; } .face-wrapper1:hover .face-sad1 .mouth-wrapper1 .mouth1 {transform: scaleX(0.9) rotateZ(-10deg); } .face-wrapper1:active .face-sad1 .eyes-wrapper1 .eye1 .pupil1 {top: 0%; height: 70%; }