From 68bd753f1b77f39c1dd5609620ce29f9b8b412b5 Mon Sep 17 00:00:00 2001 From: fei.wang <wf18701153496@163.com> Date: 星期一, 13 五月 2024 17:52:13 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/webapp/css/Login/style.css | 249 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 249 insertions(+), 0 deletions(-) diff --git a/src/webapp/css/Login/style.css b/src/webapp/css/Login/style.css new file mode 100644 index 0000000..f281398 --- /dev/null +++ b/src/webapp/css/Login/style.css @@ -0,0 +1,249 @@ +@import url('css2-SourceSansProwght200400700_.css'); + +:root { + --mainColor: #6B5CFF; + +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + +} + +body { + font-family: 'Source Sans Pro', sans-serif; + +} + + + +.wave { + position: fixed; + height: 100%; + left: 0; + bottom: 0; + z-index: -1; +} + +.container { + width: 100vw; + height: 100vh; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 7rem; + padding: 0 2rem; +} + +.img { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.img img { + width: 500px; + +} + +.login-container { + display: flex; + align-items: center; + text-align: center; +} + +form { + width: 360px; + text-transform: uppercase; +} + +.avatar { + width: 100px; +} + +form h2 { + font-size: 2.9rem; + text-transform: uppercase; + margin: 15px 0; + color: #333; +} + +.input-div { + position: relative; + display: grid; + grid-template-columns: 7% 93%; + margin: 25px 0; + padding: 5px 0; + border:0.5px solid #d9d9d9; + text-decoration: none; + outline: none; + + +} + +.input-div:after, +.input-div:before { + content: ''; + position: absolute; + bottom: -2px; + width: 0; + height: 2px; + background-color: var(--mainColor); + transition: .3s; + outline: none; +} + +.input-div:after { + right: 50%; +} + +.input-div:before { + left: 50%; +} + +.input-div.focus .i i { + color: var(--mainColor); +} + +.input-div.focus div h5 { + top: -5px; + font-size: 10px; + +} + +.input-div.focus:after, +.input-div.focus:before { + width: 50%; + +} + +.input-div.one { + margin-top: 0; +} + +.input-div.two { + margin-bottom: 4px; +} + +.i { + display: flex; + justify-content: center; + align-items: center; +} + +.i i { + color: #d9d9d9; + transition: .3s; +} + +.input-div>div { + position: relative; + height: 45px; +} + +.input-div>div h5 { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + color: #999; + font-size: 18px; + transition: .3s; +} + + +.input { + position: absolute; + outline: 0; + width: 100%; + height: 100%; + top: 0; + left: 0; + border: none; + background: none; + padding: 0.5rem 0.7rem; + font-size: 1.2rem; + color: #555; + font-family: 'Source Sans Pro', sans-serif; + +} + +a { + display: block; + text-align: center; + text-decoration: none; + color: #999; + font-size: 0.7rem; + letter-spacing: 3px; + transition: .3s; + margin: 20px; +} + +a:hover { + color: var(--mainColor); +} + +.btn { + display: block; + width: 100%; + height: 40px; + border-radius: 25px; + text-transform: uppercase; + background-color: var(--mainColor); + color: white; + border: none; + letter-spacing: 1px; + margin-top: 20px; + transition: .5s; +} + +.btn:hover { + background-color: #5245ca; +} + +@media screen and (max-width: 1000px) { + form { + width: 290px; + } + + .login-container h2 { + font-size: 2.4rem; + margin: 8px 0; + } + + .img img { + width: 400px; + } +} + +@media screen and (max-width: 900px) { + body { + background-color: var(--mainColor); + } + + .container { + grid-template-columns: 1fr; + } + + .img { + display: none; + } + + .wave { + display: none; + } + + .login-container { + justify-content: center; + color: var(--mainColor); + } + + .form-login { + padding: 40px; + background-color: #fff; + width: 420px; + border-radius: 8px; + box-shadow: 3px 3px 15px rgba(88, 34, 160, 0.2); + } +} \ No newline at end of file -- Gitblit v1.9.3