github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/client/src/style/modal.css (about)

     1  /* Content managed by Project Forge, see [projectforge.md] for details. */
     2  .modal {
     3    border: var(--border);
     4    z-index: 100;
     5  }
     6  
     7  .modal .backdrop {
     8    cursor: default;
     9    position: fixed;
    10    top: 0;
    11    right: 0;
    12    bottom: 0;
    13    left: 0;
    14    background: var(--color-modal-backdrop);
    15  }
    16  
    17  .modal {
    18    visibility: hidden;
    19    opacity: 0;
    20    position: fixed;
    21    top: 0;
    22    right: 0;
    23    bottom: 0;
    24    left: 0;
    25    border: 0;
    26    display: flex !important;
    27    align-items: center;
    28    justify-content: center;
    29    transition: all .4s;
    30  }
    31  
    32  @media (prefers-reduced-motion) {
    33    .modal {
    34      transition: none;
    35    }
    36  }
    37  
    38  .modal:target {
    39    visibility: visible !important;
    40    opacity: 1;
    41    border: 0;
    42  }
    43  
    44  .modal-content {
    45    position: relative;
    46    width: min-content;
    47    min-width: 50%;
    48    max-width: 90%;
    49    max-height: 90%;
    50    background: var(--color-background);
    51    display: flex;
    52    flex-direction: column;
    53  }
    54  
    55  .modal-content .modal-header {
    56    flex-grow: 0;
    57    padding: var(--padding) var(--padding) 0 var(--padding);
    58  }
    59  
    60  .modal-content .modal-body {
    61    flex-grow: 1;
    62    padding: var(--padding);
    63    overflow: auto;
    64    height: 100%;
    65  }
    66  
    67  a.modal-close {
    68    float: right;
    69    font-size: 150%;
    70    margin-top: -8px;
    71    text-decoration: none;
    72    color: var(--color-foreground-muted);
    73  }