static/topology3D/css/graph_editor_d3js.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 .hidden_circle {
  15     opacity: 0;
  16     stroke: #FF0000 !important;
  17     stroke-width: 2 !important;
  18 }
  19
  20 .hidden_circle:hover {
  21     opacity: 1;
  22     stroke: #FF0000 !important;
  23     stroke-width: 2;
  24 }
  25
  26 .node_path:hover {
  27     opacity: 1;
  28     stroke: #2F3550;
  29     stroke-width: 3;
  30 }
  31
  32 .node_path:hover text {
  33     opacity: 0.4;
  34
  35 }
  36
  37 .link {
  38     fill: none;
  39 }
  40
  41 .link path {
  42     stroke-width: 2;
  43 }
  44
  45 .matted {
  46     opacity: 0.3;
  47 }
  48
  49 .invisible {
  50     visibility: hidden;
  51 }
  52
  53 .drag_box {
  54     padding: 0 40px 0 0;
  55     margin-bottom: 0px !important;
  56     padding-top: 0px;
  57     top: 14px;
  58     /* right: 25px !important; */
  59     /* width: 15%; */
  60     position: absolute;
  61     z-index: 1;
  62     -webkit-touch-callout: none;
  63     -webkit-user-select: none;
  64     -khtml-user-select: none;
  65     -moz-user-select: none;
  66     -ms-user-select: none;
  67     user-select: none;
  68     right: 0;
  69     cursor: move;
  70 }
  71
  72 .selector_box {
  73     padding: 0 40px 0 0;
  74     margin-bottom: 0px !important;
  75     padding-top: 0px;
  76     top: 70px;
  77     /* right: 25px !important; */
  78     /* width: 15%; */
  79     position: absolute;
  80     z-index: 1;
  81     -webkit-touch-callout: none;
  82     -webkit-user-select: none;
  83     -khtml-user-select: none;
  84     -moz-user-select: none;
  85     -ms-user-select: none;
  86     user-select: none;
  87     right: 0;
  88     cursor: move;
  89 }
  90
  91 .drag_button {
  92     cursor: move !important;
  93     /*border-style: dashed;*/
  94     border-width: thin;
  95     border-color: black;
  96     color: white;
  97     border-radius: 50% !important;
  98     height: 50px !important;
  99     width: 50px !important;
 100     margin-right: 5px;
 101 }
 102
 103 .drag_button p {
 104     font-family: "Lucida Console", Monaco, monospace;;
 105     font-size: 0.6em;
 106     font-weight: bold;
 107     text-decoration: none;
 108     color: black;
 109     text-align: center;
 110     padding-top: 50%;
 111     padding-bottom: 50%;
 112     width: 100%;
 113 }
 114
 115 .left-tool-bar {
 116     top: 14px;
 117     cursor: default;
 118     line-height: 22px;
 119     position: absolute;
 120
 121     padding: 0px 6px;
 122
 123     /* top: 7px; */
 124     /* right: 6px; */
 125     z-index: 1;
 126     text-align: center;
 127     font-size: 12px;
 128     /*color: #777;
 129     /* border-radius: 20px; */
 130
 131     -webkit-touch-callout: none;
 132     -webkit-user-select: none;
 133     -khtml-user-select: none;
 134     -moz-user-select: none;
 135     -ms-user-select: none;
 136     user-select: none;
 137 }
 138
 139 .left-tool-bar-monitoring {
 140
 141     z-index: 1;
 142     text-align: center;
 143     font-size: 12px;
 144
 145     top: 64px;
 146     cursor: default;
 147     padding: 0 6px;
 148     line-height: 22px;
 149     position: absolute;
 150
 151     -webkit-touch-callout: none;
 152     -webkit-user-select: none;
 153     -khtml-user-select: none;
 154     -moz-user-select: none;
 155     -ms-user-select: none;
 156     user-select: none;
 157 }
 158
 159 .vnffg-box {
 160     top: 80px;
 161     left: 100px;
 162     cursor: default;
 163     position: absolute;
 164     width: 130px;
 165
 166     padding-top: 0px;
 167     padding-bottom: 0px;
 168
 169     /* top: 7px; */
 170     /* right: 6px; */
 171     z-index: 1;
 172     text-align: center;
 173     font-size: 12px;
 174     /*color: #777;
 175     /* border-radius: 20px; */
 176
 177     -webkit-touch-callout: none;
 178     -webkit-user-select: none;
 179     -khtml-user-select: none;
 180     -moz-user-select: none;
 181     -ms-user-select: none;
 182     user-select: none;
 183 }
 184
 185 textarea {
 186     font-family: "Lucida Console", Monaco, monospace;
 187     height: 350px !important;
 188     resize: none;
 189 }
 190
 191 .form-group {
 192     margin-bottom: 0px !important;
 193     margin-top: 0px !important;
 194 }
 195
 196 .modal-body {
 197     overflow-y: auto;
 198 }
 199
 200 [draggable=true] {
 201     -khtml-user-drag: element;
 202     -webkit-user-drag: element;
 203     -khtml-user-select: none;
 204     -webkit-user-select: none;
 205 }
 206
 207 .help-key {
 208     border: 1px solid #ddd;
 209     padding: 4px;
 210     border-radius: 3px;
 211     background: #f6f6f6;
 212     font-family: Courier, monospace;
 213     box-shadow: #999 1px 1px 1px;
 214 }
 215
 216 /*
 217 Palette section
 218 */
 219 #palette {
 220     position: absolute;
 221     top: 20px;
 222     bottom: 20px;
 223     right: 22px;
 224     background: #f3f3f3;
 225     width: 170px;
 226     text-align: center;
 227     -webkit-user-select: none;
 228     -khtml-user-select: none;
 229     -moz-user-select: none;
 230     -ms-user-select: none;
 231     user-select: none;
 232     border: 1px solid #bbb;
 233     box-sizing: border-box;
 234     padding: 0 0 0 0;
 235 }
 236
 237 .palette-status-indicator {
 238     top: 50%;
 239     position: relative;
 240     justify-content: center;
 241 }
 242
 243 .palette-status-hidden > .palette-status-indicator {
 244     top: 50%;
 245     position: relative;
 246     justify-content: center;
 247     display: none;
 248 }
 249
 250 .palette-container {
 251     #display: none;
 252     position: absolute;
 253     top: 0px;
 254     right: 0;
 255     bottom: 25px;
 256     left: 0;
 257     padding: 0;
 258     overflow-y: auto;
 259     box-sizing: border-box;
 260 }
 261
 262 .palette-category {
 263
 264     border-bottom: 1px solid #ccc;
 265 }
 266
 267 .palette-hide {
 268     display: none;
 269 }
 270
 271 .palette-header {
 272     position: relative;
 273     background: #f3f3f3;
 274     cursor: pointer;
 275     text-align: left;
 276     padding: 1px;
 277     font-weight: bold;
 278     font-size: 16px;
 279     overflow: hidden;
 280     white-space: nowrap;
 281     text-overflow: ellipsis;
 282 }
 283
 284 .palette-content {
 285
 286     background: #fff;
 287     padding: 3px;
 288 }
 289
 290 .palette-close > .palette-content {
 291     background: #fff;
 292     padding: 3px;
 293     display: none;
 294 }
 295
 296 .palette-close > .palette-header > i.fa.fa-chevron-down {
 297
 298     filter: none;
 299     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
 300     -webkit-transform: rotate(-90deg);
 301     -ms-transform: rotate(-90deg);
 302     transform: rotate(-90deg);
 303 }
 304
 305 .palette-node {
 306     cursor: move;
 307     margin: 3px auto;
 308     height: 35px;
 309     border-radius: 5px;
 310     border: 1px solid #999;
 311     background: #ddd no-repeat 5% 50%;
 312     width: 80%;
 313     background-size: contain;
 314     position: relative;
 315 }
 316
 317 .palette-node-label {
 318     font-size: 13px;
 319     font-weight: bold;
 320     padding-left: 30px;
 321     margin-left: auto;
 322     margin-right: auto;
 323     position: relative;
 324     top: 50%;
 325     transform: translateY(-50%);
 326 }
 327
 328 .palette-node-icon-container {
 329     position: absolute;
 330     text-align: center;
 331     top: 0;
 332     bottom: 0;
 333     left: 0;
 334     width: 30px;
 335     border-right: 1px solid rgba(0, 0, 0, 0.1);
 336     background-color: rgba(0, 0, 0, 0.05);
 337 }
 338
 339 .palette-node-icon {
 340     /* display: inline-block;*/
 341     width: 30px;
 342     height: 100%;
 343     background-position: 50% 50%;
 344     background-size: contain;
 345     background-repeat: no-repeat;
 346 }
 347
 348 .palette-node-circle {
 349     display: inline-block;
 350     margin-top: 2px;
 351     width: 28px;
 352     height: 28px;
 353     -webkit-border-radius: 14px;
 354     -moz-border-radius: 14px;
 355     border-radius: 14px;
 356     background: red;
 357 }
 358
 359 .palette-node-square {
 360     display: inline-block;
 361     margin-top: 4px;
 362     padding-top: 1px;
 363     width: 26px;
 364     height: 26px;
 365     background: red;
 366 }
 367
 368 .palette-node-triangle {
 369     padding-top: 1px;
 370     width: 0px;
 371     height: 0px;
 372     border-left: 15px solid transparent;
 373     border-right: 15px solid transparent;
 374     border-bottom: 30px solid #2f2f2f;
 375 }
 376
 377 /*
 378 END Palette section
 379 */
 380
 381 /*
 382 Popup section
 383 */
 384 .popup.bg {
 385     fill: black;
 386     opacity: 0.21;
 387     border-radius: 3px;
 388 }
 389
 390 .popup.summary.bg {
 391     fill: white;
 392     opacity: 1;
 393 }
 394
 395 .popup.summary.counter {
 396     overflow: hidden;
 397     text-overflow: ellipsis;
 398     font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 399 }
 400
 401 .popup.summary.countervalue {
 402     overflow: hidden;
 403     text-overflow: ellipsis;
 404     font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 405 }
 406
 407 .popup.title {
 408     fill: black;
 409     font-size: 16px;
 410     font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 411 }
 412
 413 /*
 414 Popup section
 415 */