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