apiroute/apiroute-service/src/main/resources/iui-route/css/route.css

   1 /*\r
   2  * Copyright (C) 2016 ZTE, Inc. and others. All rights reserved. (ZTE)\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 body {\r
  17   color: #333;\r
  18   font-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif !important;\r
  19   padding: 0px !important;\r
  20   margin: 0px !important;\r
  21   direction: ltr;\r
  22   background-color: #ffffff !important; \r
  23 }\r
  24 \r
  25 /*.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\r
  26     cursor: auto;\r
  27 \r
  28     }*/\r
  29 .modal-footer {\r
  30     margin-top:0px; \r
  31   }\r
  32 .form-group {\r
  33     margin-bottom: 5px;\r
  34 }\r
  35 \r
  36 .modal-body {\r
  37     padding: 10px;\r
  38 }\r
  39 \r
  40 .row{\r
  41      margin-left: 0px; \r
  42   margin-right: 0px; \r
  43 }\r
  44 \r
  45 select {\r
  46   border-width: 1px;\r
  47   padding: 4px 1px;\r
  48   border-radius: 4px;\r
  49 }\r
  50 \r
  51 .navbar {\r
  52   overflow: visible;\r
  53   margin-bottom: 0px;\r
  54 \r
  55 }\r
  56 \r
  57 #top-bar, #top-bar small, #top-bar a {\r
  58   text-shadow: 0px -1px 0px #182127;\r
  59   color: #ffffff;\r
  60 }\r
  61 \r
  62 .span12{\r
  63   margin-top:5px;\r
  64 }\r
  65 \r
  66 #title {\r
  67   color: #ffffff;\r
  68   font-weight: bolder;\r
  69 }\r
  70 \r
  71 #top-bar {\r
  72   background-color: #363F45;\r
  73   background-image: -moz-linear-gradient(top, #545d63, #182127);\r
  74   background-image: -ms-linear-gradient(top, #545d63, #182127);\r
  75   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#545d63), to(#182127));\r
  76   background-image: -webkit-linear-gradient(top, #545d63, #182127);\r
  77   background-image: -o-linear-gradient(top, #545d63, #182127);\r
  78   background-image: linear-gradient(top, #545d63, #182127);\r
  79   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#545d63', endColorstr = '#182127', GradientType = 0);\r
  80   -webkit-border-radius: 0;\r
  81   -moz-border-radius: 0;\r
  82   border-radius: 0;\r
  83   height: 55px;\r
  84 }\r
  85 \r
  86 .navbar-inner {\r
  87   padding-left: 20px;\r
  88   padding-right: 20px;\r
  89   background-color: #2c2c2c;\r
  90   background-image: -moz-linear-gradient(top, #333333, #222222);\r
  91   background-image: -ms-linear-gradient(top, #333333, #222222);\r
  92   background-image: -o-linear-gradient(top, #333333, #222222);\r
  93   background-image: linear-gradient(top, #333333, #222222);\r
  94   background-repeat: repeat-x;\r
  95   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);\r
  96   -webkit-border-radius: 4px;\r
  97   -moz-border-radius: 4px;\r
  98   border-radius: 4px;\r
  99   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);\r
 100   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);\r
 101 }\r
 102 \r
 103 \r
 104 \r
 105 .container-fluid {\r
 106   background-color: #fff;\r
 107 }\r
 108 \r
 109 div[data-name="route_zone"]  {\r
 110   background-color: #fff;\r
 111   margin-bottom: 15px;\r
 112 }\r
 113 \r
 114 \r
 115 \r
 116 p[tooltip], div[tooltip], td[tooltip], span[tooltip]{\r
 117   overflow: hidden;\r
 118   text-overflow: ellipsis;\r
 119   white-space:nowrap; \r
 120 }\r
 121 \r
 122 .add-route-btn{\r
 123   background: #fff;\r
 124   color: #ccc;\r
 125   height: 115px;\r
 126   margin: 10px;\r
 127   padding-top: 22px;\r
 128   text-align: center;\r
 129   text-decoration: none;\r
 130   width: 130px;\r
 131   border:1px dashed #aaa;\r
 132   float:left;\r
 133 \r
 134 }\r
 135 \r
 136 .add-route-btn:hover{\r
 137   color:#3276b1;\r
 138   cursor: pointer;\r
 139 }\r
 140 \r
 141 \r
 142 .add-route-btn span {\r
 143   display: block;\r
 144   margin-left:5px;\r
 145   margin-right:5px;\r
 146   margin-top:5px;\r
 147   color: #444;\r
 148 }\r
 149 \r
 150 \r
 151 .quick-btn {\r
 152   background: #eee;\r
 153   box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #ccc;\r
 154   color: #444;\r
 155  height: 110px;\r
 156   margin: 10px;\r
 157   padding-top: 1pc;\r
 158   text-align: center;\r
 159   text-decoration: none;\r
 160   width: 120px;\r
 161   float:left;\r
 162 \r
 163 }\r
 164 div[data-name="route_zone"]  .active{\r
 165         color:#fff;\r
 166         background-color:#444;\r
 167         cursor: pointer;\r
 168 }\r
 169 \r
 170 div[data-name="route_zone"] .sparkline .route-valid {\r
 171     color: #62AAF5;\r
 172   }\r
 173 \r
 174   div[data-name="route_zone"] .sparkline .route-invalid {\r
 175     color:rgba(128, 128, 128, 0.73);\r
 176   }\r
 177 \r
 178 div[data-name="route_zone"]  .active .sparkline i{\r
 179     color:#C3DDF4;\r
 180   }\r
 181 \r
 182 \r
 183 \r
 184 .quick-btn:hover{\r
 185 \r
 186   box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #636363;\r
 187   cursor: pointer;\r
 188 }\r
 189 \r
 190 .quick-btn span {\r
 191   display: block;\r
 192   margin-left:5px;\r
 193   margin-right:5px;\r
 194   margin-top:10px;\r
 195 \r
 196 }\r
 197 \r
 198 .route-ip{\r
 199           font-size: 12px;\r
 200 }\r
 201 \r
 202 \r
 203 .progressList{\r
 204         margin-top: 15px;\r
 205         margin-left:15px;\r
 206         width:90%\r
 207 }\r
 208 \r
 209 .processContent{\r
 210   display: inline-block;margin-right:5px\r
 211 }\r
 212 \r
 213 .nav.nav-pills.nav-stacked > li.active > a, .nav.nav-pills.nav-stacked > li.active > a:hover,.nav.nav-pills.nav-stacked > li > a:hover {\r
 214   background-color: #f6f6f6;\r
 215   border-left-color: #3c8dbc;\r
 216   color: #444;\r
 217 }\r
 218 \r
 219 \r
 220 .nav.nav-pills.nav-stacked > li > a {\r
 221   border-top: 0;\r
 222   border-left: 3px solid transparent;\r
 223   -webkit-border-radius: 0;\r
 224   -moz-border-radius: 0;\r
 225   border-radius: 0;\r
 226   color: #444;\r
 227   height:46px;\r
 228 }\r
 229 .nav.nav-pills > li.active > a {\r
 230   font-weight: 600;\r
 231 }\r
 232 \r
 233 .btn-xs {\r
 234   color: #333;\r
 235   font-size: 14px;\r
 236 }\r
 237 .grey {\r
 238   background-color: #e5e5e5;\r
 239   color: #333;\r
 240 }\r
 241 .btn-xs, .btn-group-xs>.btn {\r
 242   padding: 1px 5px;\r
 243   font-size: 12px;\r
 244   line-height: 1.5;\r
 245   border-radius: 3px;\r
 246 }\r
 247 \r
 248 .control-label .required {\r
 249   color: #e02222;\r
 250   font-size: 12px;\r
 251   padding-left: 2px;\r
 252 }\r
 253 \r
 254 .nav>li>a{\r
 255   /*padding:10px 5px;*/\r
 256 }\r
 257 \r
 258 .process-btn button{\r
 259   padding:3px 8px\r
 260 }\r
 261 \r
 262 pre.prettyprint {\r
 263    color:#000;\r
 264    height: 450px;\r
 265 }\r
 266 \r
 267 pre {\r
 268   font: 14px/22px 'courier new';\r
 269   word-break: break-all;\r
 270   word-wrap: break-word;\r
 271   border: 0px;\r
 272   background-color:#fff;\r
 273   padding: 5px 5px;\r
 274 }\r
 275 \r
 276 .atv {\r
 277   color: #114B7E;\r
 278 }\r
 279 \r
 280 \r
 281 \r
 282 .stats_box {\r
 283   display: inline-block;\r
 284   list-style: none outside none;\r
 285   margin-left: 0;\r
 286   margin-top: 10px;\r
 287   padding: 0;\r
 288     /*float: left;*/\r
 289 }\r
 290 \r
 291 .stats_box .routeDiv{\r
 292   background: #F1F3FA;\r
 293   /* box-shadow: 0 0 0 1px #f8f8f8 inset,0 0 0 1px #ccc; */\r
 294   display: inline-block;\r
 295   line-height: 18px;\r
 296   margin: 0 10px 10px;\r
 297   padding: 0 8px;\r
 298   float: left;\r
 299   height: 125px;\r
 300   border: 1px solid #E0E0E0;\r
 301   /* border-radius: 10px; */\r
 302 }\r
 303 \r
 304 .routeDiv:hover{\r
 305 \r
 306  border:1px solid #cfcfcf;\r
 307   cursor: pointer;\r
 308   box-shadow:-webkit-box-shadow:0 5px 20px rgba(0,0,0,0.1);\r
 309     box-shadow:0 5px 20px rgba(0,0,0,0.1);   \r
 310 }\r
 311 \r
 312 \r
 313 .sparkline {\r
 314  width: 60px;\r
 315  border-right: 1px solid #dcdcdc;\r
 316   box-shadow: 1px 0 0 0 #fff;\r
 317   float: left;\r
 318   margin-right: 9pt;\r
 319   padding: 25px 10px 0 4px;\r
 320   line-height: 70px\r
 321 }\r
 322 \r
 323 .table-bordered > thead > tr > th{\r
 324     border-bottom-width: 0;\r
 325 }\r
 326 \r
 327 \r
 328 \r
 329 .stats_box .stat_text {\r
 330   float: left;\r
 331   font-size: 9pt;\r
 332   padding: 10px 0px 10px 0;\r
 333   text-align: left;\r
 334   width: 120px;\r
 335   position: relative;\r
 336 }\r
 337 \r
 338 .stats_box .stat_text .percent {\r
 339   color: #444;\r
 340   float: right;\r
 341   font-size: 20px;\r
 342   font-weight: 700;\r
 343   position: absolute;\r
 344   right: 0;\r
 345   top: 17px;\r
 346 }\r
 347 \r
 348 .stats_box .stat_text strong {\r
 349   display: block;\r
 350   font-size: 16px\r
 351 ;  margin-bottom: 10px;\r
 352   margin-top: 5px;\r
 353 \r
 354 }\r
 355 \r
 356 .stat_text b{\r
 357   font-weight: 100;\r
 358 }\r
 359 \r
 360 .stat_text  span,.stats_box span{\r
 361   display: block;\r
 362   margin-bottom:5px;\r
 363 }\r
 364 \r
 365 \r
 366 \r
 367 .stats_box span a{ \r
 368 padding: 0px 6px;\r
 369 margin-right:3px;\r
 370   }\r
 371 \r
 372 \r
 373   \r
 374   span.response_throbber {\r
 375   background-image: url('../img/throbber.gif');\r
 376   width: 128px;\r
 377   height: 16px;\r
 378   display: block;\r
 379   clear: none;\r
 380   float: left;\r
 381   margin-top: 50px;\r
 382 }\r
 383 \r
 384 div.separator div {\r
 385   text-align: center;\r
 386   line-height: 0;\r
 387 }\r
 388 \r
 389 .titlefont {\r
 390   font-size: 16px;\r
 391 }\r
 392 \r
 393 .separator-line {\r
 394   height: 1px;\r
 395   width: 100%;\r
 396   background: #ddd;\r
 397   overflow: hidden;\r
 398   margin-bottom: 15px;\r
 399   margin-top: 6px;\r
 400   opacity: 0.6;\r
 401 }\r
 402 \r
 403 \r
 404 \r
 405 .serverInput{\r
 406   display: inline;\r
 407   margin-right: 5px;\r
 408 }\r
 409 \r
 410 .apiRouteInput{\r
 411   float:left;\r
 412     margin-right: 10px\r
 413 }\r
 414   \r
 415   \r
 416 .input-group {\r
 417   position: relative;\r
 418   display: table;\r
 419   border-collapse: separate;\r
 420 }\r
 421 \r
 422  .input-group-btn-vertical {\r
 423   position: relative;\r
 424   white-space: nowrap;\r
 425   width: 10px;\r
 426   vertical-align: middle;\r
 427   display: table-cell;\r
 428 }\r
 429 \r
 430 .input-group-btn-vertical .bootstrap-touchspin-up {\r
 431   border-radius: 0;\r
 432   border-top-right-radius: 4px;\r
 433 }\r
 434 \r
 435 .input-group-btn-vertical>.btn {\r
 436   display: block;\r
 437   float: none;\r
 438   width: 100%;\r
 439   max-width: 100%;\r
 440   padding: 8px 10px;\r
 441   margin-left: -1px;\r
 442   position: relative;\r
 443 }\r
 444 \r
 445 .input-group-btn-vertical i {\r
 446   position: absolute;\r
 447   top: 3px;\r
 448   left: 5px;\r
 449   font-size: 9px;\r
 450   font-weight: 400;\r
 451 }\r
 452 \r
 453 .input-group-btn-vertical .bootstrap-touchspin-down {\r
 454   margin-top: -2px;\r
 455   border-radius: 0;\r
 456   border-bottom-right-radius: 4px;\r
 457 }\r
 458 \r
 459 \r
 460 \r
 461 .small_btn {\r
 462   padding: 0px 6px;\r
 463   margin-right: 3px;\r
 464 }\r
 465 \r
 466 .item-tip {\r
 467   position: absolute;\r
 468   color: #999999;\r
 469   top: 10px;\r
 470   left: 20px;\r
 471   transition: all linear .2s;\r
 472   background-color: #fff;\r
 473   padding: 0px 3px;\r
 474   font-size: 12px;\r
 475 }\r
 476 .item-tip-focus {top: -8px;font-size: 12px;color: #428bca;}\r
 477 \r
 478 .form-input-focus {border-color: #428bca;outline: 0;}\r
 479 \r
 480 .tip_color {\r
 481     color: #f0ad4e;\r
 482     cursor: help;\r
 483 }\r
 484 \r
 485 .item-tip-none{display: none}\r
 486 \r
 487 .tipArea{\r
 488   border-bottom: 1px solid #d4d4d4;\r
 489     width: 85%;\r
 490     text-align: center;\r
 491     margin-bottom: 20px;\r
 492     margin-left: 30px;\r
 493     font-weight: bold;\r
 494         position: relative;\r
 495 \r
 496 }\r
 497 \r
 498 .tipArea:after, .tipArea:before {\r
 499     border: 10px solid transparent;\r
 500     border-top: 10px solid #fff;\r
 501     width: 0;\r
 502     height: 0;\r
 503     right: 241px;\r
 504     top: 20px;\r
 505     content: ' ';\r
 506     position: absolute;\r
 507 }\r
 508 \r
 509 .tipArea:before {\r
 510     border-top-color: #d4d4d4;\r
 511     left: 230px;\r
 512     top: 21px;\r
 513 }\r
 514 \r
 515 \r
 516 .help-block {\r
 517     margin-top: 5px;\r
 518     margin-bottom: 5px;\r
 519   }\r
 520 \r
 521 .form-title {\r
 522     padding-left: 8px;\r
 523     padding-right: 8px;\r
 524     padding-top: 5px;\r
 525     padding-bottom: 5px;\r
 526     margin-bottom: 10px;\r
 527     margin-left:10px;\r
 528     border-left: 2px solid #5b9bd1;\r
 529     color: #1A78CA;\r
 530     font-size: 16px;\r
 531 }\r
 532 \r
 533 .form-title a{\r
 534       cursor: pointer;\r
 535 }\r
 536 \r
 537 .panel-tools {\r
 538     display: inline-block;\r
 539     float: right;\r
 540     margin-top: 0;\r
 541     padding: 0;\r
 542     position: relative;\r
 543 }\r
 544 \r
 545 .panel-tools a {\r
 546     margin-left: 5px;\r
 547     color: #9d9fa2;\r
 548     cursor: pointer;\r
 549 }\r
 550 \r
 551 .panel-tools  a:hover{\r
 552   color: #34495e;\r
 553   text-decoration: none;\r
 554 }\r
 555 \r
 556 .table-responsive{\r
 557       margin-top: 15px;\r
 558 }\r
 559 \r
 560 .btn-s  {\r
 561     padding: 0px 6px;\r
 562     margin-right: 3px;\r
 563 }\r
 564 \r
 565 \r
 566 table.dataTable thead .sorting,\r
 567 table.dataTable thead .sorting_asc,\r
 568 table.dataTable thead .sorting_desc,\r
 569 table.dataTable thead .sorting_asc_disabled,\r
 570 table.dataTable thead .sorting_desc_disabled {\r
 571     background: 0 0;\r
 572 }\r
 573 \r
 574 table.dataTable thead .sorting_asc:after {\r
 575     content: "\f0de";\r
 576     float: right;\r
 577     font-family: fontawesome;\r
 578     color:#357ebd;\r
 579 }\r
 580 \r
 581 table.dataTable thead .sorting_desc:after {\r
 582     content: "\f0dd";\r
 583     float: right;\r
 584     font-family: fontawesome;\r
 585     color:#357ebd;\r
 586 }\r
 587 \r
 588 table.dataTable thead .sorting:after {\r
 589     content: "\f0dc";\r
 590     float: right;\r
 591     font-family: fontawesome;\r
 592     color: rgba(50,50,50,.5);\r
 593 }\r
 594 \r
 595 \r
 596 .hostTableDiv{\r
 597     height: 100px;\r
 598     overflow: auto;\r
 599   \r
 600   }\r
 601 \r
 602 .hostTable{\r
 603  font-size: 12px;\r
 604  margin-bottom: 0px;\r
 605 }\r
 606 \r
 607 .hostTable>thead>tr>th, .hostTable>tbody>tr>th, .hostTable>tfoot>tr>th, .hostTable>thead>tr>td, .hostTable>tbody>tr>td, .hostTable>tfoot>tr>td {\r
 608     padding: 6px;\r
 609    \r
 610 }\r
 611 \r
 612 \r
 613 td.details-control {\r
 614     background: url('../img/details_open.png') no-repeat center center;\r
 615     cursor: pointer;\r
 616 }\r
 617 tr.shown td.details-control {\r
 618     background: url('../img/details_close.png') no-repeat center center;\r
 619 }\r
 620 \r
 621 \r
 622 input[type="checkbox"] {\r
 623     -webkit-appearance: none;\r
 624     background: #fff url(../img/checkbox-init.png);\r
 625     height: 18px;\r
 626     vertical-align: middle;\r
 627     width: 18px;\r
 628   margin-bottom:5px;\r
 629   margin-right:5px;\r
 630 }\r
 631 \r
 632 input[type="checkbox"]:checked {\r
 633     -webkit-appearance: none;\r
 634     background: #fff url(../img/checkbox-checked.png);\r
 635     height: 18px;\r
 636     vertical-align: middle;\r
 637     width: 18px;\r
 638 }\r
 639 \r
 640 input[type="checkbox"]:focus,\r
 641 input[type="checkbox"]:hover {\r
 642     outline: none;\r
 643 }