Current Path : /var/www/axolotl/data/www/axolotl.ru/www/bitrix/js/mobile/css/ |
Current File : /var/www/axolotl/data/www/axolotl.ru/www/bitrix/js/mobile/css/mobile_ui.css |
.mobile-ui-loader { width: 72px; height: 72px; position: relative; top: 30%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; z-index: 2; } .mobile-ui-loader:before { content: ''; width: 10px; height: 10px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-animation: round 1.1s infinite linear; animation: round 1.1s infinite linear; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; box-shadow: 0 -20px 0 0 #ffffff, 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.5), -14px -14px 0 0 rgba(255, 255, 255, 0.2); } @keyframes round { 0%, 100% { box-shadow: 0 -20px 0 0 #ffffff, 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.5), -14px -14px 0 0 rgba(255, 255, 255, 0.7); } 12.5% { box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.7), 14px -14px 0 0 #ffffff, 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.5); } 25% { box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.5), 14px -14px 0 0 rgba(255, 255, 255, 0.7), 20px 0 0 0 #ffffff, 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2); } 37.5% { box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.5), 20px 0 0 0 rgba(255, 255, 255, 0.7), 14px 14px 0 0 #ffffff, 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.5), 14px 14px 0 0 rgba(255, 255, 255, 0.7), 0 20px 0 0 #ffffff, -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2); } 62.5% { box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.5), 0 20px 0 0 rgba(255, 255, 255, 0.7), -14px 14px 0 0 #ffffff, -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2); } 75% { box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.5), -14px 14px 0 0 rgba(255, 255, 255, 0.7), -20px 0 0 0 #ffffff, -14px -14px 0 0 rgba(255, 255, 255, 0.2); } 87.5% { box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.5), -20px 0 0 0 rgba(255, 255, 255, 0.7), -14px -14px 0 0 #ffffff; } } .mobile-iu-loader-wrap { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); border-radius: 20px; width:220px; max-width:220px; height:220px; background: rgba(0, 0, 0, 0.72); } .mobile-iu-loader-wrap button { width:130px; height:40px; font-size: 12pt; background: white; border-radius: 5px; border: 1px solid #f0f0f0; outline: none; } .mobile-iu-loader-wrap button:active { background: #f0f0f0; } .mobile-ui-loader-message { color: white; overflow: auto; font-size: 11pt; width: 170px; text-overflow: ellipsis; white-space: nowrap; display: inline-block; font-family: "Helvetica Neue", "Open Sans", sans-serif; } .long-tap-activate { background: #e0e0e0 !important; -webkit-transition-property: none!important; } .long-tap-block { -webkit-user-select: none; } .mobile-uploader-img-blurred { filter:blur(4px); } .mobile-uploader-item-container { width: 200px; height: 200px; position: relative; margin: 100px; } .mobile-uploader-loader { padding: 4px; width: 50px; height: 50px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); -webkit-transition-property: opacity; -webkit-transition: 0.3s ease-in-out; position: relative; } .mobile-uploader-loader-wrapper { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; } .mobile-upload-cancel { width: 100%; margin: -4px; position: absolute; height: 100%; -webkit-transition: 0.1s ease-in; background-image: url("./../images/cross.svg"); background-position: center; background-repeat: no-repeat; background-size: 20px; } .mobile-upload-processing { line-height: 20px; position: absolute; top: 0; left: 0; padding: 0 10px; font-size: 12px; color: rgba(255, 255, 255, 0.54); height: 20px; background: rgba(0, 0, 0, 0.55); margin-top: 4px; border-radius: 20px; display: inline; -webkit-transition-property: opacity; -webkit-transition: 0.3s ease-in-out; } .mobile-upload-done { -webkit-transition: 0.2s ease-out; background-image: url("./../images/check.svg"); } @-webkit-keyframes mobile-uploader-rotating { from { transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); } to { transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); } } .mobile-uploader-rotating { -webkit-animation: mobile-uploader-rotating 2s linear infinite; animation: mobile-uploader-rotating 2s linear infinite; transform-origin: 50% 50%; }