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 }