github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/components/keyboard-shortcuts-modal.scss (about)

     1  .keyboard-shortcuts {
     2    position: fixed;
     3    background-color: white;
     4    padding: 2rem;
     5    margin-top: 20vh;
     6    width: 40vw;
     7    left: 30vw;
     8    z-index: 499;
     9    box-shadow: 2px 2px 12px 3000px rgb(0, 0, 0, 0.8);
    10    animation-name: slideIn;
    11    animation-duration: 0.2s;
    12    animation-fill-mode: both;
    13    max-height: 60vh;
    14    display: grid;
    15    grid-template-rows: auto 1fr auto;
    16  
    17    header {
    18      margin-bottom: 2rem;
    19      h2 {
    20        font-size: $size-3;
    21        font-weight: $weight-semibold;
    22      }
    23  
    24      button.dismiss {
    25        float: right;
    26        font-size: 0.7rem;
    27        margin-bottom: 1rem;
    28      }
    29    }
    30  
    31    ul.commands-list {
    32      overflow: auto;
    33      margin: 0 -2rem;
    34      padding: 0 2rem;
    35      li {
    36        list-style-type: none;
    37        padding: 0.5rem 0;
    38        display: grid;
    39        grid-template-columns: auto 1fr;
    40        &:not(:last-of-type) {
    41          border-bottom: 1px solid #ccc;
    42        }
    43        strong {
    44          padding: 0.25rem 0;
    45        }
    46        .keys {
    47          text-align: right;
    48          & > span.recording {
    49            color: $red;
    50            font-size: 0.75rem;
    51          }
    52          button {
    53            border: none;
    54            background: #eee;
    55            cursor: pointer;
    56  
    57            &:hover {
    58              background: #ddd;
    59            }
    60  
    61            &[disabled],
    62            &[disabled]:hover {
    63              background: #eee;
    64              color: black;
    65              cursor: not-allowed;
    66            }
    67            span {
    68              margin: 0.25rem;
    69              display: inline-block;
    70            }
    71  
    72            &.reset-to-default {
    73              background: white;
    74              color: $red;
    75              font-size: 0.75rem;
    76            }
    77          }
    78        }
    79      }
    80    }
    81  
    82    footer {
    83      background: #eee;
    84      padding: 1rem 2rem;
    85      margin: 1rem -2rem -2rem;
    86      display: grid;
    87      grid-template-columns: auto 1fr;
    88  
    89      .toggle {
    90        text-align: right;
    91      }
    92    }
    93  }
    94  
    95  // Global keyboard hint style
    96  
    97  [data-shortcut] {
    98    background: lighten($nomad-green, 25%);
    99    border: 1px solid $nomad-green-dark;
   100    content: attr(data-shortcut);
   101    display: block;
   102    position: absolute;
   103    top: 0;
   104    left: 0;
   105    font-size: 0.75rem;
   106    padding: 0 0.5rem;
   107    text-transform: lowercase;
   108    color: black;
   109    font-weight: 300;
   110    z-index: $z-popover;
   111    &.menu-level {
   112      z-index: $z-tooltip;
   113    }
   114  }
   115  
   116  @keyframes slideIn {
   117    from {
   118      opacity: 0;
   119      top: 40px;
   120    }
   121    to {
   122      opacity: 1;
   123      top: 0px;
   124    }
   125  }