static/TopologyComposer/css/composer.css

   1
   2 .node_path {
   3     opacity: 1;
   4     stroke: #2F3550;
   5     stroke-width: 1;
   6 }
   7
   8 .node_selected {
   9     opacity: 1 !important;
  10     stroke: #2F3550 !important;
  11     stroke-width: 3 !important;
  12 }
  13
  14 .node_text {
  15     font-family: Lucida Console;
  16     text-anchor: middle;
  17     user-select: none;
  18 }
  19
  20 .hidden_circle {
  21     opacity: 0;
  22     stroke: #FF0000 !important;
  23     stroke-width: 2 !important;
  24 }
  25
  26 .hidden_circle:hover {
  27     opacity: 1;
  28     stroke: #FF0000 !important;
  29     stroke-width: 2;
  30 }
  31
  32 .node_path:hover {
  33     opacity: 1;
  34     stroke: #2F3550;
  35     stroke-width: 3;
  36 }
  37
  38 .node_path:hover text {
  39     opacity: 0.4;
  40
  41 }
  42
  43 .link {
  44     fill: none;
  45 }
  46
  47 .link path {
  48     stroke-width: 2;
  49     stroke: lightgray;
  50 }
  51
  52 .matted {
  53     opacity: 0.3;
  54 }
  55
  56 .invisible {
  57     visibility: hidden;
  58 }
  59
  60 .left-tool-bar-monitoring {
  61     position: absolute;
  62     top: 20px;
  63     left: 20px;
  64     z-index: 1;
  65     text-align: center;
  66     font-size: 12px;
  67
  68     cursor: default;
  69     padding: 0 6px;
  70     line-height: 22px;
  71     position: absolute;
  72
  73     -webkit-touch-callout: none;
  74     -webkit-user-select: none;
  75     -khtml-user-select: none;
  76     -moz-user-select: none;
  77     -ms-user-select: none;
  78     user-select: none;
  79 }
  80
  81 .container-fluid {
  82     min-height: 100vh !important;
  83     background-color: white;
  84 }
  85
  86 #main {
  87     height: 100%;
  88     display: flex;
  89 }
  90
  91 #graph_editor_container {
  92     position: relative;
  93     min-height: 100vh;
  94
  95
  96     flex: 1 1 auto;
  97     display: flex;
  98     align-items: center;
  99     justify-content: center;
 100 }
 101
 102 #legenda {
 103     position: absolute;
 104     top: 20px;
 105     right: 20px;
 106     border: 1px solid #cdcdcd;
 107     border-radius: 2px;
 108     padding: 15px;
 109 }
 110
 111 #legenda > .node {
 112     margin-top: 10px;
 113     font-size: 13px;
 114     display: flex;
 115     align-items: center;
 116 }
 117
 118 #legenda > .node:first-child {
 119     margin-top: 0;
 120 }
 121
 122 #legenda > .node > .icon {
 123     width: 20px;
 124     height: 20px;
 125     border-radius: 1px;
 126     margin-right: 10px;
 127 }
 128
 129 #leftside {
 130     border-right: 1px solid #AFAFAF;
 131     flex: 0 0 auto;
 132     max-width: 300px;
 133     min-width: 150px;
 134     padding: 20px 30px;
 135     display: flex;
 136     flex-direction: column;
 137 }
 138
 139 #palette > .node {
 140     margin-top: 10px;
 141     font-size: 13px;
 142     display: flex;
 143     align-items: center;
 144     cursor: move;
 145     -webkit-touch-callout: none;
 146     -webkit-user-select: none;
 147     -khtml-user-select: none;
 148     -moz-user-select: none;
 149     -ms-user-select: none;
 150     user-select: none;
 151 }
 152
 153 #palette > .node:first-child {
 154     margin-top: 0;
 155 }
 156
 157 #palette > .node > .icon {
 158     width: 20px;
 159     height: 20px;
 160     border-radius: 1px;
 161     margin-right: 10px;
 162 }
 163
 164 [draggable=true] {
 165     -khtml-user-drag: element;
 166     -webkit-user-drag: element;
 167     -khtml-user-select: none;
 168     -webkit-user-select: none;
 169 }
 170 #graph_svg {
 171     max-width: 100%;
 172     width: 100%;
 173 }
 174 #side {
 175     border-left: 1px solid #AFAFAF;
 176     flex: 0 0 auto;
 177     max-width: 500px;
 178     min-width: 300px;
 179     padding: 20px 30px;
 180     display: flex;
 181     flex-direction: column;
 182 }
 183
 184 .section {
 185     font-size: 16px;
 186     line-height: 40px;
 187     letter-spacing: 0.4px;
 188     border-bottom: 1px solid #ccc;
 189     margin-bottom: 10px;
 190     margin-top: 20px;
 191     display: flex;
 192     justify-content: space-between;
 193 }
 194
 195 .section > .status {
 196     display: flex;
 197     align-items: center;
 198     font-size: 12px
 199 }
 200
 201 .section > .status > .indicator {
 202     width: 8px;
 203     height: 8px;
 204     background-color: red;
 205     border-radius: 50%;
 206     display: block;
 207     margin-right: 7px;
 208 }
 209
 210 .section > .status.active > .indicator {
 211     background-color: green;
 212 }
 213
 214 .children td {
 215     padding: 5px 7px;
 216     font-size: 13px;
 217     line-height: 15px;
 218 }
 219
 220 .children td:first-child {
 221     padding-left: 0;
 222     font-weight: 500;
 223     text-align: right
 224 }
 225
 226 .left-tool-bar-monitoring > .btn-default {
 227     background-color: transparent!important;
 228 }