static/TopologyComposer/css/composer.css

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