github.com/hernad/nomad@v1.6.112/ui/app/styles/components/exec-window.scss (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  .exec-window {
     7    display: flex;
     8    position: absolute;
     9    left: 0;
    10    right: 0;
    11    top: 3.5rem; // nav.navbar.is-popup height
    12    bottom: 0;
    13  
    14    .terminal-container {
    15      flex-grow: 1;
    16      background: black;
    17      padding: 16px;
    18      height: 100%;
    19      position: relative;
    20      color: white;
    21  
    22      .terminal {
    23        height: 100%;
    24  
    25        .xterm .xterm-viewport {
    26          overflow-y: auto;
    27        }
    28      }
    29    }
    30  
    31    &.loading {
    32      justify-content: center;
    33      align-items: center;
    34      background: black;
    35      height: 100%;
    36    }
    37  
    38    .task-group-tree {
    39      background-color: $ui-gray-900;
    40      color: white;
    41      padding: 16px;
    42      width: 200px;
    43      flex-shrink: 0;
    44      overflow-y: auto;
    45  
    46      .title {
    47        text-transform: uppercase;
    48        color: $grey-lighter;
    49        font-size: 11px;
    50      }
    51  
    52      .icon {
    53        color: $ui-gray-500;
    54      }
    55  
    56      .toggle-button {
    57        position: relative;
    58        background: transparent;
    59        border: 0;
    60        color: white;
    61        font-size: inherit;
    62        line-height: 1.5;
    63        width: 100%;
    64        text-align: left;
    65        overflow-wrap: break-word;
    66        padding: 6px 0 5px 17px;
    67  
    68        .icon {
    69          position: absolute;
    70          left: 0;
    71          padding: 3px 3px 0 0;
    72          margin-left: -3px;
    73        }
    74  
    75        // Adapted from fs-explorer
    76        &.is-loading::after {
    77          animation: spinAround 750ms infinite linear;
    78          border: 2px solid $grey-light;
    79          border-radius: 290486px;
    80          border-right-color: transparent;
    81          border-top-color: transparent;
    82          opacity: 0.3;
    83          content: '';
    84          display: inline-block;
    85          height: 1em;
    86          width: 1em;
    87          margin-left: 0.5em;
    88        }
    89      }
    90  
    91      .task-list {
    92        .task-item {
    93          padding: 0 8px 0 19px;
    94  
    95          color: white;
    96          text-decoration: none;
    97          display: flex;
    98          align-items: center;
    99          justify-content: space-between;
   100  
   101          .border-and-label {
   102            display: flex;
   103            align-items: center;
   104            height: 100%;
   105            width: 100%;
   106            position: relative;
   107          }
   108  
   109          .border {
   110            position: absolute;
   111            border-left: 1px solid $ui-gray-700;
   112            height: 100%;
   113          }
   114  
   115          .is-active {
   116            position: absolute;
   117            top: 7.5px;
   118            left: -9.75px;
   119  
   120            stroke: $ui-gray-900;
   121            stroke-width: 5px;
   122            fill: white;
   123          }
   124  
   125          .task-label {
   126            padding: 6px 0 5px 13px;
   127            overflow-wrap: break-word;
   128            width: 100%;
   129          }
   130  
   131          .icon {
   132            visibility: hidden;
   133            width: 16px;
   134            flex-shrink: 0;
   135          }
   136  
   137          &:hover .icon.show-on-hover {
   138            visibility: visible;
   139          }
   140        }
   141      }
   142  
   143      .toggle-button,
   144      .task-item {
   145        font-weight: 500;
   146  
   147        &:hover {
   148          background-color: $ui-gray-800;
   149          border-radius: 4px;
   150  
   151          .is-active {
   152            stroke: $ui-gray-800;
   153          }
   154        }
   155      }
   156    }
   157  }