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

     1  .modal {
     2    position: fixed;
     3    left: 0;
     4    right: 0;
     5    top: 0;
     6    bottom: 0;
     7    margin: auto;
     8    z-index: 2000;
     9  
    10    display: flex;
    11    align-items: center;
    12    justify-content: center;
    13  }
    14  
    15  .modalContainer {
    16    box-shadow: 0px 16px 16px -16px rgba(0, 0, 0, 0.35);
    17    border-radius: 5px;
    18    border: 1px solid rgba(255, 255, 255, 0.1);
    19    /* TODO(eh-am): support light background */
    20    background-color: #222;
    21  
    22    max-width: 520px;
    23    max-height: calc(100% - 64px);
    24    overflow-y: auto;
    25    display: flex;
    26    flex-direction: column;
    27    position: relative;
    28  }
    29  
    30  .header {
    31    padding: 15px 20px 10px;
    32    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    33    display: flex;
    34  }
    35  
    36  /* reset immediate headers */
    37  .header > h1,
    38  .header > h2,
    39  .header > h3,
    40  .header > h4 {
    41    margin: 0;
    42    flex: 1;
    43  }
    44  .body {
    45    padding: 0 20px 20px;
    46    overflow-y: auto;
    47  }
    48  
    49  .closeButton {
    50    border: none;
    51    padding: 0;
    52    width: 34px;
    53    height: 34px;
    54    margin-right: -10px;
    55    cursor: pointer;
    56    position: relative;
    57    justify-self: flex-end;
    58    min-width: 0;
    59  }
    60  
    61  .closeButton::after {
    62    width: 34px;
    63    height: 34px;
    64    line-height: 22px;
    65    font-size: 1.5em;
    66    content: '\00d7';
    67  }
    68  
    69  .backdrop {
    70    z-index: -1;
    71    position: fixed;
    72    right: 0;
    73    bottom: 0;
    74    top: 0;
    75    left: 0;
    76    background-color: rgba(0, 0, 0, 0.5);
    77    -webkit-tap-highlight-color: transparent;
    78  }
    79  
    80  .footer {
    81    padding: 15px 20px 15px;
    82    border-top: 1px solid rgba(255, 255, 255, 0.2);
    83    display: flex;
    84    flex-direction: column;
    85  }
    86  
    87  .dialogActions {
    88    align-self: end;
    89  }
    90  .dialogActions > *:not(:last-child) {
    91    margin-right: 8px;
    92    align-self: end;
    93  }