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

   1 body, html {
   2     height: 100%;
   3 }
   4
   5 mat-menu {
   6   max-width: none;
   7 }
   8
   9
  10
  11   .bg-image {
  12     #particles canvas{
  13       position: absolute;
  14       width: 100%;
  15       height:100%;
  16       z-index: -1;
  17     }
  18     height: 100vh;
  19     display: flex;
  20     justify-content: center;
  21     align-items: center;
  22     /* The image used */
  23     // background-image: url("./../../assets/images/login-drone1.jpg");
  24     background: linear-gradient(to right, rgb(238, 172, 128), rgb(68,166,187));
  25
  26     background-position: center;
  27     background-repeat: no-repeat;
  28     background-size: cover;
  29     .signup-card {
  30         // height: 40vh;
  31         // width: 30vh;
  32         background: rgba(0, 0, 0, 0.2);
  33         color: white;
  34         width: 50vh;
  35         // opacity: 0.5;
  36         filter: blur(0px);
  37         -webkit-filter: blur(0px);
  38         .login-full-width {
  39             width: 100%;
  40
  41             justify-content: center;
  42         }
  43         mat-card {
  44           mat-card-header {
  45             justify-content: center;
  46           }
  47         }
  48     }
  49   }
  50
  51   /* Position text in the middle of the page/image */
  52   .bg-text {
  53     background-color: rgb(0,0,0); /* Fallback color */
  54     background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  55     color: white;
  56     font-weight: bold;
  57     position: absolute;
  58     top: 50%;
  59     left: 50%;
  60
  61     transform: translate(-50%, -50%);
  62     z-index: 2;
  63     width: 80%;
  64     padding: 20px;
  65     text-align: center;
  66   }
  67
  68
  69 canvas {
  70   display: block;
  71   // vertical-align: bottom;
  72 }
  73
  74 /* ---- particles.js container ---- */
  75
  76 #particles-js {
  77   position: absolute;
  78   width: 100%;
  79   height: 100%;
  80   // background-color: #19b1b6;
  81   background: linear-gradient(to right, rgb(238, 172, 128), rgb(68,166,187));
  82   // background-image: url("./../../assets/images/login-drone1.jpg");
  83   // background-image: url("");
  84   background-repeat: no-repeat;
  85   background-size: cover;
  86   background-position: 50% 50%;
  87 }
  88
  89 mat-card-actions {
  90   display: flex;
  91   justify-content: center;
  92 }