body, html {
height: 100%;
}
mat-menu {
max-width: none;
}
.bg-image {
#particles canvas{
position: absolute;
width: 100%;
height:100%;
z-index: -1;
}
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* The image used */
// background-image: url("./../../assets/images/login-drone1.jpg");
background: linear-gradient(to right, rgb(238, 172, 128), rgb(68,166,187));
background-position: center;
background-repeat: no-repeat;
background-size: cover;
.signup-card {
// height: 40vh;
// width: 30vh;
background: rgba(0, 0, 0, 0.2);
color: white;
width: 50vh;
// opacity: 0.5;
filter: blur(0px);
-webkit-filter: blur(0px);
.login-full-width {
width: 100%;
justify-content: center;
}
mat-card {
mat-card-header {
justify-content: center;
}
}
}
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
canvas {
display: block;
// vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
// background-color: #19b1b6;
background: linear-gradient(to right, rgb(238, 172, 128), rgb(68,166,187));
// background-image: url("./../../assets/images/login-drone1.jpg");
// background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
mat-card-actions {
display: flex;
justify-content: center;
}