USTC 统一身份认证登录界面改为 UCAS 样式
// ==UserScript== // @name USTC x UCAS // @namespace http://tampermonkey.net/ // @version 0.2.1 // @description USTC 统一身份认证登录界面改为 UCAS 样式 // @author PRO // @license gpl-3.0 // @match https://passport.ustc.edu.cn/login* // @icon http://passport.ustc.edu.cn/images/favicon.ico // @grant none // ==/UserScript== (function() { 'use strict'; let css = document.createElement("style"); css.textContent = ` body { background-image: url(https://icourse.ucas.ac.cn/static/img/c-3.8727b282.jpg); background-size: cover; } div.box.center { margin: 0px auto !important; border-radius: 6px; background: rgb(255, 255, 255); max-width: 400px; padding: 25px 25px 5px; box-shadow: none; height: unset; } div.card { padding: 0px; } form.form-style { margin: 0px; width: 100%; height: 282px; } #header > h3 { margin: 0 auto 30px auto; text-align: center; color: #707070; font-weight: 500; line-height: 1.1; } svg.prefix { position: absolute; left: 7px; top: 0; width: 14px; height: 39px; z-index: 1; color: #bcc6db; fill: currentColor; } input.input-box { height: 38px; position: relative; font-size: 14px; display: inline-block; width: 100%; padding-left: 30px; -webkit-appearance: none; background-color: #fff; background-image: none; border-radius: 4px; border: 1px solid #dcdfe6; -webkit-box-sizing: border-box; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; outline: none; padding: 0px 15px 0px 30px; -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1); transition: border-color .2s cubic-bezier(.645,.045,.355,1); } input.input-box:focus { border-color: #1890ff; } span.error-tip { color: #ff4949; font-size: 12px; line-height: 1; padding-top: 4px; position: absolute; top: 100%; left: 0; transition: transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1); transform: scaleY(0); transform-origin: center top; } div.group { padding-top: 0px; padding-bottom: 0px; margin-bottom: 22px; height: unset; } div.validate { padding-top: 0px; padding-bottom: 0px; margin-bottom: 22px; height: 38px; } div.validate-img-area { width: 33%; height: 38px; } img.validate-img { margin-top: 0px; height: 38px; } div.bottom-box { height: 102px; } select.bottom-box-selector { bottom: unset; top: 0px; color: #606266; height: 19px; line-height: 20px; padding: 0px 0; font-size: 10px; margin: 0px 0px 25px; } a.bottom-box-button-area { color: #1890ff; float: right; position: unset; right: unset; bottom: unset; font-size: 14px; font-weight: 500; line-height: unset; } a.bottom-box-button-area:hover { color: #46a6ff; border-bottom: 1px solid #1890ff; } button.btn { width: 100%; padding: 10px 20px; font-size: 14px; border-radius: 4px; color: #fff; background-color: #1890ff; border: 1px solid #1890ff; font-weight: 400; line-height: 14px; letter-spacing: .2em; bottom: 22px; } button.btn:hover { background: #46a6ff; border-color: #46a6ff; } div#footer { position: fixed; bottom: 1em; color: #fff; font-family: Arial; font-size: 12px; letter-spacing: 1px; width: 100%; } div#footer a { color: #fff; } `; let svg = document.createElement("svg"); svg.style.display = "none"; document.querySelector("body").insertAdjacentElement("afterbegin", svg); let input_mod = { // SVG from https://icourse.ucas.ac.cn/static/js/app.68f39dac.js "username": ["账号", "请输入您的账号", '<svg class="prefix" viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.###c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797" /></svg>'], "password": ["密码", "请输入您的密码", '<svg class="prefix" viewBox="0 0 #### ####" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css"></style></defs><path d="M868.593046 403.832442c-30.081109-28.844955-70.037123-44.753273-112.624057-44.753273L265.949606 359.079168c-42.554188 0-82.510202 15.908318-112.469538 44.690852-30.236652 28.782533-46.857191 67.222007-46.857191 108.198258l0 294.079782c0 40.977273 16.619516 79.414701 46.702672 108.136859 29.959336 28.844955 70.069869 44.814672 112.624057 44.814672l490.019383 0c42.585911 0 82.696444-15.969717 112.624057-44.814672 30.082132-28.844955 46.579875-67.222007 46.579875-108.136859L915.172921 511.968278C915.171897 471.053426 898.675178 432.677397 868.593046 403.832442zM841.821309 806.049083c0 22.098297-8.882298 42.772152-25.0###54 58.306964-16.154935 15.661701-37.81935 24.203238-60.752666 24.203238L265.949606 888.559285c-22.934339 0-44.567032-8.54256-60.877509-24.264637-16.186657-15.474436-25.067932-36.148291-25.067932-58.246589L180.004165 511.968278c0-22.035876 8.881274-42.772152 25.192775-58.307987 16.186657-15.536858 37.81935-24.139793 60.753689-24.139793l490.019383 0c22.933315 0 44.597731 8.602935 60.752666 24.139793 16.21838 15.535835 25.0###54 36.272112 25.0###54 58.307987L841.822332 806.049083zM510.974136 135.440715c114.914216 0 208.318536 89.75214 208.318536 200.055338l73.350588 0c0-149.113109-126.366036-270.496667-281.669124-270.496667-155.333788 0-281.699824 121.383558-281.699824 270.496667l73.350588 0C302.623877 225.193879 396.059919 135.440715 510.974136 135.440715zM474.299865 747.244792l73.350588 0L547.650453 629.576859l-73.350588 0L474.299865 747.244792z" p-id="2751" /></svg>'], "validate": ["验证码", "请输入验证码", '<svg class="prefix" viewBox="0 0 #### ####" xmlns="http://www.w3.org/2000/svg"><defs><style type="text/css"></style></defs><path d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z" fill="#C6CCDA" p-id="1940" /><path d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8" fill="#C6CCDA" p-id="1941" /></svg>'] }; for (let key in input_mod) { let input = document.querySelector("input#" + key); if (!input) continue; input.attributes.removeNamedItem("onfocus"); input.attributes.removeNamedItem("onblur"); input.insertAdjacentHTML("afterend", input_mod[key][2]); input.placeholder = input_mod[key][0]; let tip = document.createElement("span"); tip.className = "error-tip"; tip.textContent = input_mod[key][1]; tip.id = key + "-error"; input.parentNode.appendChild(tip); let callback2 = (e) => { input.removeEventListener("blur", callback2); css.textContent += ` input.input-box#${key}:invalid ~ span#${key}-error { visibility: unset; transform: scaleY(1); } input.input-box#${key}:invalid { border-color: #ff4949; }`; }; let callback1 = (e) => { input.removeEventListener("click", callback1); input.addEventListener("blur", callback2); }; input.addEventListener("click", callback1); } document.querySelector("head").appendChild(css); let title = document.createElement("h3"); title.textContent = "中科大在线系统"; header.appendChild(title); let find_pwd = document.querySelector("a#findPassword"); find_pwd.textContent = "找回用户名密码"; let footer = document.querySelector("div#footer"); document.querySelector("body").insertAdjacentElement("afterbegin", footer); function cleanStyle(sel) { let ele = document.querySelector(sel); if (ele) ele.attributes.removeNamedItem("style"); } function tryRemove(sel) { let ele = document.querySelector(sel); if (ele) ele.remove(); } ["img.validate-img", "form.form-style", "select.bottom-box-selector"].forEach(cleanStyle); ["div.qrcode", "div.input_login", "div#header > h1.header-logo", "div#header > h1.header-des"].forEach(tryRemove); document.querySelectorAll("span.bar").forEach((ele) => { ele.remove(); }) })();