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     border-right: 1px solid #AFAFAF;
  95     flex: 1 1 auto;
  96     display: flex;
  97     align-items: center;
  98     justify-content: center;
  99 }
 100
 101 #legenda {
 102     position: absolute;
 103     top: 20px;
 104     right: 20px;
 105     border: 1px solid #cdcdcd;
 106     border-radius: 2px;
 107     padding: 15px;
 108 }
 109
 110 #legenda > .node {
 111     margin-top: 10px;
 112     font-size: 13px;
 113     display: flex;
 114     align-items: center;
 115 }
 116
 117 #legenda > .node:first-child {
 118     margin-top: 0;
 119 }
 120
 121 #legenda > .node > .icon {
 122     width: 20px;
 123     height: 20px;
 124     border-radius: 1px;
 125     margin-right: 10px;
 126 }
 127
 128 #side {
 129     flex: 0 0 auto;
 130     max-width: 500px;
 131     min-width: 300px;
 132     padding: 20px 30px;
 133     display: flex;
 134     flex-direction: column;
 135 }
 136
 137 .section {
 138     font-size: 16px;
 139     line-height: 40px;
 140     letter-spacing: 0.4px;
 141     border-bottom: 1px solid #ccc;
 142     margin-bottom: 10px;
 143     margin-top: 20px;
 144     display: flex;
 145     justify-content: space-between;
 146 }
 147
 148 .section > .status {
 149     display: flex;
 150     align-items: center;
 151     font-size: 12px
 152 }
 153
 154 .section > .status > .indicator {
 155     width: 8px;
 156     height: 8px;
 157     background-color: red;
 158     border-radius: 50%;
 159     display: block;
 160     margin-right: 7px;
 161 }
 162
 163 .section > .status.active > .indicator {
 164     background-color: green;
 165 }
 166
 167 .children td {
 168     padding: 5px 7px;
 169     font-size: 13px;
 170     line-height: 15px;
 171 }
 172
 173 .children td:first-child {
 174     padding-left: 0;
 175     font-weight: 500;
 176     text-align: right
 177 }