/* caption */ .mistape_caption { font-size: 80%; opacity: 0.8; } .mistape-link-wrap { float: left; margin-right: 6px; } /*.mistape-logo:after {*/ /*content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA6lBMVEXmICv////mICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICvmICumnhVtAAAATXRSTlMAAJ8Z+2aPFVaGFhCTbIEF61m37JKiF/qFjLYlpockuEf5GAP9ao2zy534lQf+IsShw46yuq8U9xKZmqxjZKgbqmgRnAGJiFpbBg1OUvIiNGIAAADiSURBVHhedc3VcsNAFATR8YqMDIntmMLMzMzz/7+Te0taa1UV9+t5aOTmhBzionzBmOoykizsmym1VikLa7RNMlCgbfvchYDaajNsl0fuw6O24yHOm8GjQoCkXYYJPFN6ge11TETVFYEPgYUvzPrmT8RfgXWBDTi1NsEtgSWBRRfO9lA/+A8OifqRwLHAiQtNnjIU+NR5LYXaBcm8wCWlqxSuKZUEcKNya+GO0j0UHqi1iwrFMjVPAXii5vd7vb5PLUAMeGOmd1hAxYUKUsCg48fgdwZwAeg2hsYMG13Awpz+AN2fNyTwjF1eAAAAAElFTkSuQmCC');*/ /*}*/ .mistape-logo svg { display: block; height: 22px; width: 22px; fill: #E42029; } .mistape-logo.spin { animation-name: spin; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: spin; -webkit-animation-duration: 1000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 1000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; } .mistape_caption .mistape-link { text-decoration: none!important; border: none!important; box-shadow: none!important; } .mistape-link:hover { text-decoration: none!important; border: none!important; } /* common dialog styles */ #mistape_dialog, #mistape_dialog .dialog__overlay { width: 100%; height: 100%; top: 0; left: 0; } #mistape_dialog { position: fixed; z-index: 2147483647; display: none; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; pointer-events: none; } #mistape_dialog .dialog__overlay { position: absolute; background: rgba(55, 58, 71, 0.9); opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-backface-visibility: hidden; } #mistape_dialog .dialog__content .dialog-wrap { perspective: 800px; transition: transform 0.5s; } #mistape_dialog .dialog__content .dialog-wrap .dialog-wrap-top { padding: 30px 30px 0; background: #fff; transform-origin: 50% 100%; transition: transform 0.5s; position: relative; z-index: 1; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; } #mistape_dialog .dialog__content .dialog-wrap .dialog-wrap-top::after{ content: ''; width: 100%; height: 100%; position: absolute; background: #fff; top: 0; left: 0; transform: rotateX( 180deg ); transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; } #mistape_dialog .dialog__content .dialog-wrap .dialog-wrap-bottom .comment { margin-top: 0; margin-left: auto; margin-right: auto; width: 100%; } #mistape_dialog .dialog__content .dialog-wrap .dialog-wrap-bottom { padding: 31px 30px 45px; background: #fff; transition: background 0.4s; transform: translate3d(0,0,0) translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; margin-top: -1px; } #mistape_dialog .dialog__content { width: 50%; max-width: 560px; min-width: 290px; text-align: center; position: relative; opacity: 0; transition: height 0.3s ease; font-size: 14px; box-sizing: content-box; } #mistape_dialog.dialog--open .dialog__overlay { opacity: 1; pointer-events: auto; } #mistape_dialog.dialog--open .dialog__content { pointer-events: auto; } #mistape_reported_text { padding: 5px 10px; position: relative; z-index: 0; font-weight: normal; } #mistape_reported_text::before { content: ''; width: 15px; height: 15px; border-top: solid 2px #E42029; border-left: solid 2px #E42029; position: absolute; z-index: -1; top: 0; left: 0; } #mistape_reported_text::after { content: ''; width: 15px; height: 15px; border-bottom: solid 2px #E42029; border-right: solid 2px #E42029; position: absolute; z-index: -1; bottom: 0; right: 0; } #mistape_reported_text .mistape_mistake_outer { background-color: #F5F5F5; color: #111; font-weight: normal; padding: 0 3px; } #mistape_reported_text .mistape_mistake_inner { color: #E42029; font-weight: normal; } textarea#mistape_comment { width: 100%; resize: none; font-size: 14px; padding: 4px 6px; line-height: 1.4; box-sizing: border-box; border: 1px solid #ddd; border-radius: 0; color: #8E8E8E; transition: border 0.3s, color 0.3s, background 0.4s; } textarea#mistape_comment:focus { background-color: #fff; border-color: #949494; color: #1a1a1a; outline: 0; } #mistape_dialog .mistape_dialog_block { margin-top: 20px; } #mistape_dialog .pos-relative { position: relative; } #mistape_dialog .mistape_dialog_footer { position: absolute; right: 0; bottom: -24px; font-size: 10px; color: #ddd; } #mistape_dialog .mistape_dialog_footer a { color: #ccc; } #mistape_dialog .mistape_action{ display: inline-block; cursor: pointer; padding: 11px 25px; margin: 0 5px; font-weight: 600; border: none; color: #fff; background: #E42029; text-decoration: none; user-select: none; text-transform: uppercase; font-size: 13px; min-width: 150px; } #mistape_dialog .mistape_action:hover{ opacity: 0.9; text-decoration: none; } #mistape_dialog h2 { margin: 0; font-weight: 400; font-size: 22px; padding: 0 0 20px; position: relative; } #mistape_dialog h2::before { content: ''; height: 1px; width: 60px; position: absolute; bottom: 0; left: calc(50% - 30px); background: #E42029; } #mistape_dialog h3 { margin: 0; font-weight: 300; font-size: 14px; text-transform: none; padding: 0 0 1em; color: #BFBFBF; } #mistape_success_dialog .dialog-wrap{ background: #fff; padding: 30px; } #mistape_success_dialog .dialog-wrap h3{ margin-top: 20px; } /* Sandra animation effect */ #mistape_dialog.dialog--open .dialog__content, #mistape_dialog.dialog--close .dialog__content { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #mistape_dialog.dialog--open .dialog__content { -webkit-animation-name: anim-open; animation-name: anim-open; } #mistape_dialog.dialog--close .dialog__content { -webkit-animation-name: anim-close; animation-name: anim-close; } @-webkit-keyframes anim-open { 0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); } } @keyframes anim-open { 0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes anim-close { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes anim-close { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } /*Mistape Letter*/ .mistape-letter{ width: 640px; height: 400px; top: calc(50% - 200px); position: absolute; } .mistape-letter-front{ width: 304px; height: 190px; /*background: url(../img/letter-front.svg) no-repeat;*/ /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDY0MCA0MDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCA0MDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5bGluZSBpZD0ibGVmdCIgZmlsbD0iI0U1MjEyOSIgcG9pbnRzPSIwLDAgMCw0MDAgNC4wNjMsNDAwIDMyMi43NSwyMDEuNzUgMCwwICIvPjxwb2x5Z29uIGlkPSJib3R0b20iIGZpbGw9IiNENjI3MzQiIHBvaW50cz0iMCw0MDAgNjQwLDQwMCA2NDAsMzk4Ljk1MyAzMjAuMjgxLDE5OS44MjggIi8+PHBvbHlsaW5lIGlkPSJyaWdodCIgZmlsbD0iI0JDMjMzRCIgcG9pbnRzPSI2NDAsMCAzMjAsMjAwIDY0MCw0MDAgNjQwLDAgIi8+PC9zdmc+);*/ /*background-repeat: no-repeat;*/ /*background-size: 100% 100%;*/ position: absolute; bottom: 0; z-index: 4; left: calc(50% - 152px); transform: scale(0.145); transform-origin: 50% 100%; opacity: 0; transition: transform 0.4s, opacity 0.15s; } .mistape-letter-front .front-left { width: 0; height: 0; border-left: 152px solid #E42029; border-right: 0; border-top: 95px solid transparent; border-bottom: 95px solid transparent; position: absolute; z-index: 2; top: 0; left: 0; } .mistape-letter-front .front-right { width: 0; height: 0; border-right: 152px solid #E42029; border-left: 0; border-top: 95px solid transparent; border-bottom: 95px solid transparent; position: absolute; z-index: 2; top: 0; right: 0; } .mistape-letter-front .front-right:before { content: ''; display: block; width: 0; height: 0; border-right: 152px solid rgba(0,0,0,0.2); border-left: 0; border-top: 95px solid transparent; border-bottom: 95px solid transparent; position: absolute; top: -95px; right: -152px; } .mistape-letter-front .front-bottom { width: 0; height: 0; border-bottom: 95px solid #E42029; border-top: 0; border-left: 152px solid transparent; border-right: 152px solid transparent; position: absolute; z-index: 2; bottom: 0; left: 0; } .mistape-letter-front .front-bottom:before { content: ''; display: block; width: 0; height: 0; border-bottom: 95px solid rgba(0,0,0,0.1); border-top: 0; border-left: 152px solid transparent; border-right: 152px solid transparent; position: absolute; top: 0; right: -152px; } .mistape-letter-back{ width: 304px; height: 190px; /*background: url(../img/letter-back.svg) no-repeat;*/ /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDY0MCA0MDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCA0MDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IHg9IjAiIGZpbGw9IiNCMjI0NDMiIHdpZHRoPSI2NDAiIGhlaWdodD0iNDAwIi8+PHBvbHlsaW5lIGlkPSJ0b3AxIiBkaXNwbGF5PSJub25lIiBmaWxsPSIjQjIyNDQzIiBwb2ludHM9IjAsMCAzMjAsMjAwIDY0MCwwICIvPjwvc3ZnPg==);*/ background-color: #E42029; background-repeat: no-repeat; background-size: 100% 100%; position: absolute; z-index: 2; bottom: 0; left: calc(50% - 152px); transition: transform 0.4s, opacity 0.15s; transform: scale(0.145); transform-origin: 50% 100%; opacity: 0; } .mistape-letter-back:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.4); } .mistape-letter-back > .mistape-letter-back-top{ /*width: 304px;*/ /*height: 95px;*/ width: 0; height: 0; /*background: url(../img/letter-t2.svg) no-repeat;*/ /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDY0MCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGlkPSJ0b3AyIiBmaWxsPSIjOTcxRTNGIiBwb2ludHM9IjAsMjAwIDY0MCwyMDAgMzIwLDAgIi8+PC9zdmc+);*/ border-bottom: 95px solid #E42029; border-top: 0; border-left: 152px solid transparent; border-right: 152px solid transparent; background-repeat: no-repeat; background-size: 100% 100%; position: absolute; z-index: 2; bottom: 100%; left: calc(50% - 152px); transition: transform 0.4s; transform-origin: 50% 100%; transform: translateX(0) rotateX(-180deg); } .mistape-letter-back > .mistape-letter-back-top:before { content: ''; display: block; width: 0; height: 0; border-bottom: 95px solid rgba(0,0,0,.3); border-top: 0; border-left: 152px solid transparent; border-right: 152px solid transparent; position: absolute; top: 0; left: -152px; } .mistape-letter-top { width: 0; height: 0; /*background: url(../img/letter-t2.svg) no-repeat;*/ /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDY0MCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0MCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGlkPSJ0b3AyIiBmaWxsPSIjOTcxRTNGIiBwb2ludHM9IjAsMjAwIDY0MCwyMDAgMzIwLDAgIi8+PC9zdmc+);*/ /*background-repeat: no-repeat;*/ /*background-size: 100% 100%;*/ border-bottom: 95px solid #E42029; border-top: 0; border-left: 152px solid transparent; border-right: 152px solid transparent; position: absolute; z-index: 2; bottom: 0; opacity: 0; left: calc(50% - 152px); transition: transform 0.3s; transform-origin: 50% 100%; transform: rotateX(0deg); } .mistape-letter-top:before { content: ''; display: block; width: 0; height: 0; border-bottom: 95px solid rgba(0,0,0,.3); border-top: 0; border-left: 152px solid transparent; border-right: 152px solid transparent; position: absolute; top: 0; left: -152px; } .mistape-letter-top.close { transform: rotateX(-180deg); } #mistape_dialog .dialog__content .dialog-wrap{ z-index: 3; position: relative; } #mistape_dialog .dialog__content.show-letter .mistape-letter-back, #mistape_dialog .dialog__content.show-letter .mistape-letter-front{ transform: scale(1) translateY(15%); opacity: 1; } #mistape_dialog .dialog__content.show-letter .mistape-letter-back > .mistape-letter-back-top{ transform: rotateX(0deg); } #mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-top{ transform: rotateX(-180deg); } #mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-bottom{ background: #c1c1c1; } #mistape_dialog .dialog__content.show-letter .dialog-wrap .dialog-wrap-bottom textarea{ background: #c1c1c1; } #mistape_dialog .dialog__content.show-letter .dialog-wrap{ transform: translateY(-150%); } #mistape_dialog .dialog__content.show-letter.with-comment .dialog-wrap{ transform: translateY(-50%); } #mistape_dialog .mistape_action[data-action="send"]{ position: relative; z-index: 8; } #mistape_dialog .dialog__content.show-letter .mistape_action[data-action="send"]{ transition-delay: 0.3s; transition: visibility 0.1s, opacity 0.1s; visibility: hidden!important; opacity: 0!important; } @keyframes send-letter1 { 0% { transform: translateX(0) translateY(15%); } 20% { transform: translateX(-60%) translateY(15%); } 100% { transform: translateX(100vw) translateY(15%); } } @-moz-keyframes send-letter1 { 0% { transform: translateX(0) translateY(15%); } 20% { transform: translateX(-60%) translateY(15%); } 100% { transform: translateX(100vw) translateY(15%); } } @-webkit-keyframes send-letter1 { 0% { transform: translateX(0) translateY(15%); } 20% { transform: translateX(-60%) translateY(15%); } 100% { transform: translateX(100vw) translateY(15%); } } @keyframes send-letter2 { 0% { transform: translateX(0) rotateX(-180deg); } 20% { transform: translateX(-60%) rotateX(-180deg); } 100% { transform: translateX(100vw) rotateX(-180deg); } } @-moz-keyframes send-letter2 { 0% { transform: translateX(0) rotateX(-180deg); } 20% { transform: translateX(-60%) rotateX(-180deg); } 100% { transform: translateX(100vw) rotateX(-180deg); } } @-webkit-keyframes send-letter2 { 0% { transform: translateX(0) rotateX(-180deg); } 20% { transform: translateX(-60%) rotateX(-180deg); } 100% { transform: translateX(100vw) rotateX(-180deg); } }