#page-auth { display: flex; flex-direction: column; align-items: center; min-height: calc(100% + 70px); margin: 5px 0; width: 100%; } #page-auth-form { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; height: 100vh; } #page-auth-form>div { border-radius: var(--border-radius); display: flex; flex-direction: column; align-items: center; height: 200px; justify-content: center; width: 250px; padding: 10px 20px; background: var(--ColorThemes1); color: var(--ColorThemes3); border: 1px solid var(--ColorThemes2); box-shadow: var(--shadow-l1); transition: all .2s ease 0s; } #page-auth-form>div>input { background: var(--ColorThemes0); font-size: var(--FontSize2); width: calc(100% - 10px); padding: 0 5px; border-radius: 6px; height: 30px; background-color: var(--ColorThemes0); color: var(--ColorThemes3); } #page-auth-form>div>button { border-radius: 6px; background: var(--PrimaryColor); color: var(--PrimaryColorText); width: 100%; height: 40px; margin: 20px 0 0 0; } #page-auth-form>div>button>span { font-size: var(--FontSize2); font-weight: 400; text-transform: uppercase; } .scanner-container { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 5px; overflow: hidden; background-color: var(--ColorThemes0); } #video { width: 100%; height: 100%; object-fit: cover; } .laser-box { position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; border: 2px solid var(--PrimaryColor); border-radius: 12px; pointer-events: none; } .laser-line { position: absolute; width: 100%; height: 2px; background-color: var(--PrimaryColor); /* box-shadow: 0 0 8px var(--PrimaryColor); */ top: 0; animation: scan 2s linear infinite; } @keyframes scan { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } }