catalog/src/main/webapp/catalog/css/topology.css

   1 /**
   2  * Copyright 2016-2017 ZTE Corporation.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *     http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 .container-fluid {
  17   background-color: #fff;
  18   padding: 0;
  19 }
  20
  21
  22 div[data-name="topo_zone"]  {
  23   background-color: #fff;
  24   margin-top: 15px;
  25   margin-bottom: 15px;
  26 }
  27
  28 p[tooltip], div[tooltip], td {
  29   overflow: hidden;
  30   text-overflow: ellipsis;
  31 }
  32
  33
  34
  35 .bpContainer {
  36   position: relative;
  37   display: block;
  38   height: 100%;
  39   padding: 40px;
  40 }
  41
  42
  43 .box {
  44   position: relative;
  45   display: inline-block;
  46   min-width: 260px;
  47   min-height: 170px;
  48   border-width: 2px;
  49   border-color: #136e9d;
  50   border-style: solid;
  51   background-color: #fff;
  52   vertical-align: top;
  53   padding: 2px;
  54   border-radius: 6px;
  55   margin: 0 60px 40px 0;
  56 }
  57
  58
  59 .box .piProgress, .line .piProgress {
  60   position: absolute;
  61   top: -12px;
  62   left: -27px;
  63   z-index: 1;
  64 }
  65 /* .piProgress {
  66   position: relative;
  67   display: inline-block;
  68 } */
  69 .box .piProgress .circle, .line .piProgress .circle {
  70   background: #136e9d;
  71   border: 2px solid #d3dfe2;
  72   width: 43px;
  73   height: 43px;
  74   top: 5.5px;
  75   left: 5.5px;
  76   border-radius: 21px;
  77   font-size: 14px;
  78 }
  79 .box .piProgress .smallCircle {
  80   background: #136e9d;
  81   border: 2px solid #d3dfe2;
  82   width: 30px;
  83   height: 30px;
  84   left: 11px;
  85   border-radius: 21px;
  86   font-size: 12px;
  87   cursor: pointer;
  88 }
  89 .piProgress .circle, .piProgress .smallCircle {
  90   position: absolute;
  91   display: box;
  92   box-pack: center;
  93   box-align: center;
  94   background-color: #46b8da;
  95   color: #fff;
  96   font-size: 100%;
  97   z-index: 3;
  98 }
  99
 100 .bpContainer i.gs-node-icon {
 101   position: absolute;
 102   top: 10px;
 103   left: 9px;
 104   font-size: 23px;
 105 }
 106
 107 .bpContainer i.gs-cp-icon {
 108   position: absolute;
 109   top: 5px;
 110   left: 5px;
 111   font-size: 15px;
 112 }
 113
 114 .bpContainer .box .head, .bpContainer .line .head {
 115   display: block;
 116   background-color: #136e9d;
 117   color: #fff;
 118   padding: 2px 10px 3px 25px;
 119   border-radius: 3px;
 120   font-size: 20px;
 121   height: 35px;
 122 }
 123
 124 .bpContainer .box .holder {
 125   display: block;
 126   padding: 5px 25px;
 127   margin-top: 1px;
 128   background-color: #fff;
 129 }
 130
 131 .bpContainer .box .nest {
 132   min-height:130px;
 133   cursor:pointer;
 134 }
 135
 136 .bpContainer .box .nest .plus {
 137   position: absolute;
 138   bottom:0;
 139   right:5px;
 140 }
 141
 142 .bpContainer .box .boxHover~div {
 143  background-color:#eaf1f7;
 144 }
 145
 146 .bpContainer .boxHover{
 147   cursor:pointer;
 148 }
 149
 150 .bpContainer .box .box .appHover{
 151   cursor:pointer;
 152 }
 153
 154
 155 .bpContainer .box .box .appHover p {
 156  background-color:#eaf1f7;
 157 }
 158
 159 .bpContainer .box .box {
 160   border-color: #3aaeda;
 161   min-width: 170px;
 162   margin: 15px;
 163 }
 164
 165 .bpContainer .box .box .head {
 166   background-color: #3aaeda;
 167 }
 168
 169 .bpContainer .box .box .piProgress .circle {
 170   background-color: #3aaeda;
 171 }
 172
 173 .bpContainer .box .box .holder {
 174   text-align: center;
 175   background-color: #fff;
 176   min-height: 126px;
 177 }
 178
 179 .bpContainer .box .box .boxHover~div {
 180  background-color:#eaf1f7;
 181 }
 182
 183 .bpContainer .app {
 184   position: relative;
 185   display: inline-block;
 186   width: 47px;
 187   height: 47px;
 188   text-align: center;
 189   border-radius: 3px;
 190   margin: 10px 0;
 191 }
 192
 193 .bpContainer .app .piProgress {
 194   top: 0;
 195   left: -6px;
 196 }
 197
 198 .bpContainer .box .box .piProgress .circle{
 199   background-color: #3aaeda;
 200 }
 201
 202 .bpContainer .app p {
 203   position: relative;
 204   top: 50px;
 205   margin: 0;
 206   color: #555869;
 207   text-align: center;
 208   font-size: 15px;
 209 }
 210
 211
 212  .coordinates {
 213   position: absolute;
 214   top: 0;
 215   left: 0;
 216   width: 100%;
 217   height: 100%;
 218   pointer-events: none;
 219 }
 220
 221 .bpContainer .box .piProgress .circle>.badge, .bpContainer .line .piProgress .circle>.badge {
 222   position:absolute;
 223   display:inline-block;
 224   z-index:1;
 225   top:-8px;
 226   left:20px;
 227   min-width:20px;
 228   border-radius:10px;
 229   padding:3px!important;
 230   vertical-align:baseline;
 231   white-space:nowrap;
 232   text-align:center;
 233   background-color:#2f3334;
 234   text-decoration:none;
 235   font-size:14px;
 236   color:#fff;
 237   line-height:15px;
 238   font-style:normal;
 239   font-weight:400;
 240   opacity:1
 241 }
 242
 243 .header {
 244   border-top:2px solid #4b6b8b;
 245   background-color:#e8edf2;
 246   height:40px;
 247   padding:5px 20px
 248 }
 249
 250 .header .title {
 251   display:inline-block;
 252   font-size:18px;
 253   color:#29AAEE;
 254   line-height:28px
 255 }
 256
 257 .containList {
 258   overflow-y:scroll;
 259 }
 260
 261 div.separator-icon {
 262   text-align: center;
 263   line-height: 0
 264 }
 265
 266 .networksContainer{
 267   white-space:nowrap;
 268   margin:40px 0 0 20px;
 269   height:100%
 270 }
 271
 272 .networksContainer .network{
 273   position: relative;
 274   display:inline-block;
 275   text-align:center;
 276   min-width:70px;
 277   margin:0 10px 0 0
 278 }
 279
 280 .networksContainer .subnet{
 281   display:inline-block;
 282   text-align:center;
 283   min-width:70px;
 284   margin:0 10px 0 0
 285 }
 286
 287 .networksContainer .subnet .line{
 288   position:relative;
 289   display:inline-block;
 290   vertical-align:top
 291 }
 292
 293 .networksContainer .name {
 294   display:block;
 295   width:100%;
 296   background-color:#797B86;
 297   color:#fff;
 298   padding:2px 6px;
 299   border-radius:5px;
 300   text-align:center;
 301   margin:0 0 10px;
 302   overflow:hidden;
 303   cursor: pointer;
 304   text-overflow:ellipsis
 305 }
 306
 307 .networksContainer .network .name>.badge {
 308   position:absolute;
 309   display:inline-block;
 310   z-index:1;
 311   top:-9px;
 312   right:-9px;
 313   min-width:20px;
 314   border-radius:10px;
 315   padding:3px!important;
 316   vertical-align:baseline;
 317   white-space:nowrap;
 318   text-align:center;
 319   background-color:#2f3334;
 320   text-decoration:none;
 321   font-size:14px;
 322   color:#fff;
 323   line-height:15px;
 324   font-style:normal;
 325   font-weight:400;
 326   opacity:1
 327 }
 328
 329 .networksContainer .subnet .line .vlan{
 330   position:relative;
 331   display:inline-block;
 332   width:21px;
 333   height:500px;
 334   background-color:#149bdf;
 335   color:#fff;
 336   border-radius:5px;
 337   vertical-align:top;
 338   margin:0 10px 0 0;
 339   cursor:pointer
 340 }
 341
 342 .networksContainer .subnet .vlan .badge {
 343   position:absolute;
 344   display:inline-block;
 345   z-index:1;
 346   top:-8px;
 347   left:10px;
 348   min-width:20px;
 349   border-radius:10px;
 350   padding:3px!important;
 351   vertical-align:baseline;
 352   white-space:nowrap;
 353   text-align:center;
 354   background-color:#2f3334;
 355   text-decoration:none;
 356   font-size:14px;
 357   color:#fff;
 358   line-height:15px;
 359   font-style:normal;
 360   font-weight:400;
 361   opacity:1
 362 }
 363
 364 .networksContainer .subnet .line .vlan:last-child{
 365   margin:0
 366 }
 367
 368 .networksContainer .subnet .line .vlan>p{
 369   position:absolute;
 370   display:block;
 371   transform:rotate(90deg);
 372   -ms-transform:rotate(90deg);
 373   -webkit-transform:rotate(90deg);
 374   white-space:nowrap;
 375   color:#fff;
 376   top:5px;
 377   right:0;
 378   left:1px
 379 }
 380
 381 .networksContainer .subnet .line .vlan>p.cidr{
 382   width:200px;
 383   top:auto;
 384   left:-90px;
 385   bottom:85px;
 386   color:#fff;
 387   text-align:right
 388 }
 389
 390 .topoZone {
 391   display: inline-block;
 392   float: left;
 393 }