more mobile support and misc changes
This commit is contained in:
Halbear
@@ -1,9 +1,104 @@
|
||||
@media only screen and (max-aspect-ratio: 1.165/1) {
|
||||
.showpassword{
|
||||
flex-direction: row-reverse !important;
|
||||
justify-content: center !important;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex-wrap: nowrap;
|
||||
min-height:2vh !important;
|
||||
}
|
||||
.appTitleButton{
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 4.5vh;
|
||||
width: 4.5vh;
|
||||
}
|
||||
.WindowBody{
|
||||
justify-content: center;
|
||||
align-content: start;
|
||||
align-items: center;
|
||||
font-family: "Arial", serif;
|
||||
/*z-index: 5;*/
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
border-top: #8cefff 0.3vh solid;
|
||||
border-left: #8cefff 0.3vh solid;
|
||||
border-bottom: #121e29 0.3vh solid;
|
||||
border-right: #121e29 0.3vh solid;
|
||||
filter: drop-shadow(1vh 1vh 1vh #121e29);
|
||||
backdrop-filter:brightness(0.9) blur(5px);
|
||||
text-shadow: #223342 0 0 2vh;
|
||||
border-radius: 2.5vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 1vh 1vh 1vh #121e29;
|
||||
padding:1vh;
|
||||
transition: 0.6s;
|
||||
}
|
||||
input:hover{
|
||||
height:3vh;
|
||||
min-width: 3vh;
|
||||
}
|
||||
.ForgotPass{
|
||||
transition: 0.25s;
|
||||
font-weight: bold;
|
||||
color: white !important;
|
||||
font-family: "Arial", serif;
|
||||
font-size: 2vh;
|
||||
margin: 1vh;
|
||||
}
|
||||
.Formcheckbox{
|
||||
margin-left: 2vh;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
input{
|
||||
transition: 0.25s;
|
||||
box-shadow: 0 0 1vh #5dacb1;
|
||||
//margin-right: 5vh;
|
||||
margin-bottom: 1vh;
|
||||
transform: scale(1.2);
|
||||
height:2vh;
|
||||
min-width: 2vh;
|
||||
border-radius: 1vh;
|
||||
border: #8cefff 0.2vh solid;
|
||||
background: transparent !important;
|
||||
background-image: linear-gradient(to bottom, rgba(25,50,75,0.75), rgba(25,75,125,0.525), rgba(25,75,125,0.315), rgba(25,75,125,0.315)) !important;
|
||||
}
|
||||
.WindowBody{
|
||||
background-image: linear-gradient(to bottom,rgba(22, 184, 224,0.5) ,rgba(22, 184, 224,0.75),rgba(22, 184, 224,0.35),rgba(42, 184, 224,0.25)),linear-gradient(to bottom, rgba(200,200,255,0.75),rgba(200,200,255,0.4),rgba(200,200,255,0.0),rgba(200,200,255,0.6));
|
||||
}
|
||||
.ButtonArea{
|
||||
align-items: center !important;
|
||||
margin-top: 2.5vh;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.LogInButton:hover{
|
||||
width: 80%;
|
||||
transform: scale(1.3) translateY(1vh)!important;
|
||||
}
|
||||
.LogInButton{
|
||||
border-radius: 2vh !important;
|
||||
width: 75%;
|
||||
transform: scale(1.2) translateY(-1vh);
|
||||
background: transparent !important;
|
||||
background-image: linear-gradient(to bottom, rgba(100,200,255,0.5), rgba(100,200,255,0.25), rgba(100,200,255,0.15), rgba(100,200,255,0.35)) !important;
|
||||
}
|
||||
.FormTitle{
|
||||
font-size: 2.5vh !important;
|
||||
}
|
||||
.LoginField{
|
||||
border-top: #121e29 0.3vh solid;
|
||||
border-left: #121e29 0.3vh solid;
|
||||
border-bottom: #8cefff 0.3vh solid;
|
||||
border-right: #8cefff 0.3vh solid;
|
||||
min-width: 90%;
|
||||
max-width: 100%;
|
||||
min-height:5vh;
|
||||
padding: 1vh 5vh;
|
||||
padding: 1vh;// 5vh;
|
||||
backdrop-filter: blur(15px);
|
||||
background-color: RGBA(10,30,40,0.5);
|
||||
border-radius: 2.5vh;
|
||||
margin-bottom: 1vh;
|
||||
flex-direction: column-reverse;
|
||||
@@ -14,10 +109,11 @@
|
||||
}
|
||||
.IconText{
|
||||
font-family: "Arial", serif;
|
||||
font-size: 1vh !important;
|
||||
font-size: 1.5vh !important;
|
||||
user-select: none;
|
||||
}
|
||||
.whiteText{
|
||||
font-weight: bolder;
|
||||
padding-bottom: 1vh;
|
||||
text-align: center;
|
||||
text-shadow: #0e4044 0.15vh 0.35vh 1vh;
|
||||
@@ -34,7 +130,7 @@
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
width: 95vw;
|
||||
height: 85vh;
|
||||
min-height: 85vh;
|
||||
left: 50vw;
|
||||
top: 50vh;
|
||||
position: absolute;
|
||||
@@ -42,13 +138,123 @@
|
||||
}
|
||||
.WindowTitle{
|
||||
font-family: "Arial", serif;
|
||||
font-size: 1.35vh !important;
|
||||
font-size: 2vh !important;
|
||||
color: white;
|
||||
text-shadow: #0e4044 0.15vh 0.35vh 1vh;
|
||||
margin-left:0.25vh;
|
||||
}
|
||||
}
|
||||
.HideSpinner{
|
||||
display: none;
|
||||
}
|
||||
.LockCentre{
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 50vw;
|
||||
top: 50vh;
|
||||
}
|
||||
.LoadingSpinner{
|
||||
width: 10vh;
|
||||
height: 10vh;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
border: solid 1vh #8cefff;
|
||||
border-bottom: solid 1vh transparent !important;
|
||||
animation: spin 1.5s ease-in-out infinite;
|
||||
filter: drop-shadow(0 0vh 1vh #8cefff);
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
filter: drop-shadow(0 0vh 1vh #121e29);
|
||||
border: solid 1vh #8cefff;
|
||||
transform:translate(-50%,-50%) rotate(0deg);
|
||||
}
|
||||
50%{
|
||||
filter: drop-shadow(0 0vh 1vh #8cefff);
|
||||
border: solid 1vh #121e29;
|
||||
}
|
||||
100% {
|
||||
filter: drop-shadow(0 0vh 1vh #121e29);
|
||||
border: solid 1vh #8cefff;
|
||||
transform:translate(-50%,-50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-aspect-ratio: 1.165/1) {
|
||||
.ForgotPass:hover{
|
||||
font-size: 3vh;
|
||||
cursor: pointer;
|
||||
color: white !important;
|
||||
}
|
||||
.ForgotPass{
|
||||
transition: 0.25s;
|
||||
color: #8cefff !important;
|
||||
font-family: "Arial", serif;
|
||||
}
|
||||
.appTitleButton{
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 3.5vh;
|
||||
width: 3.5vh;
|
||||
}
|
||||
.WindowBody{
|
||||
justify-content: center;
|
||||
align-content: start;
|
||||
align-items: center;
|
||||
font-family: "Arial", serif;
|
||||
/*z-index: 5;*/
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
filter: drop-shadow(1vh 1vh 1vh #121e29);
|
||||
backdrop-filter:brightness(0.9) blur(5px);
|
||||
text-shadow: #223342 0 0 2vh;
|
||||
border-radius: 5vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 1vh 1vh 1vh #121e29;
|
||||
padding:1vh;
|
||||
transition: 0.6s;
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
input:hover{
|
||||
height:5vh;
|
||||
min-width: 5vh;
|
||||
}
|
||||
input{
|
||||
transition: 0.25s;
|
||||
box-shadow: 0 0 1vh #8cefff;
|
||||
margin-right: 5vh;
|
||||
transform: scale(1.2);
|
||||
border: none;
|
||||
height:4vh;
|
||||
min-width: 4vh;
|
||||
border-radius: 1.5vh;
|
||||
border-bottom: #8cefff 0.5vh solid;
|
||||
background: transparent !important;
|
||||
background-image: linear-gradient(to bottom, rgba(25,50,75,0.5), rgba(50,100,155,0.25), rgba(50,100,155,0.15), rgba(50,100,155,0.15)) !important;
|
||||
}
|
||||
.WindowBody{
|
||||
background-image: linear-gradient(to bottom,rgba(22, 184, 224,0.1) ,rgba(22, 184, 224,0.25),rgba(22, 184, 224,0.15),rgba(42, 184, 224,0.05)),linear-gradient(to bottom, rgba(200,200,255,0.5),rgba(200,200,255,0.1),rgba(200,200,255,0.0),rgba(200,200,255,0.2));
|
||||
}
|
||||
.ButtonArea{
|
||||
align-items: flex-start !important;
|
||||
margin-top: 5vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
.LogInButton:hover{
|
||||
width: 17vw;
|
||||
transform: scale(1.3) translateY(1vh)!important;
|
||||
}
|
||||
.LogInButton{
|
||||
border-radius: 2vh !important;
|
||||
width: 15vw;
|
||||
transform: scale(1.2) translateY(1vh);
|
||||
background: transparent !important;
|
||||
background-image: linear-gradient(to bottom, rgba(100,200,255,0.5), rgba(100,200,255,0.25), rgba(100,200,255,0.15), rgba(100,200,255,0.35)) !important;
|
||||
}
|
||||
.FormTitle{
|
||||
font-size: 5vh !important;
|
||||
}
|
||||
.LoginField{
|
||||
min-width: 90%;
|
||||
min-height:5vh;
|
||||
@@ -163,12 +369,6 @@ Button{
|
||||
.MinimiseButton:hover{
|
||||
background-image: url("../GeneralAssets/MinimiseButtonHover.png");
|
||||
}
|
||||
.appTitleButton{
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 3.5vh;
|
||||
width: 3.5vh;
|
||||
}
|
||||
.appTitleButton:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -192,33 +392,17 @@ Button{
|
||||
flex-wrap: nowrap;
|
||||
height: 100%;
|
||||
}
|
||||
.WindowBody{
|
||||
justify-content: center;
|
||||
align-content: start;
|
||||
align-items: center;
|
||||
font-family: "Arial", serif;
|
||||
/*z-index: 5;*/
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
filter: drop-shadow(1vh 1vh 1vh #121e29);
|
||||
backdrop-filter:brightness(0.9) blur(5px);
|
||||
text-shadow: #223342 0 0 2vh;
|
||||
background-image: linear-gradient(to bottom,rgba(22, 184, 224,0.1) ,rgba(22, 184, 224,0.25),rgba(22, 184, 224,0.15),rgba(42, 184, 224,0.05)),linear-gradient(to bottom, rgba(200,200,255,0.5),rgba(200,200,255,0.1),rgba(200,200,255,0.0),rgba(200,200,255,0.2));
|
||||
border-radius: 5vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 1vh 1vh 1vh #121e29;
|
||||
padding:1vh;
|
||||
transition: 0.6s;
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
.WindowBody.Dragging{
|
||||
box-shadow: 2vh 3vh 3vh #121e29;
|
||||
}
|
||||
|
||||
input{
|
||||
text-align: center;
|
||||
text-anchor: middle;
|
||||
}
|
||||
.FormBoxWrapper{
|
||||
margin: 3vh;
|
||||
margin-top: 3vh;
|
||||
margin-right: 3vh;
|
||||
margin-left: 3vh;
|
||||
min-width: 90%;
|
||||
}
|
||||
.minimised{
|
||||
@@ -238,39 +422,7 @@ Button{
|
||||
color: #8cefff !important;
|
||||
font-family: "Arial", serif;
|
||||
}
|
||||
.ButtonArea{
|
||||
align-items: flex-start !important;
|
||||
margin-top: 5vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
.LogInButton:hover{
|
||||
width: 17vw;
|
||||
transform: scale(1.3) translateY(1vh)!important;
|
||||
}
|
||||
input:hover{
|
||||
height:5vh;
|
||||
min-width: 5vh;
|
||||
}
|
||||
input{
|
||||
transition: 0.25s;
|
||||
box-shadow: 0 0 1vh #8cefff;
|
||||
margin-right: 5vh;
|
||||
transform: scale(1.2);
|
||||
border: none;
|
||||
height:3vh;
|
||||
min-width: 3vh;
|
||||
border-radius: 1.5vh;
|
||||
border-bottom: #8cefff 0.5vh solid;
|
||||
background: transparent !important;
|
||||
background-image: linear-gradient(to bottom, rgba(25,50,75,0.5), rgba(50,100,155,0.25), rgba(50,100,155,0.15), rgba(50,100,155,0.15)) !important;
|
||||
}
|
||||
|
||||
.showpassword{
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
.LogInButton{
|
||||
border-radius: 2vh !important;
|
||||
width: 15vw;
|
||||
transform: scale(1.2) translateY(1vh);
|
||||
background: transparent !important;
|
||||
background-image: linear-gradient(to bottom, rgba(100,200,255,0.5), rgba(100,200,255,0.25), rgba(100,200,255,0.15), rgba(100,200,255,0.35)) !important;
|
||||
}
|
||||
Reference in New Issue
Block a user