body { word-wrap: break-word; /* background: url(https://res.ciduid.top/static/imgs/compressed/93527505_p0_conpressed.jpg) no-repeat fixed; */ background-position: 45% 0; background-size: cover; } .login-box { background-color: rgb(256, 256, 256, 0.6); position: fixed; top: 10%; left: 5%; border-radius: 15px; padding: 20px 20px 17px 20px; } .input-field-group { transition: height .5s; } .login-box-title { font-size: 45px; padding-bottom: 40px; } .input-field input { width: 400px; height: 40px; font-family: Consolas monospace; padding-left: 10px; font-size: 16px; font-weight: bold; border-radius: 10px; border: none; background: rgba(256, 256, 256, 0.6); outline: none; outline: 0; transition: background-color .5s; } .input-field input:focus { background-color: rgb(214, 234, 248, 0.6); } .input-field { margin-bottom: 15px; } /* 仿的是pixiv上登录页的按钮 */ .operator-box .big-button { display: block; margin-top: 15px; margin-bottom: 15px; width: 190px; height: 40px; line-height: 40px; border-radius: 10px; border-style: none; color: #fff; outline: none; font-weight: 700; font-size: 14px; text-align: center; transition: background-color .2s; cursor: pointer; display: inline-block; text-decoration: none; } #login-botton { background-color: rgb(0 150 250); } #register-botton { background-color: rgb(34 139 34); } .botton-box { text-align: center; display: flex; justify-content: space-between; } .operator-box .big-button:hover { background-color: #0382d6; } .operator-box .rl-layout-box .small-link { cursor: pointer; } .rl-layout-box { text-align: center; display: flex; justify-content: space-between; /* line-height: 25px; */ } #dialogMask { width: 100%; height: 100%; word-wrap: break-word; position: fixed; top: 0; left: 0; background: rgb(45 44 44 / 45%); transition: background 300ms; z-index: 1001; display: none; } #background { width: 100%; height: 100%; background: url(https://res.ciduid.top/static/imgs/compressed/93527505_p0_conpressed.jpg) no-repeat fixed; background-position: 45% 0; background-size: cover; word-wrap: break-word; position: fixed; top: 0; left: 0; z-index: -1; filter: blur(1.5px); /* 稍微放大除白边 */ transform: scale(1.01); } .dialogContentBox { display: block; position: fixed; top: 50%; left: 50%; width: 435px; /* height: 313px; */ margin-left: -227px; margin-top: -200px; box-shadow: 2px 2px 11px #a0a0a0, -2px -2px 4px #a0a0a0; background-color: #fff; border-radius: 15px; padding: 30px 20px 15px 20px; } .dialogContentBox .titleBox { } .dialogContentBox .titleBox #title { font-size: 30px; margin: auto auto 15px auto; } .dialogContentBox .bodyBox p { font-size: 20px; } .dialogContentBox .bottonBox { text-align: right; /* margin: auto auto 15px auto; */ } .dialogContentBox .bottonBox #okbtn { border: none; background: rgb(0 150 250); cursor: pointer; color: white; font-family: sans-serif; font-size: 16px; border-radius: 5px; height: 31px; width: 80px; } #errMsgBox p { margin: 0 0 0 0; color: red; } @media screen and (max-width: 494px) { }