276 lines
6.8 KiB
CSS
276 lines
6.8 KiB
CSS
@media only screen and (max-aspect-ratio: 1.165/1) {
|
|
.LoginField{
|
|
min-width: 90%;
|
|
min-height:5vh;
|
|
padding: 1vh 5vh;
|
|
backdrop-filter: blur(15px);
|
|
border-radius: 2.5vh;
|
|
margin-bottom: 1vh;
|
|
flex-direction: column-reverse;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
}
|
|
.IconText{
|
|
font-family: "Arial", serif;
|
|
font-size: 1vh !important;
|
|
user-select: none;
|
|
}
|
|
.whiteText{
|
|
padding-bottom: 1vh;
|
|
text-align: center;
|
|
text-shadow: #0e4044 0.15vh 0.35vh 1vh;
|
|
font-family: "Arial", serif;
|
|
color: white;
|
|
font-size: 2vh;
|
|
}
|
|
.PopUpWrapper{
|
|
pointer-events: all;
|
|
z-index: 100 !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
flex-direction: column;
|
|
width: 95vw;
|
|
height: 85vh;
|
|
left: 50vw;
|
|
top: 50vh;
|
|
position: absolute;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.WindowTitle{
|
|
font-family: "Arial", serif;
|
|
font-size: 1.35vh !important;
|
|
color: white;
|
|
text-shadow: #0e4044 0.15vh 0.35vh 1vh;
|
|
margin-left:0.25vh;
|
|
}
|
|
}
|
|
@media only screen and (min-aspect-ratio: 1.165/1) {
|
|
.LoginField{
|
|
min-width: 90%;
|
|
min-height:5vh;
|
|
padding: 1vh 5vh;
|
|
backdrop-filter: blur(15px);
|
|
border-radius: 2.5vh;
|
|
margin-bottom: 1vh;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
align-content: center;
|
|
}
|
|
.WindowTitle{
|
|
font-family: "Arial", serif;
|
|
font-size: 2.35vh;
|
|
color: white;
|
|
text-shadow: #0e4044 0.15vh 0.35vh 1vh;
|
|
margin-left:0.25vh;
|
|
}
|
|
.PopUpWrapper{
|
|
pointer-events: all;
|
|
z-index: 100 !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
flex-direction: column;
|
|
width: 50vw;
|
|
height: 85vh;
|
|
left: 50vw;
|
|
top: 50vh;
|
|
position: absolute;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.IconText{
|
|
font-family: "Arial", serif;
|
|
font-size: 1.35vh !important;
|
|
user-select: none;
|
|
}
|
|
.whiteText{
|
|
text-shadow: #0e4044 0.15vh 0.35vh 1vh;
|
|
font-family: "Arial", serif;
|
|
color: white;
|
|
font-size: 3.35vh;
|
|
}
|
|
}
|
|
.windowIcon{
|
|
user-select: none;
|
|
z-index: 55 !important;
|
|
position: absolute;
|
|
transition: 0.0s !important;
|
|
width: 9.5vh;
|
|
height: 9.5vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
border-radius: 5%;
|
|
}
|
|
Button{
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.DraggableWrapper{
|
|
pointer-events: all;
|
|
z-index: 50; /*!important;*/
|
|
padding: 0;
|
|
Position:Absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.WindowTitleBar{
|
|
backdrop-filter: blur(2px);
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
padding-left: 2vh;
|
|
padding-right: 2vh;
|
|
display: flex;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 5vh;
|
|
/*z-index: 10;*/
|
|
user-select: none;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text-align: center;
|
|
cursor:grab;
|
|
flex-wrap: nowrap;
|
|
background-image: linear-gradient(to bottom, rgba(200,200,255,0.3),rgba(200,200,255,0.1),rgba(200,200,255,0.0),rgba(200,200,255,0.2));
|
|
border: 0.5vh white solid;
|
|
border-radius: 2vh;
|
|
box-shadow: 0 1vh 1vh #1d4746;
|
|
}
|
|
.WindowTitleBar:active{
|
|
cursor: grabbing;
|
|
}
|
|
.ExitButton{
|
|
transition: 0.25s;
|
|
background-image: url("../GeneralAssets/ExitButton.png");
|
|
}
|
|
.ExitButton:hover{
|
|
transform: scale(1.2);
|
|
background-image: url("../GeneralAssets/ExitButtonHover.png");
|
|
}
|
|
.MinimiseButton{
|
|
background-image: url("../GeneralAssets/MinimiseButton.png");
|
|
margin-right: 0.25vh;
|
|
}
|
|
.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;
|
|
}
|
|
.appTitleButton:active{
|
|
cursor: grabbing;
|
|
}
|
|
.WindowThumbnail{
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: 3vh;
|
|
width: 3vh;
|
|
|
|
}
|
|
.WindowTitleBarContainer{
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
text-align: center;
|
|
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;
|
|
}
|
|
|
|
.FormBoxWrapper{
|
|
margin: 3vh;
|
|
min-width: 90%;
|
|
}
|
|
.minimised{
|
|
top: 200vh !important;
|
|
transition: 0.5s !important;
|
|
}
|
|
.animationTransition{
|
|
transition: 0.5s !important;
|
|
}
|
|
.hyperlink:hover{
|
|
transform: scale(1.2);
|
|
cursor: pointer;
|
|
color: white !important;
|
|
}
|
|
.hyperlink{
|
|
transition: 0.25s;
|
|
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;
|
|
} |