openo-portal/portal-catalog/src/main/webapp/catalog/css/topology.css

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