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