#avatar { display: flex; align-items: center; justify-content: center; font-size: 0.8em; overflow: hidden; background-color: #10101011; } #avatar img { width: 32px; height: 32px; } #user-auth { display: none; position: fixed; top: 50%; left: 50%; width: 30%; min-width: 500px; aspect-ratio: 1.5; transform: translate(-50%, -50%); border: solid 1px black; border-radius: 5px; /* background-image: url("../images/fight.jpg"); */ /* background-color: #FFF5DA; */ /* background-color: #74B72E61; */ background-color: #ebf5e061; backdrop-filter: blur(50px); z-index: 1000; } #user-auth > div:first-child { height: 10%; } #user-auth > div:last-child{ display: flex; position: relative; width: 95%; height: 90%; margin: auto; top: 0; } #quit-login { display: flex; align-items: center; justify-content: end; margin-right: 10px; } #quit-login img { width: 50px !important; height: 100%; !important; } /* 左边输入区域 */ #user-info { width: 70%; } #user-form { position: relative; height: 100%; } #user-form fieldset { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 60%; aspect-ratio: 1.5; } #user-form legend { border: solid 1px gray; border-radius: 5px; padding: 2px 5px; } #user-form fieldset, #user-form legend { background-color: transparent; backdrop-filter: blur(50px); } #user-info-container { min-height: 115px; display: flex; flex-direction: column; } #user-info-container div { margin: 5px; padding: 2px; width: 100%; } #user-info-container label { float: left; width: 80px; } #email-container { display: none; } #password-container { position: relative; } .show-password { position: absolute; } .show-password > img { width: 100%; height: 100%; } #user-protocol-container { height: 50px; border-top: solid 1px #10101021; } #user-protocol-container p { height: 50px; } /* 右边控制区域 */ #form-select { width: 30%; } #form-select > div:first-child { /* 登陆/注册 选项 */ text-align: left; min-height: 20%; } #form-select select { background-color: #EBEBEB; border-width: 1px; border-radius: 5px; margin: 5px; } #form-select option { border-radius: 0; } #user-form-submit { /* 提交选项 */ min-height: 60%; position: relative; } #user-form-submit button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; width: 40%; aspect-ratio: 2; min-width: 50px; background-color: #ADBBDA; border-radius: 5px; border: none; } #user-form-submit button:active { background-color: #8698C4; text-shadow: 1px 1px 1px white; } /* 用户信息- pop up */ #user { position: relative; } .user-popup-box { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -10%); /* backdrop-filter: blur(2px); */ padding-top: 60px; display: none; z-index: 999; } .user-menu-box { height: 100%; width: 100%; position: relative; border: solid 1px #10101011; background-color: #FFF5DA; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .anim-show { opacity: 1; visibility: visible; transform: translateY(0); } .user-menu { width: 80%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .user-menu div { height: 30px; text-align: center; border-bottom: solid 2px gray; margin-bottom: 10px; }