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     border-left: 1px solid #AFAFAF;
  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     flex: 0 0 auto;
 131     max-width: 500px;
 132     min-width: 300px;
 133     padding: 20px 30px;
 134     display: flex;
 135     flex-direction: column;
 136 }
 137
 138 #side {
 139     flex: 0 0 auto;
 140     max-width: 500px;
 141     min-width: 300px;
 142     padding: 20px 30px;
 143     display: flex;
 144     flex-direction: column;
 145 }
 146
 147 .section {
 148     font-size: 16px;
 149     line-height: 40px;
 150     letter-spacing: 0.4px;
 151     border-bottom: 1px solid #ccc;
 152     margin-bottom: 10px;
 153     margin-top: 20px;
 154     display: flex;
 155     justify-content: space-between;
 156 }
 157
 158 .section > .status {
 159     display: flex;
 160     align-items: center;
 161     font-size: 12px
 162 }
 163
 164 .section > .status > .indicator {
 165     width: 8px;
 166     height: 8px;
 167     background-color: red;
 168     border-radius: 50%;
 169     display: block;
 170     margin-right: 7px;
 171 }
 172
 173 .section > .status.active > .indicator {
 174     background-color: green;
 175 }
 176
 177 .children td {
 178     padding: 5px 7px;
 179     font-size: 13px;
 180     line-height: 15px;
 181 }
 182
 183 .children td:first-child {
 184     padding-left: 0;
 185     font-weight: 500;
 186     text-align: right
 187 }