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

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