github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/login/components/login.scss (about)

     1  @import 'node_modules/argo-ui/src/styles/config';
     2  
     3  $logoPath: 'assets/images/argologo.svg';
     4  $logoNegativePath: 'assets/images/argo.png';
     5  
     6  //for input fields
     7  
     8  .argo-field {
     9      border-bottom: 2px solid $argo-color-gray-3;
    10  }
    11  
    12  .login {
    13      min-height:100vh;
    14      background: linear-gradient(to top left, 
    15          rgba(122, 139, 207, 0.8) 0%, 
    16          rgba(46, 50, 90, 0.8) 100%), 
    17          url("assets/images/stars.gif");
    18      display: flex;
    19  
    20      &__content {
    21          float: left;
    22          margin: auto;
    23          width: calc(100% - 320px);
    24          text-align: center;
    25      }
    26  
    27      .argo__logo {
    28          background-image: url($logoNegativePath);
    29          background-repeat: no-repeat;
    30          background-size: contain;
    31          min-height: 200px;
    32          margin: auto;
    33          background-position: center;
    34          height: 50vh;
    35      }
    36  
    37      &__text{
    38          position: relative;
    39          margin: auto;
    40          top: -10vh;
    41          color: #FFF;
    42          font-size: 2.5rem;
    43          font-weight: 100; 
    44      }
    45  
    46  
    47      &__box-wrapper {
    48          display: table;
    49          width: 100%;
    50          height: calc(100% - 60px - 70px - 40px);
    51          padding: 20px 0 80px;
    52      }
    53  
    54      &__box-outer {
    55          display: table-cell;
    56          vertical-align: middle;
    57          overflow: hidden;
    58          float: right;
    59      }
    60  
    61      &__box {
    62          min-width: 320px;
    63          width: 20%;
    64          margin: 0 auto;
    65          padding: 40px;
    66          background-color: #fff;
    67          position: relative;
    68          float: right;
    69          min-height: 100vh;
    70  
    71          .width-control{
    72              max-width: 200px;
    73              margin: auto;
    74          }
    75  
    76          &_saml {
    77              padding: 40px 0;
    78          }
    79  
    80          h3, h4, h5 {
    81              color: #b268a7;
    82              text-align: center;
    83              padding-top: 1em;
    84              padding-bottom: 1em;
    85          }
    86  
    87          h6 {
    88              text-align: center;
    89          }
    90  
    91          h3 {
    92              font-size: 2.25em;
    93              font-weight: 100;
    94              padding-bottom: 66px;
    95  
    96              @media screen and (max-height: 774px) {
    97                  padding-bottom: 20px;
    98              }
    99          }
   100      }
   101  
   102      &__form-row {
   103          padding: 20px 0;
   104      }
   105  
   106      &__more-row {
   107          padding: 20px 0;
   108          text-align: center;
   109          font-weight: bold;
   110  
   111          @media screen and (max-height: 774px) {
   112              padding: 0;
   113          }
   114  
   115          a {
   116              font-size: 13px;
   117              text-transform: uppercase;
   118              color: $argo-color-gray-7;
   119              font-weight: 300;
   120          }
   121  
   122          p {
   123              font-size: 13px;
   124          }
   125      }
   126  
   127      &__saml-separator {
   128          margin-top: 15px;
   129          color: $argo-color-gray-7;
   130          border-bottom: 1px solid $argo-color-gray-4;
   131          text-align: center;
   132          & > span {
   133              position: relative;
   134              top: 0.8em;
   135              display: inline-block;
   136              padding: 0 6px;
   137              background: #fff;
   138          }
   139      }
   140  
   141      &__logo {
   142          display: block;
   143          background-repeat: no-repeat;
   144          background-position: center;
   145          text-align: center;
   146  
   147          &--neg {
   148              height: 40px;
   149              background-size: contain;
   150              background-image: url($logoPath);
   151              background-repeat: no-repeat;
   152              margin-left: 4.5rem;
   153              position: relative;
   154              top: 1.5rem;
   155              width: 10rem;
   156          }
   157          &--argo{
   158              height: 5rem;
   159              background-size: contain;
   160              background-image: url(assets/images/Argo.svg);
   161              background-repeat: no-repeat;
   162              float: left;
   163              width: 4rem;  
   164          }
   165  
   166          img.logo-image{
   167              max-width: 50%;
   168              color: #F77530;
   169          }
   170      }
   171  
   172      &__footer {
   173          color: $argo-color-gray-2;
   174          bottom: 20px;
   175          position: absolute;
   176          width: 90%;
   177          text-align: center;
   178          left: 20px;        
   179  
   180          & a {
   181              color: $argo-color-gray-2;
   182              img{
   183                  width: 36px;
   184                  filter: invert(50%);
   185                  -webkit-filter: invert(50%);
   186              }
   187          }
   188  
   189          .ver {
   190              font-size:12px;
   191              color: $argo-color-gray-7;
   192          }
   193  
   194          &__link {
   195              font-size:12px;
   196              padding:0px 5px;
   197          }
   198      }
   199  
   200      ::after {
   201          content: '';
   202          clear: both;
   203      }
   204  
   205  }