|
|
@@ -0,0 +1,179 @@
|
|
|
+html {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+*,
|
|
|
+*::before,
|
|
|
+*::after {
|
|
|
+ box-sizing: inherit;
|
|
|
+}
|
|
|
+.signInForm{
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ width: 600px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ background-color: blueviolet;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: solid 2px black;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.passwordInput , .loginInput ,.confirmPasswordInput{
|
|
|
+ font-size: 18px;
|
|
|
+ color: rgb(94, 91, 91);
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.hiddenInput {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.passwordInput::placeholder{
|
|
|
+ font-size: 18px;
|
|
|
+ background: -webkit-linear-gradient(left, rgb(8, 8, 8) 0%, rgb(2, 2, 2) 65%,red 60%, red 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.labelCheckBox{
|
|
|
+ font-size: 18px;
|
|
|
+ color: rgb(183, 184, 184);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.btnSubmit{
|
|
|
+ width: auto;
|
|
|
+ background-color: black;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: solid 2px rgb(8, 31, 243);
|
|
|
+ font-size: 28px;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.btnSubmit__disable {
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 28px;
|
|
|
+ width: auto;
|
|
|
+ pointer-events: none;
|
|
|
+ color: #c0c0c0;
|
|
|
+ border: solid 2px rgb(133, 132, 132);
|
|
|
+ background-color: #ffffff;
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
+
|
|
|
+.formWrapper{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: rgb(219, 214, 214);
|
|
|
+ border: solid 5px grey;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.placeholderForm{
|
|
|
+ position: relative;
|
|
|
+ width: 340px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 5px;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+
|
|
|
+.title{
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.title::before{
|
|
|
+ content: '*';
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+
|
|
|
+.warningSpan{
|
|
|
+ display: inline;
|
|
|
+ width: 340px;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 5px;
|
|
|
+ font-size: 17px;
|
|
|
+ color: rgb(252, 14, 14);
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+
|
|
|
+.warningSpan--hidden{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.formInput {
|
|
|
+ height: 40px;
|
|
|
+ width: 340px;
|
|
|
+ color: white;
|
|
|
+ font-size: 18px;
|
|
|
+ background-color: grey;
|
|
|
+ border: solid 2px rgb(240, 236, 236);
|
|
|
+ border-radius: 10px;
|
|
|
+ outline: none;
|
|
|
+ padding-left: 10px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.wrongField{
|
|
|
+border: solid 2px red;
|
|
|
+color: red;
|
|
|
+}
|
|
|
+
|
|
|
+.rightInput {
|
|
|
+ color: green;
|
|
|
+ border: solid 2px green;
|
|
|
+}
|
|
|
+
|
|
|
+.placeholderWrong{
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+
|
|
|
+.placeholderRight{
|
|
|
+ color: green;
|
|
|
+}
|
|
|
+
|
|
|
+.btnWrapper{
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: grey;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.okButton{
|
|
|
+ margin-right: 20px;
|
|
|
+ background-color: green;
|
|
|
+ color: white;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.cancelButton{
|
|
|
+ margin-right: 20px;
|
|
|
+ background-color: rgb(248, 15, 15);
|
|
|
+ color: white;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.cancelButton , .okButton {
|
|
|
+ font-size: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
