.retypos { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1000; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .retypos-content { position: relative; background-color: #ffffff; z-index: 1001; margin: auto; padding: 0px; border-radius: 6px; width: 40%; max-width: 40rem; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } .retypos-header span { color: #90694a; font-weight: bold; } .retypos-close { font-size: 3rem; font-size: 3rem; position: absolute; top: 3px; right: 12px; } .retypos-title { line-height: 4rem; font-family: sans-serif; font-size: 2rem; width: 100%; text-align: center; display: block; } .retypos-close:hover, .retypos-close:focus { color: #90694a; text-decoration: none; cursor: pointer; } .retypos-header { padding: 2px 1.5rem; background-color: #F1E9D6; border-radius: 6px 6px 0px 0px; } .selectedTypo { color: darkred; font-weight: bold; } .retypos-body { padding: 2px 1.5rem; } .retypos-body label { font-weight:bold; display: block; margin: 16px 0px; font-size: 1.5rem; } .retypos-body div { font-weight:normal; margin: 8px 0; font-size: 1.5rem; } .retypos-body input[type=text] { display: block; width: 100%; margin: 8px 0; font-size: 1.5rem; height: 2.5rem; padding: 0 6px; } .retypos-footer { background-color: #ffffff; color: #90694a; padding: 2px 1.5rem; } div.retypos-footer { text-align: center; padding-bottom: 6px; border-radius: 0px 0px 6px 6px; } p#retyposMessage { margin: 6px; height: 1.7rem; font-size: 1.5rem; } /* Бежевая кнопка */ .retypos-footer button:active { border: 1px solid #d1b374; } .retypos-footer button:hover { background-color: #d6c8a7; background-image: -webkit-linear-gradient(top, #d6c8a7, #e9d9b5); cursor: pointer; } .retypos-footer button { background-color: #e9d9b5; background-image: -webkit-linear-gradient(top, #e9d9b5, #ebddbe); border: 1px solid #ebddbe; border-radius: 4rem; color: #8a5536; font-size: 1.5rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; line-height: 1; padding: 1em 2em; text-align: center; width: 240px; } /* Контекстное меню */ div.retypos-contextmenu { position: absolute; border: 1px solid #666666; border-radius: 5px; background-color: #666666; padding-left: 20px; padding-right: 20px; font-family: "Verdana"; color: #FFFFFF; line-height: 24px; font-size: 14px; text-align: center; z-index: 999; display: none; /* unselectable */ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } .retypos-contextmenu:hover { background-color: #90694a; cursor: pointer; } .retypos-banner { cursor: pointer; } #retyposText { max-height: 6em; overflow: scroll; overflow-x: hidden; overflow-y: auto; } div#retyposText::-webkit-scrollbar { width: 8px; } div#retyposText::-webkit-scrollbar-thumb { background-color: #D5C294; border-radius: 5px; -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.5); } div#retyposText::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); border-radius: 5px; } @media screen and (max-width: 1024px) { .retypos-content { width: 90%; } .retypos-header { padding: 0px 16px; background-color: #FFFFFF; border-radius: 0px; } .retypos-footer { border-radius: 0px; } label[for=retyposText], span.retypos-title, #retyposText { display: none; } } @media screen and (max-width: 512px) { .retypos-footer button{ width:100%; } }