blueprints/common/eliot-ui/frontend-src/src/app/login/login.component.scss

   1 body, html {
   2     height: 100%;
   3     margin: 0 auto;
   4   }
   5
   6   .bg-image {
   7     min-height: calc(100vh - 0px);
   8     padding-top:0px;
   9     margin: 0 auto;
  10     display: flex;
  11     justify-content: center;
  12     align-items: center;
  13     /* Center and scale the image nicely */
  14     background-position: center;
  15     background-repeat: no-repeat;
  16     background-size: cover;
  17     .login-card {
  18         width: 50vh;
  19         filter: blur(0px);
  20         background: rgb(255, 255, 255); /* Fallback color */
  21         background: rgba(255, 255, 255, 0.2); /* Black background with 0.5 opacity */
  22         -webkit-filter: blur(0px);
  23         .login-full-width {
  24             width: 100%;
  25             justify-content: center;
  26         }
  27         opacity: 0.9;
  28         filter: alpha(opacity=50);
  29         mat-card-header {
  30           justify-content: center;
  31         }
  32         mat-card-actions {
  33           display: flex;
  34           justify-content: center;
  35         }
  36     }
  37   }
  38
  39   canvas {
  40     display: block;
  41   // vertical-align: bottom;
  42   }
  43
  44 /* ---- particles.js container ---- */
  45
  46 #particles-js {
  47   position: absolute;
  48   width: 100%;
  49   height: 100%;
  50
  51   // background: linear-gradient(to right, rgb(132, 227, 240), rgb(237, 153, 248));
  52   background-image: url("./../../assets/images/login-drone1.jpg");
  53   // background-color: #b61924;
  54   // background-image: url("");
  55   background-repeat: no-repeat;
  56   background-size: cover;
  57   background-position: 50% 50%;
  58 }
  59