1 line
8.2 KiB
CSS
1 line
8.2 KiB
CSS
body{max-width:100%;background-color:#222831}#btnName{font-size:14px;border-radius:13px;background-color:#37ad4f;border-color:#339380;margin:7px;color:#fff;display:inline-block;padding:6px 12px;margin-bottom:0;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-moz-user-select:none;-ms-user-select:none;user-select:none}.btnAction{font-size:14px;border-radius:13px;margin:7px;color:#fff;display:inline-block;padding:6px 12px;margin-bottom:0;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-moz-user-select:none;-ms-user-select:none;user-select:none}canvas{position:absolute;right:0;display:inline-block;direction:ltr;width:360px;height:360px}.hiddenCanvas{position:unset}#video{border-radius:100%;display:inline-block;width:360px;height:360px}.cameraSection{display:block;position:relative;width:360px;height:360px}.faceImageCamera{position:absolute;top:0;right:0;width:360px;transform:scale(1.006);border-radius:100%}.btn-start{font-size:14px;width:100%!important;display:block}.btn-reEnterCode{font-size:14px;width:100%!important;display:block;background-color:#e87c2d;color:#FFFFFF!important;border-radius:7px;font-size:12px;font-weight:700;padding:10px 5px}.btn-incom{font-size:14px;width:100%!important;display:block}.btn-exit{font-size:14px;width:100%!important;display:block}#btnOutOrIn{display:flex;justify-content:center}#reAnalyz{position:relative;display:flex;justify-content:center}@media only screen and (max-width :992px){canvas{position:absolute;top:0;right:0;display:inline-block;direction:ltr;width:360px;height:360px}}.div-logout{position:fixed;left:10px;top:50px}.keypad-section{position:fixed;top:0;width:100%;background-color:#222831;left:0;max-width:100%;z-index:10;height:50vh}.keypad-section .errorMessage{color:#fca5a5}.keypad{background-color:#ccc}.keypad.dark{background-color:#222831}.keypad{position:relative;width:100%;margin:0 0 18px 0;display:flex;flex-direction:column;justify-content:space-between;height:100%}.keypadContainer{position:fixed;left:0;width:100%;bottom:0;height:60%;display:flex;flex-direction:column;justify-content:center}.keypad .keypad-input-field{height:55px;margin:0 auto;position:relative;transition:all 0.25s;transition-delay:0.1s;width:90%}.keypad .keypad-input-field:after{bottom:0;content:'';height:1px;left:0;position:absolute;width:100%}.keypad .entered-numbers-wrapper{height:45px;left:0;overflow:hidden;position:absolute;top:5px;width:100%;background-color:#171717;border-radius:10px}.keypad .entered-numbers{height:45px;left:50%;overflow:hidden;position:absolute;text-align:center;transform:translateX(-50%);white-space:nowrap;direction:ltr;width:100%}.keypad .num{color:#000;animation:fade-in-num 0.1s linear;backface-visibility:hidden;display:inline-block;font-weight:300;height:45px;line-height:45px;overflow:hidden;position:relative;text-align:center;transition:all 0.25s;width:12px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.keypad.dark .num{color:#fff;width:100%;direction:ltr}.keypad .num:after{background-color:#000;border-radius:8px;height:8px;left:50%;opacity:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) scale(.25);transition:all 0.25s;width:8px}.keypad.dark .num:after{background-color:#fff}.keypad .backspace{cursor:pointer;height:55px;line-height:40px;position:absolute;right:0;top:0;width:30px}.keypad .backspace .backspace-icon{background-color:#000;color:#fff;border-bottom-right-radius:2px;border-top-right-radius:2px;display:inline-block;height:14px;position:absolute;right:5px;top:50%;transform:translateY(-50%);user-select:none;width:14px}.keypad.dark .backspace .backspace-icon{background-color:#fff;color:#000}.keypad .backspace .backspace-icon:after{border:0 solid #fff0;border-bottom-width:7px;border-right:6px solid #000;border-top-width:7px;content:'';height:0;left:-6px;position:absolute;width:0}.keypad.dark .backspace .backspace-icon:after{border-right:6px solid #fff}.keypad .backspace .backspace-icon i{font-size:.75em;height:14px;line-height:14px;position:absolute;right:0;text-align:center;top:0;width:14px}.keypad .keypad-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 auto;margin-top:10px;position:relative;width:90%;height:100%;direction:ltr;gap:10px}.keypad .item-wrapper{cursor:pointer;display:inline-block;transition:all 0.25s;position:relative;vertical-align:top;transition:all 0.25s;width:100%;border:1px solid #3f454c;border-radius:10px;background:#2b333f}.keypad .item-wrapper .item,.keypad .item-wrapper .item1{position:relative;z-index:20;height:100%;text-align:center;display:flex;align-items:center;justify-content:center;color:#fff;-webkit-user-select:none;-ms-user-select:none;user-select:none}.keypad .item-wrapper .item i{color:#000}.keypad.dark .item-wrapper .item i{color:#fff}.keypad .item-wrapper .item h1,.keypad .item-wrapper .item h2{margin:0;text-align:center}.keypad .item-wrapper .item h1{color:#000;font-size:26px;font-weight:500;height:20px;line-height:20px}.keypad.dark .item-wrapper .item h1{color:#fff;height:100%;display:flex;align-items:center;justify-content:center}.keypad .item-wrapper .item h2{color:rgb(0 0 0 / .8);font-size:.6em;font-weight:300;height:10px;line-height:10px}.keypad.dark .item-wrapper .item h2{color:rgb(255 255 255 / .8)}.keypad .hover-dot:active:before{opacity:.2;transform:translateX(-50%) translateY(-50%) scale(1.2)}.keypad .hover-dot:before{background-color:#000;border-radius:30px;content:'';height:60px;left:50%;opacity:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%) scale(.3);transition:all 0.25s;width:60px}.keypad.dark .hover-dot:before{background-color:#fff}@keyframes fade-in-num{0%{opacity:0;transform:translateY(50%) scale(0)}100%{opacity:1;transform:translateY(0%) scale(1)}}.loader-container{background-color:#222831;width:100%;height:100vh;position:fixed;z-index:9999;opacity:1;transition:opacity 1s ease}.loader-container.hidden{opacity:0;transition:opacity 1s ease}.loader{position:absolute;top:50%;left:50%;width:100px;height:116px;transform:translate(-50%,-50%)}.loader:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%) scale(0)}.loader .logo{transform:scale(.8);transform-origin:center;-webkit-animation:scale-loader 2500ms linear forwards infinite;animation:scale-loader 2500ms linear forwards infinite}.loader .letter{fill-opacity:0;stroke-dasharray:288;stroke-dashoffset:-288;-webkit-animation:draw-outline 2500ms linear forwards infinite;animation:draw-outline 2500ms linear forwards infinite}.loader .letter--gradient{fill:url(#gradient1);stroke:url(#gradient1);stroke-width:4px;-webkit-animation:draw-outline 2500ms linear forwards infinite,animate-stroke-width 2500ms linear infinite;animation:draw-outline 2500ms linear forwards infinite,animate-stroke-width 2500ms linear infinite}.loader--complete .logo{-webkit-animation:none;animation:none}.loader--complete:after{transform:translate(-50%,-50%) scale(1);opacity:0;transition:all 500ms ease}.loader--complete .letter{-webkit-animation:none;animation:none}@-webkit-keyframes scale-loader{45%{transform:scale(.85)}50%{transform:scale(1)}55%{transform:scale(.85)}}@keyframes scale-loader{45%{transform:scale(.85)}50%{transform:scale(1)}55%{transform:scale(.85)}}@-webkit-keyframes draw-outline{40%{stroke-dashoffset:0;fill-opacity:0}50%{fill-opacity:1}60%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:288}}@-webkit-keyframes draw-outline--mobile{40%{stroke-dashoffset:0;fill-opacity:0}50%{fill-opacity:0}60%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0}}@keyframes draw-outline--mobile{40%{stroke-dashoffset:0;fill-opacity:0}50%{fill-opacity:0}60%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0}}@keyframes animate-stroke-width{0%{stroke-width:4px}50%{stroke-width:8px}100%{stroke-width:4px}}@keyframes draw-outline{40%{stroke-dashoffset:0;fill-opacity:0}50%{fill-opacity:1}60%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:288}}@media (min-width:680px){.cameraSection{width:650px;height:650px}.faceImageCamera{width:650px}#video{width:650px;height:650px}canvas{width:650px;height:650px}} |