github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/pages/IntroPages/IntroPages.module.css (about)

     1  @keyframes fadeout {
     2    0% {
     3      opacity: 1;
     4    }
     5    100% {
     6      opacity: 0;
     7    }
     8  }
     9  
    10  .loginWrapper {
    11    height: 100vh;
    12    min-height: 100vh;
    13    width: 100%;
    14  
    15    display: flex;
    16    justify-content: center;
    17    align-items: center;
    18    position: relative;
    19  
    20    background-size: cover, auto, auto;
    21    background: radial-gradient(
    22        farthest-side at 0% 0%,
    23        rgba(0, 0, 0, 0.3) 60%,
    24        rgba(0, 0, 0, 0.6)
    25      ),
    26      url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22160%22%20height%3D%2215%22%20viewBox%3D%220%200%20160%2015%22%20preserveAspectRatio%3D%22xMinYMin%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-opacity%3D%220.13%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M0%200.5c26.7%200%2053.3%2014%2080%2014%2026.7%200%2053.3-14%2080-14M0-4.5c26.7%200%2053.3%2014%2080%2014%2026.7%200%2053.3-14%2080-14M0-9.5c26.7%200%2053.3%2014%2080%2014%2026.7%200%2053.3-14%2080-14M0%205.5c26.7%200%2053.3%2014%2080%2014%2026.7%200%2053.3-14%2080-14M0%2010.5c26.7%200%2053.3%2014%2080%2014%2026.7%200%2053.3-14%2080-14%22%2F%3E%3C%2Fsvg%3E),
    27      linear-gradient(
    28          180deg,
    29          var(--ps-immutable-gradient-1) 0,
    30          var(--ps-immutable-gradient-0) 100%
    31        )
    32        fixed;
    33  }
    34  
    35  .loginWrapper::before {
    36    content: '';
    37    position: absolute;
    38    left: 0;
    39    right: 0;
    40    top: 0;
    41    bottom: 0;
    42    background-image: radial-gradient(
    43      farthest-corner at 0% 0%,
    44      var(--ps-neutral-1) 0%,
    45      var(--ps-neutral-1)
    46    );
    47  
    48    animation: fadeout 2s ease 0s 1 normal forwards;
    49  
    50    z-index: 0;
    51  }
    52  
    53  .loginWrapper h1 {
    54    margin: 0.3em 0;
    55  }
    56  
    57  .loginWrapper h3 {
    58    margin: 0;
    59  }
    60  
    61  .form {
    62    width: 450px;
    63    padding: 50px;
    64    color: white;
    65    background-color: rgba(0, 0, 0, 0.6);
    66    box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.3);
    67    border-radius: 10px;
    68    text-align: center;
    69    left: 0;
    70    right: 0;
    71  
    72    display: flex;
    73    flex-direction: column;
    74    justify-content: flex-start;
    75    align-items: center;
    76  
    77    z-index: 1;
    78  }
    79  
    80  .form > div {
    81    width: 100%;
    82  }
    83  
    84  .formHeader {
    85    display: flex;
    86    flex-direction: column;
    87    justify-content: space-around;
    88    align-items: center;
    89  }
    90  
    91  .logo {
    92    width: 100px;
    93    height: 100px;
    94    background-image: url('../../../images/logo-v3-small.png');
    95    background-repeat: no-repeat;
    96    background-size: cover;
    97  }
    98  
    99  .button {
   100    width: 100%;
   101    padding: 0.5em;
   102    border: none;
   103    border-radius: 4px;
   104    background-color: var(--ps-blue-primary);
   105    color: var(--ps-immutable-off-white);
   106    cursor: pointer;
   107    text-decoration: none;
   108    transition: background-color 0.2s ease-in;
   109  }
   110  
   111  .button:hover {
   112    background-color: var(--ps-blue-highlight);
   113  }
   114  
   115  .buttonDark {
   116    background-color: var(--ps-grey-primary);
   117  }
   118  
   119  .buttonDark:hover {
   120    background-color: var(--ps-grey-highlight);
   121  }
   122  
   123  .link {
   124    color: #007bff;
   125  }