github.com/thomasobenaus/nomad@v0.11.1/ui/app/styles/components/exec.scss (about)

     1  .tree-and-terminal {
     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  
    34  .task-group-tree {
    35    background-color: $ui-gray-900;
    36    color: white;
    37    padding: 16px;
    38    width: 200px;
    39    flex-shrink: 0;
    40    overflow-y: auto;
    41  
    42    .title {
    43      text-transform: uppercase;
    44      color: $grey-lighter;
    45      font-size: 11px;
    46    }
    47  
    48    .icon {
    49      color: $ui-gray-500;
    50    }
    51  
    52    .toggle-button {
    53      position: relative;
    54      background: transparent;
    55      border: 0;
    56      color: white;
    57      font-size: inherit;
    58      line-height: 1.5;
    59      width: 100%;
    60      text-align: left;
    61      overflow-wrap: break-word;
    62      padding: 6px 0 5px 17px;
    63  
    64      .icon {
    65        position: absolute;
    66        left: 0;
    67        padding: 3px 3px 0 0;
    68        margin-left: -3px;
    69      }
    70  
    71      // Adapted from fs-explorer
    72      &.is-loading::after {
    73        animation: spinAround 750ms infinite linear;
    74        border: 2px solid $grey-light;
    75        border-radius: 290486px;
    76        border-right-color: transparent;
    77        border-top-color: transparent;
    78        opacity: 0.3;
    79        content: '';
    80        display: inline-block;
    81        height: 1em;
    82        width: 1em;
    83        margin-left: 0.5em;
    84      }
    85    }
    86  
    87    .task-list {
    88      .task-item {
    89        padding: 0 8px 0 19px;
    90  
    91        color: white;
    92        text-decoration: none;
    93        display: flex;
    94        align-items: center;
    95        justify-content: space-between;
    96  
    97        .border-and-label {
    98          display: flex;
    99          align-items: center;
   100          height: 100%;
   101          width: 100%;
   102          position: relative;
   103        }
   104  
   105        .border {
   106          position: absolute;
   107          border-left: 1px solid $ui-gray-700;
   108          height: 100%;
   109        }
   110  
   111        .is-active {
   112          position: absolute;
   113          top: 7.5px;
   114          left: -9.75px;
   115  
   116          stroke: $ui-gray-900;
   117          stroke-width: 5px;
   118          fill: white;
   119        }
   120  
   121        .task-label {
   122          padding: 6px 0 5px 13px;
   123          overflow-wrap: break-word;
   124          width: 100%;
   125        }
   126  
   127        .icon {
   128          visibility: hidden;
   129          width: 16px;
   130          flex-shrink: 0;
   131        }
   132  
   133        &:hover .icon.show-on-hover {
   134          visibility: visible;
   135        }
   136      }
   137    }
   138  
   139    .toggle-button,
   140    .task-item {
   141      font-weight: 500;
   142  
   143      &:hover {
   144        background-color: $ui-gray-800;
   145        border-radius: 4px;
   146  
   147        .is-active {
   148          stroke: $ui-gray-800;
   149        }
   150      }
   151    }
   152  }
   153  
   154  .exec-button {
   155    color: $ui-gray-800;
   156    border-color: $ui-gray-300;
   157  
   158    span {
   159      color: $ui-gray-800;
   160    }
   161  
   162    .icon:first-child:not(:last-child) {
   163      width: 0.9rem;
   164      height: 0.9rem;
   165      margin-left: 0;
   166      margin-right: 0.5em;
   167      fill: currentColor;
   168    }
   169  }