From caca079a1f7e31c20649b200361376cd04911fae Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期日, 11 九月 2022 20:25:22 +0800
Subject: [PATCH] #
---
src/main/webapp/static/css/login.css | 534 +++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 462 insertions(+), 72 deletions(-)
diff --git a/src/main/webapp/static/css/login.css b/src/main/webapp/static/css/login.css
index 8dcb50e..2e55377 100644
--- a/src/main/webapp/static/css/login.css
+++ b/src/main/webapp/static/css/login.css
@@ -1,83 +1,473 @@
-@media screen and (min-width: 1200px) {
- .cool-container {
- width: 1170px;
- }
-}
-@media screen and (min-width: 992px) {
- .cool-container {
- width: 970px;
- }
+
+
+
+
+/*//////////////////////////////////////////////////////////////////
+[ FONT ]*/
+
+@font-face {
+ font-family: Montserrat-Regular;
+ src: url('font/montserrat/Montserrat-Regular.ttf');
}
-@media screen and (min-width: 768px) {
- .cool-container {
- width: 750px;
- }
-}
-.clearfix:after {
- clear: both;
-}
-.cool-row-3{
- width: 33% !important
+@font-face {
+ font-family: Montserrat-ExtraBold;
+ src: url('font/montserrat/Montserrat-ExtraBold.ttf');
}
-.cool-container{
- position: relative;
- height: 400px;
- z-index: 10;
- top: 20%;
- padding-right: 15px;
- padding-left: 15px;
- margin-right: auto;
- margin-left: auto;
+@font-face {
+ font-family: Montserrat-Bold;
+ src: url('font/montserrat/Montserrat-Bold.ttf');
}
-.cool-center{
- text-align: center;
-
+
+
+/*//////////////////////////////////////////////////////////////////
+[ RESTYLE TAG ]*/
+
+
+
+/*---------------------------------------------*/
+input {
+ outline: none;
+ border: none;
}
-.cool-input{
- display: inline-block;
- width: 100%;
- height: 32px;
- line-height: 1.5;
- padding: 4px 7px;
- font-size: 12px;
- border: 1px solid #dddee1;
- border-radius: 4px;
- color: #495060;
- background-color: #fff;
- background-image: none;
- position: relative;
- cursor: text;
- transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
+
+
+input:focus::-webkit-input-placeholder { color:transparent; }
+input:focus:-moz-placeholder { color:transparent; }
+input:focus::-moz-placeholder { color:transparent; }
+input:focus:-ms-input-placeholder { color:transparent; }
+
+
+input::-webkit-input-placeholder { color: #999999; }
+input:-moz-placeholder { color: #999999; }
+input::-moz-placeholder { color: #999999; }
+input:-ms-input-placeholder { color: #999999; }
+
+/*---------------------------------------------*/
+button {
+ outline: none !important;
+ border: none;
+ background: transparent;
}
-.cool-button-default{
- display: inline-block;
- margin-bottom: 0;
- font-weight: 400;
- text-align: center;
- vertical-align: middle;
- -ms-touch-action: manipulation;
- touch-action: manipulation;
+
+button:hover {
cursor: pointer;
- background-image: none;
- border: 1px solid transparent;
- white-space: nowrap;
- line-height: 1.5;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- padding: 6px 15px;
- font-size: 12px;
- border-radius: 4px;
- transition: color .2s linear,background-color .2s linear,border .2s linear;
- color: #495060;
- background-color: #f7f7f7;
- border-color: #dddee1;
}
-.cool-button-default:hover{
- color: #57a3f3;
+
+
+/*//////////////////////////////////////////////////////////////////
+[ Utility ]*/
+.txt1 {
+ font-family: Montserrat-Regular;
+ font-size: 16px;
+ color: #cccccc;
+ line-height: 1.4;
+}
+
+.bo1 {
+ border-bottom: 1px solid #999999;
+}
+
+.hov1:hover {
+ border-color: #d33f8d;
+}
+
+
+/*//////////////////////////////////////////////////////////////////
+[ login ]*/
+
+.limiter {
+ width: 100%;
+ margin: 0 auto;
+}
+
+.container-login100 {
+ width: 100%;
+ min-height: 100vh;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ padding: 15px;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+
+ position: relative;
+ z-index: 1;
+}
+
+.container-login100::before {
+ content: "";
+ display: block;
+ position: absolute;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background: #005bea;
+ background: -webkit-linear-gradient(bottom, #005bea, #00c6fb);
+ background: -o-linear-gradient(bottom, #005bea, #00c6fb);
+ background: -moz-linear-gradient(bottom, #005bea, #00c6fb);
+ background: linear-gradient(bottom, #005bea, #00c6fb);
+ opacity: 0.9;
+}
+
+.wrap-login100 {
+ width: 390px;
+ background: transparent;
+}
+
+
+
+/*------------------------------------------------------------------
+[ ]*/
+.login100-form {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+
+.login100-form-title {
+ font-family: "寰蒋闆呴粦";
+ font-size: 48px;
+ line-height: 1.2;
+ text-align: center;
+ font-weight: bold;
+ letter-spacing: 10px;
+
+ width: 100%;
+ display: block;
+ color: #3660c9;
+ margin-top: 10px;
+ /*margin-bottom: 30px;*/
+}
+
+/*---------------------------------------------*/
+.login100-form-avatar {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ overflow: hidden;
+ margin: 0 auto;
+}
+.login100-form-avatar img {
+ width: 100%;
+}
+
+
+/*---------------------------------------------*/
+.wrap-input100 {
+ display: inline-block;
+ position: relative;
+ width: 80%;
+ z-index: 1;
+ margin-top: 10px;
+}
+
+.input100::placeholder {
+ font-family: Montserrat-Bold;
+ font-size: 15px;
+ line-height: 1.2;
+ color: #c9c9c9;
+
+}
+.input100 {
+ font-family: Montserrat-Bold;
+ font-size: 15px;
+ line-height: 1.2;
+ color: #333333;
+
+ box-sizing: border-box;
+ display: block;
+ width: 100%;
+ background: #fff;
+ height: 50px;
+ border-radius: 25px;
+ padding: 0 30px 0 53px;
+}
+
+
+
+/*------------------------------------------------------------------
+[ Focus ]*/
+.focus-input100 {
+ display: block;
+ position: absolute;
+ border-radius: 25px;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ box-shadow: 0px 0px 0px 0px;
+ color: rgba(193, 193, 193, 0.6);
+}
+
+.input100:focus + .focus-input100 {
+ -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
+ animation: anim-shadow 0.5s ease-in-out forwards;
+}
+
+@-webkit-keyframes anim-shadow {
+ to {
+ box-shadow: 0px 0px 80px 30px;
+ opacity: 0;
+ }
+}
+
+@keyframes anim-shadow {
+ to {
+ box-shadow: 0px 0px 80px 30px;
+ opacity: 0;
+ }
+}
+
+.symbol-input100 {
+ font-size: 15px;
+ color: #999999;
+
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ align-items: center;
+ position: absolute;
+ border-radius: 25px;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding-left: 30px;
+ pointer-events: none;
+
+ -webkit-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ transition: all 0.4s;
+}
+
+.input100:focus + .focus-input100 + .symbol-input100 {
+ color: #99C1C1C1;
+ padding-left: 23px;
+}
+
+
+/*------------------------------------------------------------------
+[ Button ]*/
+.container-login100-form-btn {
+ width: 80%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ flex-wrap: wrap;
+ justify-content: center;
+ display: inline-block;
+ margin-top: 15px;
+}
+
+.login100-form-btn {
+ font-family: Montserrat-Bold;
+ font-size: 15px;
+ line-height: 1.5;
+ color: #e0e0e0;
+
+ width: 100%;
+ height: 50px;
+ border-radius: 25px;
+ background: #333333;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 25px;
+
+ -webkit-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ transition: all 0.4s;
+
+ position: relative;
+ z-index: 1;
+}
+
+.login100-form-btn::before {
+ content: "";
+ display: block;
+ position: absolute;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ border-radius: 25px;
+ top: 0;
+ left: 0;
+ background: #005bea;
+ background: -webkit-linear-gradient(left, #005bea, #00c6fb);
+ background: -o-linear-gradient(left, #005bea, #00c6fb);
+ background: -moz-linear-gradient(left, #005bea, #00c6fb);
+ background: linear-gradient(left, #005bea, #00c6fb);
+ -webkit-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ transition: all 0.4s;
+ opacity: 0;
+}
+
+.login100-form-btn:hover {
+ background: transparent;
+ color: #fff;
+}
+
+.login100-form-btn:hover:before {
+ opacity: 1;
+}
+
+/*------------------------------------------------------------------
+[ Button sign in with ]*/
+.btn-face,
+.btn-google {
+ font-family: Raleway-Bold;
+ font-size: 16px;
+ line-height: 1.2;
+
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: calc((100% - 10px) / 2);
+ height: 40px;
+ border-radius: 3px;
+ border: 1px solid #e6e6e6;
background-color: #fff;
- border-color: #57a3f3;
+
+ -webkit-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ transition: all 0.4s;
+}
+
+
+.btn-face {
+ color: #3b5998;
+}
+
+.btn-face i {
+ font-size: 20px;
+ margin-right: 10px;
+ padding-bottom: 1px;
+}
+
+.btn-google {
+ color: #555555;
+}
+
+.btn-google img {
+ width: 19px;
+ margin-right: 10px;
+ padding-bottom: 1px;
+}
+
+
+.btn-face:hover,
+.btn-google:hover {
+ border-color: #d33f8d;
+}
+
+
+
+/*------------------------------------------------------------------
+[ Alert validate ]*/
+
+.validate-input {
+ position: relative;
+}
+
+.alert-validate::before {
+ content: attr(data-validate);
+ position: absolute;
+ max-width: 70%;
+ background-color: white;
+ border: 1px solid #c80000;
+ border-radius: 14px;
+ padding: 4px 25px 4px 10px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ transform: translateY(-50%);
+ right: 8px;
+ pointer-events: none;
+
+ font-family: Montserrat-Bold;
+ color: #c80000;
+ font-size: 13px;
+ line-height: 1.4;
+ text-align: left;
+
+ visibility: hidden;
+ opacity: 0;
+
+ -webkit-transition: opacity 0.4s;
+ -o-transition: opacity 0.4s;
+ -moz-transition: opacity 0.4s;
+ transition: opacity 0.4s;
+}
+
+.alert-validate::after {
+ content: "\f06a";
+ font-family: FontAwesome;
+ display: block;
+ position: absolute;
+ color: #c80000;
+ font-size: 15px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ transform: translateY(-50%);
+ right: 13px;
+}
+
+.alert-validate:hover:before {
+ visibility: visible;
+ opacity: 1;
+}
+
+@media (max-width: 992px) {
+ .alert-validate::before {
+ visibility: visible;
+ opacity: 1;
+ }
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ responsive ]*/
+
+@media (max-width: 576px) {
+ .wrap-login100 {
+ padding-top: 80px;
+ padding-left: 15px;
+ padding-right: 15px;
+ }
}
--
Gitblit v1.9.1