/* * oaer.css * Copyright (C) 2024 veypi * * Distributed under terms of the MIT license. */ @import "./animate.scss"; .voa { user-select: none; cursor: pointer; height: 4rem; width: 4rem; display: flex; justify-content: center; align-items: center; .voa-off { } .voa-on { border-radius: 100%; background: #999; animation: scale-up 100ms ease-out forwards; } :hover { opacity: 0.9; } } .voa-scale-off { transform-origin: center center; animation: scale-off 200ms ease-out forwards !important; } .voa-scale-up { animation: scale-up 200ms ease-in; } .hover-line-b { cursor: pointer; position: relative; &:hover { opacity: 0.7; } &:after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 0.1em; background-color: #000; transition: all 0.3s; } &:hover::after { left: 0px; width: 100%; } } .voa-modal { user-select: none; position: fixed; top: 50%; left: 50%; translate: -50% -50%; padding: 2rem; z-index: 10000; width: 40%; min-width: 20rem; &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2rem; background-color: rgba(240, 240, 240, 0.5); backdrop-filter: blur(20px); /* 模糊效果 */ z-index: -1; } .header { line-height: 2rem; width: 100%; display: flex; justify-content: start; align-items: center; gap: 0.5rem; .voa-logo { height: 4rem; width: 4rem; } .txt { font-size: 1.5rem; } } .username, .password { margin: 2rem 0; position: relative; width: 100%; input { height: 2.5rem; line-height: 2.5rem; font-size: 1.5rem; width: 100%; margin: 0 1rem; border: none; outline: none; background: none; } &:after { content: ""; position: absolute; bottom: 0; left: 1rem; width: calc(100% - 2rem); height: 0.1em; background-color: #000; transition: all 0.3s; } &:hover::after { left: 0%; width: 100%; background-color: #00ffff; } } .ok { cursor: pointer; line-height: 3rem; font-size: 1.5rem; height: 3rem; margin: 2rem auto; width: 40%; background: #0a0; border-radius: 1.5rem; } .last { display: flex; justify-content: space-between; padding: 0 1rem; height: 3rem; .icos { display: flex; align-items: center; gap: 1rem; div { opacity: 0.5; cursor: pointer; height: 2rem; width: 2rem; background-size: cover; background-position: center; &:hover { opacity: 1; } } .github { background-image: url("../img/github.svg"); } .google { background-image: url("../img/google.svg"); } .wechat { background-image: url("../img/wechat.svg"); } } .txt { height: 1.5rem; line-height: 1.5rem; font-size: 1rem; div { cursor: pointer; opacity: 0.5; &:hover { opacity: 1; } } } } .close { height: 2rem; width: 2rem; position: absolute; opacity: 0.5; top: 1rem; right: 1rem; cursor: pointer; &:active { opacity: 0.8; } } } #voa-mask { position: fixed; display: none; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; &::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.01); /* 半透明白色遮罩 */ backdrop-filter: blur(1px); /* 模糊效果 */ } } .voa-logo { background-image: url("../favicon.svg"); background-size: cover; background-position: center; } .voa-btn { position: relative; text-align: center; display: block; border: none; &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: 0.3s; } &:active::after { box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.5); /* opacity: 0; */ } &:active { opacity: 0.8; } }