github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/app/styles/components/exec-window.scss (about)

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