github.com/hernad/nomad@v1.6.112/ui/app/styles/components/keyboard-shortcuts-modal.scss (about)

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