345 lines
10 KiB
CSS
345 lines
10 KiB
CSS
@media only screen and (max-aspect-ratio: 1.165/1) {
|
|
.Logo{
|
|
margin-left:1vh;
|
|
transition: 0.25s;
|
|
padding-right:1vh;
|
|
background-image: url("Logo.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
width: 6vh;
|
|
height:6vh;
|
|
}
|
|
.Title{
|
|
transition: 0.25s;
|
|
text-shadow: #8cefff 0vh 0vh 0vh;
|
|
user-select: none;
|
|
font-family: "Arial", serif;
|
|
font-weight: bolder;
|
|
color:white;
|
|
font-size: 2.5vh;
|
|
}
|
|
.HotbarButton:hover{
|
|
cursor: pointer;
|
|
margin-right: 1vh;
|
|
width:35vw;
|
|
height: 6vh;
|
|
filter: drop-shadow(0 0 2vh #8cefff);
|
|
transform: scale(1.1) translateY(1%);
|
|
border-top: #8cefff 0.3vh solid;
|
|
border-left: #8cefff 0.3vh solid;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
}
|
|
.HotbarButton{
|
|
border: none;
|
|
user-select: none;
|
|
transition: 0.25s;
|
|
margin-right: 0.5vh;
|
|
margin-left: 0.5vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
align-content: center;
|
|
align-items: center;
|
|
font-family: "Arial", serif;
|
|
font-weight: bolder;
|
|
font-size: 2vh;
|
|
width: 30vw;
|
|
height: 5vh;
|
|
border-radius: 5vh;
|
|
color:white;
|
|
text-shadow: #8cefff 0vh 0vh 0vh;
|
|
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));
|
|
border-bottom: #8cefff 0.3vh solid;
|
|
border-right: #8cefff 0.3vh solid;
|
|
}
|
|
.HotbarWrapper{
|
|
flex-direction: column !important;
|
|
overflow-x: clip;
|
|
transition: 0.5s;
|
|
width: 100vw;
|
|
height: 15vh;
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
align-content: center;
|
|
box-shadow: #121e29 0 0 5vh;
|
|
background-image: linear-gradient(to bottom,rgba(52, 184, 254,0.3) ,rgba(52, 184, 254,0.5),rgba(22, 144, 254,0.25),rgba(12, 64, 124,0.5));
|
|
border-bottom: #8cefff 0.3vh solid;
|
|
}
|
|
.ErrorMessageWrapper{
|
|
display: flex;
|
|
position: absolute;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
flex-direction: column;
|
|
width: 75vw;
|
|
height: 50vh;
|
|
top: 50vh;
|
|
left:50vw;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.ErrorMessageImage{
|
|
background-image: url("../GeneralAssets/mascotchibi/chibilost.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 7.5vh;
|
|
transition: 0.25s;
|
|
min-width: 7.5vh !important;
|
|
min-height: 8.4375vh !important;
|
|
image-rendering: pixelated;
|
|
|
|
}
|
|
.ErrorMessage:hover{
|
|
.ErrorMessageImage{
|
|
transform: scale(1);
|
|
max-width: 6.43vh !important;
|
|
min-height: 8.9375vh !important;
|
|
background-position-y: 105%;
|
|
background-image: url("../GeneralAssets/mascotchibi/chibiquestion.png");
|
|
}
|
|
}
|
|
.ErrorMessage{
|
|
padding: 1vh;
|
|
filter: drop-shadow(0 0.5vh 3vh #8cefff);
|
|
border-top: #8cefff 0.3vh solid;
|
|
border-left: #8cefff 0.3vh solid;
|
|
border-right: rgba(32,120,155,1) 0.3vh solid;
|
|
border-bottom: rgba(32,120,155,1) 0.3vh solid;
|
|
text-shadow: #223342 0 0 2vh;
|
|
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.3) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.25)), linear-gradient(to bottom,rgba(52, 184, 254,0.4),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.3),rgba(22, 144, 254,0.15),rgba(12, 64, 124,0.25));
|
|
border-radius: 5vh;
|
|
display: flex;
|
|
align-content: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: 0.25s;
|
|
user-select: none;
|
|
font-family: "Arial", serif;
|
|
font-weight: bolder;
|
|
color:white;
|
|
font-size: 2vh;
|
|
text-align: center;
|
|
}
|
|
}
|
|
@media only screen and (min-aspect-ratio: 1.165/1) {
|
|
.Logo{
|
|
margin-left:1vh;
|
|
transition: 0.25s;
|
|
padding-right:1vh;
|
|
background-image: url("Logo.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
width: 8vh;
|
|
height:8vh;
|
|
}
|
|
.Title{
|
|
transition: 0.25s;
|
|
text-shadow: #8cefff 0vh 0vh 0vh;
|
|
user-select: none;
|
|
font-family: "Arial", serif;
|
|
font-weight: bolder;
|
|
color:white;
|
|
font-size: 4vh;
|
|
}
|
|
.HotbarButton:hover{
|
|
cursor: pointer;
|
|
margin-right: 2vh;
|
|
width:22.5vh;
|
|
height: 7vh;
|
|
filter: drop-shadow(0 0 2vh #8cefff);
|
|
transform: scale(1.1) translateY(1%);
|
|
border-top: #8cefff 0.3vh solid;
|
|
border-left: #8cefff 0.3vh solid;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
}
|
|
.HotbarButton{
|
|
border: none;
|
|
user-select: none;
|
|
transition: 0.25s;
|
|
margin-right: 1vh;
|
|
margin-left: 1vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
align-content: center;
|
|
align-items: center;
|
|
font-family: "Arial", serif;
|
|
font-weight: bolder;
|
|
font-size: 4vh;
|
|
width: 20vh;
|
|
height: 6vh;
|
|
border-radius: 5vh;
|
|
color:white;
|
|
text-shadow: #8cefff 0vh 0vh 0vh;
|
|
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));
|
|
border-bottom: #8cefff 0.3vh solid;
|
|
border-right: #8cefff 0.3vh solid;
|
|
}
|
|
.HotbarWrapper:hover{
|
|
.Logo{
|
|
height:9vh;
|
|
width: 9vh;
|
|
}
|
|
.Title{
|
|
font-size: 4.5vh;
|
|
}
|
|
.HotbarButton{
|
|
height: 7vh;
|
|
}
|
|
.AccountIcon{
|
|
margin-left:1vh;
|
|
transition: 0.25s;
|
|
margin-right:1vh;
|
|
width: 9vh;
|
|
height:9vh;
|
|
}
|
|
height: 12vh;
|
|
}
|
|
.HotbarWrapper{
|
|
overflow-x: clip;
|
|
transition: 0.5s;
|
|
width: 100vw;
|
|
height: 9vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-content: center;
|
|
box-shadow: #121e29 0 0 5vh;
|
|
background-image: linear-gradient(to bottom,rgba(52, 184, 254,0.3) ,rgba(52, 184, 254,0.5),rgba(22, 144, 254,0.25),rgba(12, 64, 124,0.5));
|
|
border-bottom: #8cefff 0.3vh solid;
|
|
}
|
|
.ErrorMessageWrapper{
|
|
display: flex;
|
|
position: absolute;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
flex-direction: column;
|
|
width: 50vw;
|
|
height: 50vh;
|
|
top: 50vh;
|
|
left:50vw;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.ErrorMessageImage{
|
|
background-image: url("../GeneralAssets/mascotchibi/chibilost.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 15vh;
|
|
transition: 0.25s;
|
|
min-width: 15vh !important;
|
|
min-height: 16.875vh !important;
|
|
image-rendering: pixelated;
|
|
|
|
}
|
|
.ErrorMessage:hover{
|
|
.ErrorMessageImage{
|
|
transform: scale(1);
|
|
max-width: 12.86vh !important;
|
|
min-height: 17.875vh !important;
|
|
background-position-y: 105%;
|
|
background-image: url("../GeneralAssets/mascotchibi/chibiquestion.png");
|
|
}
|
|
}
|
|
.ErrorMessage{
|
|
padding: 2vh;
|
|
filter: drop-shadow(0 0.5vh 3vh #8cefff);
|
|
border-top: #8cefff 0.3vh solid;
|
|
border-left: #8cefff 0.3vh solid;
|
|
border-right: rgba(32,120,155,1) 0.3vh solid;
|
|
border-bottom: rgba(32,120,155,1) 0.3vh solid;
|
|
text-shadow: #223342 0 0 2vh;
|
|
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.3) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.25)), linear-gradient(to bottom,rgba(52, 184, 254,0.4),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.3),rgba(22, 144, 254,0.15),rgba(12, 64, 124,0.25));
|
|
border-radius: 5vh;
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: 0.25s;
|
|
user-select: none;
|
|
font-family: "Arial", serif;
|
|
font-weight: bolder;
|
|
color:white;
|
|
font-size: 4vh;
|
|
text-align: center;
|
|
}
|
|
}
|
|
body{
|
|
background-image: linear-gradient(to bottom,#245a80 10vh,transparent 90vh ), linear-gradient(to bottom right, #063657,#031d2e );
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
.LogInButtonWrapper{
|
|
transform: scale(1.5);
|
|
margin-top: 5vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
flex-direction: row;
|
|
}
|
|
.AccountIcon:hover{
|
|
transform: scale(1.2) translateY(0);
|
|
filter: drop-shadow(0 0 2vh #8cefff);
|
|
}
|
|
.AccountIcon{
|
|
border-style: inset;
|
|
border-top: #8cefff 0.5vh solid;
|
|
border-left: #8cefff 0.5vh solid;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
filter: drop-shadow(-1vh -1vh 1vh #8cefff);
|
|
margin-left:1vh;
|
|
transition: 0.25s;
|
|
margin-right:1vh;
|
|
border-radius: 4vh;
|
|
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));
|
|
width: 8vh;
|
|
height:8vh;
|
|
}
|
|
.Logo:hover{
|
|
transform: scale(1.2) translateY(0);
|
|
filter: drop-shadow(0 0 2vh #8cefff);
|
|
}
|
|
.HotbarSection{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
height: 8vh;
|
|
align-content: center;
|
|
align-items: center;
|
|
}
|
|
.Title:hover{
|
|
text-shadow: #8cefff 0vh 0vh 2vh;
|
|
}
|
|
.FormWindowContainer{
|
|
background: transparent;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
.Copyright{
|
|
border-radius: 5vh;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
user-select: none;
|
|
transition: ease-in-out .3s;
|
|
font-family: "Arial", serif;
|
|
font-size: 2vh;
|
|
text-align: center;
|
|
color: white;
|
|
} |