You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
563 lines
12 KiB
563 lines
12 KiB
.login { |
|
width: 100%; |
|
height: 100vh; |
|
position: relative; |
|
font-family: numeralLight; |
|
&__options{ |
|
color: #B5B5B5; |
|
a { |
|
color: #84de56; |
|
} |
|
} |
|
img { |
|
// transform: rotate(-90deg); |
|
} |
|
.MuiButtonBase-root{ |
|
padding: 0px !important; |
|
} |
|
background: linear-gradient( |
|
135deg, |
|
hsla(0, 0%, 31%, 1) 0%, |
|
hsla(0, 0%, 0%, 1) 100% |
|
); |
|
background: -moz-linear-gradient( |
|
135deg, |
|
hsla(0, 0%, 31%, 1) 0%, |
|
hsla(0, 0%, 0%, 1) 100% |
|
); |
|
background: -webkit-linear-gradient( |
|
135deg, |
|
hsla(0, 0%, 31%, 1) 0%, |
|
hsla(0, 0%, 0%, 1) 100% |
|
); |
|
.footer { |
|
position: fixed; |
|
bottom: 0px; |
|
left: 0px; |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1441px) { |
|
.login { |
|
section { |
|
width: 410px; |
|
b { |
|
color: white; |
|
font-size: 20px; |
|
margin-bottom: 30px; |
|
font-weight: 500; |
|
p { |
|
font-size: 16px; |
|
} |
|
} |
|
|
|
button { |
|
margin-top: 25px; |
|
background-color: #84de56; |
|
color: white; |
|
font-size: 20px; |
|
padding: 10px 0px; |
|
border: 0px; |
|
border-radius: 10px; |
|
} |
|
} |
|
&__info { |
|
width: 350px; |
|
margin: 40px auto 0px; |
|
text-align: center; |
|
color: white; |
|
font-size: 14px; |
|
a { |
|
color: #84de56; |
|
} |
|
} |
|
&__back { |
|
margin-bottom: 60px; |
|
img{ |
|
transform: rotate(-90deg); |
|
} |
|
a { |
|
color: white; |
|
font-size: 13px; |
|
} |
|
} |
|
&__options{ |
|
div{ |
|
font-size: 13px; |
|
} |
|
a{ |
|
font-size: 15px; |
|
} |
|
} |
|
.MuiFormControl-root { |
|
width: 100%; |
|
margin: 10px auto !important; |
|
.MuiSelect-iconOutlined { |
|
display: none; |
|
} |
|
.MuiSelect-outlined.MuiSelect-outlined { |
|
padding-right: 15px; |
|
} |
|
color: #797979 !important; |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
top: 0px !important; |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
border-color: #666666 !important; |
|
border-width: 1px !important; |
|
color: green !important; |
|
border-radius: 10px !important; |
|
} |
|
|
|
.MuiOutlinedInput-input { |
|
padding: 15px 14px !important; |
|
font-family: numeralLight; |
|
font-size: 20px; |
|
&:focus{ |
|
border: 0.2px solid #84de56 !important; |
|
border-radius: 10px; |
|
transform : translateY(0.5px); |
|
} |
|
} |
|
.MuiInputLabel-outlined { |
|
font-family: numeralLight !important; |
|
display: inline !important; |
|
position: absolute; |
|
text-align: right !important; |
|
right: 15px; |
|
top: 22px; |
|
padding: 0px !important; |
|
transform: translate(0px, 0px) scale(1) !important; |
|
} |
|
.MuiInputLabel-shrink { |
|
text-align: center !important; |
|
display: inline; |
|
position: absolute; |
|
right: 0px; |
|
top: -8px; |
|
transform: translate(0px, 0px) scale(0.85) !important; |
|
padding: 0px 10px !important; |
|
} |
|
|
|
label { |
|
background-color: #2F2F2F; |
|
width: fit-content; |
|
text-align: center; |
|
color: #B5B5B5 !important; |
|
letter-spacing: -1px; |
|
font-size: 16px; |
|
} |
|
.Mui-focused { |
|
color: rgba(0, 0, 0, 1) !important; |
|
border-color: #84de56 !important; |
|
// background-color: white; |
|
color: #84de56 !important; |
|
} |
|
|
|
.MuiInputBase-input { |
|
height: auto !important; |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
|
.login { |
|
section { |
|
width: 350px; |
|
transform: scale(0.9); |
|
b { |
|
color: white; |
|
font-size: calc(100vw / 80); |
|
margin-bottom: 30px; |
|
font-weight: 500; |
|
} |
|
|
|
button { |
|
margin-top: 25px; |
|
background-color: #84de56; |
|
color: white; |
|
font-size: calc(100vw / 80); |
|
padding: 10px 0px; |
|
border: 0px; |
|
border-radius: 10px; |
|
} |
|
} |
|
&__info { |
|
width: 300px; |
|
margin: 40px auto 0px; |
|
text-align: center; |
|
color: white; |
|
font-size: calc(100vw / 110); |
|
a { |
|
color: #84de56; |
|
} |
|
} |
|
&__back { |
|
margin-bottom: 40px; |
|
img{ |
|
transform: rotate(-90deg); |
|
} |
|
a { |
|
color: white; |
|
font-size: calc(100vw / 110); |
|
} |
|
} |
|
&__options{ |
|
div{ |
|
font-size: calc(100vw / 110); |
|
} |
|
a{ |
|
font-size: calc(100vw / 110); |
|
} |
|
} |
|
.MuiFormControl-root { |
|
width: 100%; |
|
margin: 10px auto !important; |
|
.MuiSelect-iconOutlined { |
|
display: none; |
|
} |
|
.MuiSelect-outlined.MuiSelect-outlined { |
|
padding-right: 15px; |
|
} |
|
color: #797979 !important; |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
top: 0px !important; |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
border-color: #666666 !important; |
|
border-width: 1px !important; |
|
color: green !important; |
|
border-radius: 10px !important; |
|
} |
|
|
|
.MuiOutlinedInput-input { |
|
padding: 10px 14px !important; |
|
font-family: numeralLight; |
|
font-size: calc(100vw / 80); |
|
&:focus{ |
|
border: 0.2px solid #84de56 !important; |
|
border-radius: 10px; |
|
transform : translateY(0px); |
|
z-index: 100; |
|
} |
|
} |
|
.MuiInputLabel-outlined { |
|
font-family: numeralLight !important; |
|
display: inline !important; |
|
position: absolute; |
|
text-align: right !important; |
|
right: 15px; |
|
top: calc(50%); |
|
padding: 0px !important; |
|
transform: translate(0px, -50%) scale(1) !important; |
|
} |
|
.MuiInputLabel-shrink { |
|
text-align: center !important; |
|
display: inline; |
|
position: absolute; |
|
right: 0px; |
|
top: -8px; |
|
transform: translate(0px, 0px) scale(0.85) !important; |
|
padding: 0px 10px !important; |
|
} |
|
|
|
label { |
|
background-color: #2F2F2F; |
|
width: fit-content; |
|
text-align: center; |
|
color: #B5B5B5 !important; |
|
letter-spacing: -1px; |
|
font-size: calc(100vw / 100); |
|
z-index: 110; |
|
} |
|
.Mui-focused { |
|
color: rgba(0, 0, 0, 1) !important; |
|
border-color: #84de56 !important; |
|
// background-color: white; |
|
color: #84de56 !important; |
|
} |
|
|
|
.MuiInputBase-input { |
|
height: auto !important; |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
|
.login { |
|
background: black; |
|
.footer{ |
|
display: none !important; |
|
} |
|
section { |
|
// background-color: red; |
|
width: 90%; |
|
max-width: 700px; |
|
height: calc(100% - 60px); |
|
justify-content: center; |
|
b { |
|
color: white; |
|
font-size: calc(100vw / 30); |
|
margin-bottom: 30px; |
|
font-weight: 500; |
|
} |
|
|
|
button { |
|
background-color: #84de56; |
|
color: white; |
|
font-size: calc(100vw / 30); |
|
width : 100%; |
|
max-width: 400px; |
|
margin: 50px auto 0px; |
|
padding: 10px 0px; |
|
border: 0px; |
|
border-radius: 10px; |
|
} |
|
} |
|
&__info { |
|
width: 300px; |
|
margin: 40px auto 0px; |
|
text-align: center; |
|
color: white; |
|
font-size: calc(100vw / 40); |
|
a { |
|
color: #84de56; |
|
} |
|
} |
|
&__back { |
|
position: fixed; |
|
top: 100px; |
|
margin-bottom: 40px; |
|
left: 30px; |
|
a { |
|
color: white; |
|
font-size: calc(100vw / 110); |
|
} |
|
img{ |
|
width : 50px; |
|
} |
|
} |
|
&__options{ |
|
padding-top: 20px; |
|
div{ |
|
font-size: calc(100vw / 40); |
|
} |
|
a{ |
|
font-size: calc(100vw / 45); |
|
} |
|
} |
|
.MuiFormControl-root { |
|
width: 100%; |
|
margin: 10px auto !important; |
|
.MuiSelect-iconOutlined { |
|
display: none; |
|
} |
|
.MuiSelect-outlined.MuiSelect-outlined { |
|
padding-right: 15px; |
|
} |
|
color: #797979 !important; |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
top: 0px !important; |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
border-color: #666666 !important; |
|
border-width: 1px !important; |
|
color: green !important; |
|
border-radius: 10px !important; |
|
} |
|
|
|
.MuiOutlinedInput-input { |
|
padding: 10px 14px !important; |
|
font-family: numeralLight; |
|
font-size: calc(100vw / 30); |
|
background-color: #2A2A2A; |
|
&:focus{ |
|
border: 0.2px solid #84de56 !important; |
|
border-radius: 10px; |
|
transform : translateY(0px); |
|
z-index: 100; |
|
} |
|
} |
|
.MuiInputLabel-outlined { |
|
font-family: numeralLight !important; |
|
display: inline !important; |
|
position: absolute; |
|
text-align: right !important; |
|
right: 15px; |
|
top: calc(50%); |
|
padding: 0px !important; |
|
transform: translate(0px, -50%) scale(1) !important; |
|
} |
|
.MuiInputLabel-shrink { |
|
text-align: center !important; |
|
display: inline; |
|
position: absolute; |
|
right: 0px; |
|
top: -8px; |
|
transform: translate(0px, 0px) scale(0.85) !important; |
|
padding: 0px 10px !important; |
|
} |
|
|
|
label { |
|
background-color: #2A2A2A; |
|
width: fit-content; |
|
text-align: center; |
|
color: #B5B5B5 !important; |
|
letter-spacing: -1px; |
|
font-size: calc(100vw / 40); |
|
z-index: 110; |
|
} |
|
.Mui-focused { |
|
color: rgba(0, 0, 0, 1) !important; |
|
border-color: #84de56 !important; |
|
// background-color: white; |
|
color: #84de56 !important; |
|
} |
|
|
|
.MuiInputBase-input { |
|
height: auto !important; |
|
} |
|
} |
|
} |
|
|
|
|
|
@media screen and (max-width: 640px) { |
|
.login { |
|
background: black; |
|
section { |
|
// background-color: red; |
|
width: 90%; |
|
max-width: 400px; |
|
height: calc(100% - 60px); |
|
// transform: scale(0.9); |
|
justify-content: center; |
|
// align-items: center; |
|
b { |
|
color: white; |
|
font-size: calc(100vw / 18); |
|
margin-bottom: 30px; |
|
font-weight: 500; |
|
} |
|
|
|
button { |
|
// position: absolute; |
|
// top: 100px; |
|
// left: 20px; |
|
margin-top: 25px; |
|
background-color: #84de56; |
|
color: white; |
|
font-size: calc(100vw / 25); |
|
padding: 10px 0px; |
|
border: 0px; |
|
border-radius: 10px; |
|
} |
|
} |
|
&__info { |
|
width: 300px; |
|
margin: 40px auto 0px; |
|
text-align: center; |
|
color: white; |
|
font-size: calc(100vw / 30); |
|
a { |
|
color: #84de56; |
|
} |
|
} |
|
&__back { |
|
position: fixed; |
|
top: 70px; |
|
left : 20px; |
|
margin-bottom: 40px; |
|
a { |
|
color: white; |
|
font-size: calc(100vw / 110); |
|
} |
|
img{ |
|
// transform: scale() |
|
} |
|
} |
|
&__options{ |
|
div{ |
|
font-size: calc(100vw / 30); |
|
} |
|
a{ |
|
font-size: calc(100vw / 30); |
|
} |
|
} |
|
.MuiFormControl-root { |
|
width: 100%; |
|
margin: 10px auto !important; |
|
.MuiSelect-iconOutlined { |
|
display: none; |
|
} |
|
.MuiSelect-outlined.MuiSelect-outlined { |
|
padding-right: 15px; |
|
} |
|
color: #797979 !important; |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
top: 0px !important; |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
border-color: #666666 !important; |
|
border-width: 1px !important; |
|
color: green !important; |
|
border-radius: 10px !important; |
|
} |
|
|
|
.MuiOutlinedInput-input { |
|
padding: 10px 14px !important; |
|
font-family: numeralLight; |
|
font-size: calc(100vw / 20); |
|
background-color: #2A2A2A; |
|
border-radius: 10px; |
|
&:focus{ |
|
border: 0.2px solid #84de56 !important; |
|
border-radius: 10px; |
|
transform : translateY(0px); |
|
z-index: 100; |
|
} |
|
} |
|
.MuiInputLabel-outlined { |
|
font-family: numeralLight !important; |
|
display: inline !important; |
|
position: absolute; |
|
text-align: right !important; |
|
right: 15px; |
|
top: calc(50%); |
|
padding: 0px !important; |
|
transform: translate(0px, -50%) scale(1) !important; |
|
} |
|
.MuiInputLabel-shrink { |
|
text-align: center !important; |
|
display: inline; |
|
position: absolute; |
|
right: 0px; |
|
top: -8px; |
|
transform: translate(0px, 0px) scale(0.85) !important; |
|
padding: 0px 10px !important; |
|
} |
|
|
|
label { |
|
background-color: #2A2A2A; |
|
width: fit-content; |
|
text-align: center; |
|
color: #B5B5B5 !important; |
|
letter-spacing: -1px; |
|
font-size: calc(100vw / 30); |
|
z-index: 110; |
|
} |
|
.Mui-focused { |
|
color: rgba(0, 0, 0, 1) !important; |
|
border-color: #84de56 !important; |
|
// background-color: white; |
|
color: #84de56 !important; |
|
} |
|
|
|
.MuiInputBase-input { |
|
height: auto !important; |
|
} |
|
} |
|
}
|
|
|