portal-common/src/main/webapp/common/css/ngict-component.css

   1 /**\r
   2  * Copyright 2016-2017, CMCC Technologies Co., Ltd.\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 \r
  17 body {\r
  18     color: #333;\r
  19     font-size: 14px;\r
  20     font-family: "Microsoft yahei", Arial !important;\r
  21     background-color: transparent;\r
  22 }\r
  23    \r
  24 /*fontIcon*/\r
  25 \r
  26 [class^="ict-"],\r
  27 [class*=" ict-"] {\r
  28     padding-right: 3px;\r
  29 }\r
  30 \r
  31 /*common color*/\r
  32 \r
  33 .blue1 {\r
  34     background-color: #5b9bd1;\r
  35     color: #fff;\r
  36 }\r
  37 \r
  38 .blue1:hover {\r
  39     background-color: #487ca9;\r
  40     color: #fff;\r
  41 }\r
  42 \r
  43 .blue2 {\r
  44     background-color: #57b5e3;\r
  45     color: #fff;\r
  46 }\r
  47 \r
  48 .blue2:hover {\r
  49     background-color: #43a1cf;\r
  50     color: #fff;\r
  51 }\r
  52 \r
  53 .red {\r
  54     background-color: #e35b5a;\r
  55     color: #fff;\r
  56 }\r
  57 \r
  58 .red:hover {\r
  59     background-color: #d45150;\r
  60     color: #fff;\r
  61 }\r
  62 \r
  63 .green {\r
  64     background-color: #44b6ae;\r
  65     color: #fff;\r
  66 }\r
  67 \r
  68 .green:hover {\r
  69     background-color: #329d96;\r
  70     color: #fff;\r
  71 }\r
  72 \r
  73 .gold {\r
  74     background-color: #c0af69;\r
  75     color: #fff;\r
  76 }\r
  77 \r
  78 .gold:hover {\r
  79     background-color: #ad9a4d;\r
  80     color: #fff;\r
  81 }\r
  82 \r
  83 .grey {\r
  84     background-color: #e5e5e5;\r
  85     color: #333;\r
  86 }\r
  87 \r
  88 .grey:hover {\r
  89     background-color: #d8d8d8;\r
  90     color: #333;\r
  91 }\r
  92 \r
  93 .dark_grey {\r
  94     background-color: #333;\r
  95     color: #fff;\r
  96 }\r
  97 \r
  98 .dark_grey:hover {\r
  99     background-color: #101010;\r
 100     color: #fff;\r
 101 }\r
 102 \r
 103 .white {\r
 104     background-color: #fff;\r
 105     border: 1px solid #ddd;\r
 106     color: #333;\r
 107 }\r
 108 \r
 109 .white:hover {\r
 110     background-color: #e5e5e5;\r
 111     color: #333;\r
 112 }\r
 113 \r
 114 /***\r
 115 Responsive & Scrollable Tables\r
 116 ***/\r
 117 \r
 118 .table-scrollable {\r
 119     width: 100%;\r
 120     overflow-x: auto;\r
 121     overflow-y: hidden;\r
 122     border: 1px solid #dddddd;\r
 123 }\r
 124 \r
 125 .table-scrollable > .table {\r
 126     width: 100% !important;\r
 127     margin: 0 !important;\r
 128     margin-bottom: 0;\r
 129     background-color: #fff;\r
 130 }\r
 131 \r
 132 .table-scrollable > .table > thead > tr > th,\r
 133 .table-scrollable > .table > tbody > tr > th,\r
 134 .table-scrollable > .table > tfoot > tr > th,\r
 135 .table-scrollable > .table > thead > tr > td,\r
 136 .table-scrollable > .table > tbody > tr > td,\r
 137 .table-scrollable > .table > tfoot > tr > td {\r
 138     white-space: nowrap;\r
 139 }\r
 140 \r
 141 .table-scrollable > .table-bordered {\r
 142     border: 0;\r
 143 }\r
 144 \r
 145 .table-scrollable > .table-bordered > thead > tr > th:first-child,\r
 146 .table-scrollable > .table-bordered > tbody > tr > th:first-child,\r
 147 .table-scrollable > .table-bordered > tfoot > tr > th:first-child,\r
 148 .table-scrollable > .table-bordered > thead > tr > td:first-child,\r
 149 .table-scrollable > .table-bordered > tbody > tr > td:first-child,\r
 150 .table-scrollable > .table-bordered > tfoot > tr > td:first-child {\r
 151     border-left: 0;\r
 152 }\r
 153 \r
 154 .table-scrollable > .table-bordered > thead > tr > th:last-child,\r
 155 .table-scrollable > .table-bordered > tbody > tr > th:last-child,\r
 156 .table-scrollable > .table-bordered > tfoot > tr > th:last-child,\r
 157 .table-scrollable > .table-bordered > thead > tr > td:last-child,\r
 158 .table-scrollable > .table-bordered > tbody > tr > td:last-child,\r
 159 .table-scrollable > .table-bordered > tfoot > tr > td:last-child {\r
 160     border-right: 0;\r
 161 }\r
 162 \r
 163 .table-scrollable > .table-bordered > thead > tr:last-child > th,\r
 164 .table-scrollable > .table-bordered > tbody > tr:last-child > th,\r
 165 .table-scrollable > .table-bordered > tfoot > tr:last-child > th,\r
 166 .table-scrollable > .table-bordered > thead > tr:last-child > td,\r
 167 .table-scrollable > .table-bordered > tbody > tr:last-child > td,\r
 168 .table-scrollable > .table-bordered > tfoot > tr:last-child > td {\r
 169     border-bottom: 0;\r
 170 }\r
 171 \r
 172 /*form*/\r
 173 \r
 174 .form {\r
 175     padding: 0 !important;\r
 176 }\r
 177 \r
 178 .form-group .multiRow {\r
 179     margin-bottom: 15px;\r
 180 }\r
 181 \r
 182 .form-group,\r
 183 .form-group .btn {\r
 184     font-size: 12px;\r
 185 }\r
 186 \r
 187 .form-body {\r
 188     padding: 10px;\r
 189 }\r
 190 \r
 191 .form-actions {\r
 192     padding-top: 20px \r
 193 }\r
 194 \r
 195 .form-actions.nobg {\r
 196     background-color: transparent;\r
 197 }\r
 198 \r
 199 .form-actions.top {\r
 200     margin-top: 0;\r
 201     margin-bottom: 20px;\r
 202     border-top: 0;\r
 203     border-bottom: 1px solid #e5e5e5;\r
 204 }\r
 205 \r
 206 /*.form-actions.fluid {\r
 207   padding: 20px 0;\r
 208 }*/\r
 209 \r
 210 .form-actions .btnGroup {\r
 211     padding-left: 0;\r
 212 }\r
 213 \r
 214 .form-actions.fluid > [class^="col-"] {\r
 215     padding-left: 13px;\r
 216 }\r
 217 \r
 218 .form-actions:before,\r
 219 .form-actions:after {\r
 220     display: table;\r
 221     line-height: 0;\r
 222     content: "";\r
 223 }\r
 224 \r
 225 .form-actions:after {\r
 226     clear: both;\r
 227 }\r
 228 \r
 229 .form-section {\r
 230     margin: 30px 0px 25px 0px;\r
 231     padding-bottom: 5px;\r
 232     border-bottom: 1px solid #eee;\r
 233 }\r
 234 \r
 235 .form .form-section:first-child {\r
 236     margin-top: 5px;\r
 237 }\r
 238 \r
 239 .help-inline {\r
 240     font-size: 13px;\r
 241     color: #737373;\r
 242     display: inline-block;\r
 243     padding: 5px;\r
 244 }\r
 245 \r
 246 .submBtn {\r
 247     text-align: center;\r
 248 }\r
 249 .subm-iconMargin {\r
 250 margin-left:-40px;\r
 251 }\r
 252 .subm-margin {\r
 253 margin-left:-40px;\r
 254 }\r
 255 \r
 256 /* left, right aligned form actions */\r
 257 \r
 258 .form-actions.right {\r
 259     padding-left: 0;\r
 260     padding-right: 10px;\r
 261     text-align: right;\r
 262 }\r
 263 \r
 264 .form-actions.left {\r
 265     padding-left: 10px;\r
 266     padding-right: 0;\r
 267     text-align: left;\r
 268 }\r
 269 \r
 270 /* Checkbox */\r
 271 \r
 272 .form-group .checkbox {\r
 273     padding-left: 0;\r
 274 }\r
 275 \r
 276 .form-title {\r
 277     padding: 8px;\r
 278     margin-bottom: 25px;\r
 279     border-left: 2px solid #5b9bd1;\r
 280     color: #1A78CA;\r
 281     font-size: 16px;\r
 282 }\r
 283 \r
 284 .checkbox-list > label {\r
 285     display: block;\r
 286 }\r
 287 \r
 288 .checkbox-list > label.checkbox-inline {\r
 289     display: inline-block;\r
 290 }\r
 291 \r
 292 .checkbox-list > label.checkbox-inline:first-child {\r
 293     padding-left: 0;\r
 294 }\r
 295 \r
 296 /* Radios */\r
 297 input[type="radio"]{\r
 298         cursor:pointer\r
 299 }\r
 300 .radio-list > label {\r
 301     display: block;\r
 302 }\r
 303 \r
 304 .radio-list > label.radio-inline {\r
 305     display: inline-block;\r
 306 }\r
 307 \r
 308 .radio-list > label.radio-inline:first-child {\r
 309     padding-left: 0;\r
 310 }\r
 311 \r
 312 .form-horizontal .radio-list .radio {\r
 313     padding-top: 1px;\r
 314 }\r
 315 \r
 316 .form-horizontal .radio-list > label {\r
 317     margin-bottom: 0;\r
 318 }\r
 319 \r
 320 .form-horizontal .radio > span {\r
 321     margin-top: 2px;\r
 322 }\r
 323 \r
 324 .help-block {\r
 325     margin-top: 5px;\r
 326     margin-bottom: 5px;\r
 327         color: #a94442 !important;\r
 328 }\r
 329 \r
 330 .form-inline input {\r
 331     margin-bottom: 0px !important;\r
 332 }\r
 333 .form-horizontal .control-label{\r
 334     padding-top:4px;\r
 335         text-align:right;\r
 336 }\r
 337 \r
 338 .form-control-static {\r
 339     font-size: 14px;\r
 340     padding-top: 7px;\r
 341 }\r
 342 \r
 343 .control-label .required {\r
 344     color: #e02222;\r
 345     font-size: 12px;\r
 346     padding-left: 2px;\r
 347 }\r
 348 \r
 349 /*TAB*/\r
 350 \r
 351 .nav-tabs {\r
 352     border: 0;\r
 353     font-weight: bold;\r
 354 }\r
 355 \r
 356 .nav-tabs > li.active > a,\r
 357 .nav-tabs > li.active > a:hover,\r
 358 .nav-tabs > li.active > a:focus {\r
 359     border: 0;\r
 360     border-top: 3px solid #F3565D;\r
 361 }\r
 362 \r
 363 .nav-tabs > li > a {\r
 364     border-radius: 0;\r
 365     font-weight: bold;\r
 366 }\r
 367 \r
 368 .nav-tabs > li > a:hover {\r
 369     background-color: #f1f3fa;\r
 370     border: 1Px solid #f1f3fa;\r
 371 }\r
 372 \r
 373 /*button*/\r
 374 \r
 375 .btn {\r
 376     min-width: 80px;\r
 377     letter-spacing: 1px;\r
 378 }\r
 379 \r
 380 .btnGroup .btn {\r
 381     margin-right: 15px;\r
 382 }\r
 383 \r
 384 .pagination-panel .btn {\r
 385     min-width: 4px;\r
 386 }\r
 387 \r
 388 .btn.dropdown-toggle,\r
 389 .btn-group .btn.dropdown-toggle,\r
 390 .btn:hover,\r
 391 .btn:disabled,\r
 392 .btn[disabled],\r
 393 .btn:focus,\r
 394 .btn:active,\r
 395 .btn.active {\r
 396     outline: none !important;\r
 397     background-image: none !important;\r
 398     filter: none;\r
 399     -webkit-box-shadow: none;\r
 400     -moz-box-shadow: none;\r
 401     box-shadow: none;\r
 402     text-shadow: none;\r
 403 }\r
 404 .btn-xs:hover{\r
 405 text-decoration:none ;\r
 406 }\r
 407 /*radius*/\r
 408 \r
 409 .radius_l {\r
 410     border-radius: 20px;\r
 411 }\r
 412 \r
 413 .radius_m {\r
 414     border-radius: 8px;\r
 415 }\r
 416 \r
 417 .radius_s {\r
 418     border-radius: 3px;\r
 419 }\r
 420 \r
 421 /*Progress Bars*/\r
 422 \r
 423 .progress {\r
 424     border: 0;\r
 425     background-image: none !important;\r
 426     filter: none !important;\r
 427     -webkit-box-shadow: none !important;\r
 428     -moz-box-shadow: none !important;\r
 429     box-shadow: none !important;\r
 430 }\r
 431 \r
 432 .form-wizard .steps > li.active > a.step .number {\r
 433     background-color: #45B6AF\r
 434 }\r
 435 \r
 436 .progress > .progress-bar-success {\r
 437     background-color: #45B6AF\r
 438 }\r
 439 \r
 440 /*label*/\r
 441 \r
 442 .label,\r
 443 label {\r
 444     font-weight: 400;\r
 445     /*margin-bottom:15px;*/\r
 446 }\r
 447 \r
 448 /*表单中的组合*/\r
 449 \r
 450 .input-group-btn-vertical.fa {\r
 451     font-size: 12px;\r
 452 }\r
 453 \r
 454 .spinner {\r
 455     width: 60px;\r
 456     margin-left: 10px;\r
 457     margin-right: 30px;\r
 458 }\r
 459 \r
 460 .spinner input {\r
 461     text-align: right;\r
 462 }\r
 463 \r
 464 .input-group-btn-vertical {\r
 465     position: relative;\r
 466     white-space: nowrap;\r
 467     width: 1%;\r
 468     vertical-align: middle;\r
 469     display: table-cell;\r
 470 }\r
 471 \r
 472 .input-group-btn-vertical > .btn {\r
 473     display: block;\r
 474     float: none;\r
 475     width: 100%;\r
 476     max-width: 100%;\r
 477     padding: 6px;\r
 478     margin-left: -1px;\r
 479     position: relative;\r
 480     border-radius: 0;\r
 481 }\r
 482 \r
 483 .input-group-btn-vertical > .btn {\r
 484     min-width: 20px;\r
 485 }\r
 486 \r
 487 .input-group-btn-vertical > .btn:first-child {\r
 488     border-top-right-radius: 4px;\r
 489 }\r
 490 \r
 491 .input-group-btn-vertical > .btn:last-child {\r
 492     margin-top: -2px;\r
 493     border-bottom-right-radius: 4px;\r
 494 }\r
 495 \r
 496 .input-group-btn-vertical i {\r
 497     position: absolute;\r
 498     top: -2px;\r
 499     left: 5px;\r
 500 }\r
 501 \r
 502 .input-group .form-control {\r
 503     height: 26px !important;\r
 504 }\r
 505 \r
 506 /*separator & title*/\r
 507 \r
 508 .separator-line {\r
 509     height: 1px;\r
 510     width: 100%;\r
 511     background: #ddd;\r
 512     overflow: hidden;\r
 513     margin-bottom: 15px;\r
 514     margin-top: 6px;\r
 515     opacity: 0.6;\r
 516 }\r
 517 \r
 518 .separator {\r
 519     opacity: 0.7;\r
 520 }\r
 521 \r
 522 .separator:hover {\r
 523     opacity: 1;\r
 524 }\r
 525 \r
 526 .titlefont {\r
 527     font-size: 16px;\r
 528         margin-top:15px;\r
 529 }\r
 530 \r
 531 /*link*/\r
 532 \r
 533 a {\r
 534     color: #428bca;\r
 535     text-decoration: none ;\r
 536         cursor:pointer;\r
 537 }\r
 538 a:hover{\r
 539     text-decoration: underline;\r
 540 }\r
 541 /*html滑块组件*/\r
 542 \r
 543 input[type="range"] {\r
 544     margin-top: 2px;\r
 545     background-color: #f0f3f9;\r
 546     border: 1px solid #ccd6e8;\r
 547     border-radius: 15px;\r
 548     width: 400px;\r
 549     -webkit-appearance: none;\r
 550     height: 15px;\r
 551 }\r
 552 \r
 553 input[type="range"]::-webkit-slider-thumb {\r
 554     -webkit-appearance: none;\r
 555     cursor: pointer;\r
 556     top: -5px;\r
 557     height: 28px;\r
 558     width: 15px;\r
 559     transform: translateY(-4px);\r
 560     background: none repeat scroll 0 0 #f0f3f9;\r
 561     background-color: #9cc2cb;\r
 562     border-radius: 20px;\r
 563 }\r
 564 \r
 565 input[type="range"]:focus {\r
 566     outline: none;\r
 567 }\r
 568 \r
 569 /*ztree*/\r
 570 \r
 571 .ztree * {\r
 572     font-family: "microsoft yahei";\r
 573     font-size: 12px;\r
 574 }\r
 575 \r
 576 .ztree {\r
 577     padding: 15px 30px 0 5px;\r
 578 }\r
 579 \r
 580 .ztree li a.curSelectedNode {\r
 581     height: 28px;\r
 582 }\r
 583 \r
 584 .ztree li span {\r
 585     line-height: 16px;\r
 586     margin-right: 2px;\r
 587     margin-left: 6px\r
 588 }\r
 589 \r
 590 .ztree li span.button.chk {\r
 591     width: 13px;\r
 592     height: 13px;\r
 593     margin-left: 10px;\r
 594     cursor: auto\r
 595 }\r
 596 \r
 597 .ztree li span.button.add {\r
 598     margin-left: 2px;\r
 599     /* margin-right: -1px; */\r
 600 \r
 601     margin-right: 4px;\r
 602     background-position: -144px 0;\r
 603     vertical-align: top;\r
 604     *vertical-align: middle;\r
 605     float: right;\r
 606 }\r
 607 \r
 608 .ztree li span.button.edit {\r
 609     margin-right: 4px;\r
 610     background-position: -110px -48px;\r
 611     vertical-align: top;\r
 612     *vertical-align: middle;\r
 613     float: right;\r
 614 }\r
 615 \r
 616 .ztree li span.button.remove {\r
 617     margin-right: 4px;\r
 618     background-position: -110px -64px;\r
 619     vertical-align: top;\r
 620     *vertical-align: middle;\r
 621     float: right;\r
 622 }\r
 623 \r
 624 .ztree-select .ztree li a {\r
 625     border: 1px solid #fff !important;\r
 626 }\r
 627 \r
 628 /*table*/\r
 629 \r
 630 table,\r
 631 .dataTables_length,\r
 632 .dataTables_info,\r
 633 .dataTables_paginate {\r
 634     font-size: 12px;\r
 635 }\r
 636 \r
 637 table .heading {\r
 638     font-size: 14px;\r
 639     background: #fff !important;\r
 640 }\r
 641 \r
 642 table.dataTable tbody th,\r
 643 table.dataTable tbody td {\r
 644     padding: 8px 10px 4px 10px !important;\r
 645 }\r
 646 \r
 647 table tr:nth-of-type(odd) {\r
 648     background: #f9f9f9;\r
 649 }\r
 650 \r
 651 table tr:nth-of-type(even) {\r
 652     background: #fff;\r
 653 }\r
 654 \r
 655 table td:hover {\r
 656     background-color: #f5f5f5;\r
 657     border-bottom: 1px solid #d0d0d0;\r
 658     border-top: 1px solid #d0d0d0;\r
 659 }\r
 660 \r
 661 table tr td label {\r
 662     cursor: pointer;\r
 663 }\r
 664 \r
 665 .table-btn span {\r
 666     padding-left: 5px;\r
 667     padding-right: 5px;\r
 668 }\r
 669 .table-bordered>thead>tr>th, .table-bordered>thead>tr>td{\r
 670 border-bottom-width:1px;\r
 671 }\r
 672 /*select-box with icon*/\r
 673 \r
 674 .iconselect-box .col-xs-1 {\r
 675     width: 15px;\r
 676     padding: 110px 0 0 0;\r
 677 }\r
 678 \r
 679 .iconPosition > div {\r
 680     margin: 20px 0px 0px 0px;\r
 681 }\r
 682 \r
 683 /*-------------C3.css-------------*/\r
 684 .c3 path, .c3 line {\r
 685     stroke: #008acd;\r
 686 }\r
 687 \r
 688 .c3-line {\r
 689     stroke-width: 3px;\r
 690 }\r
 691 \r
 692 .c3-tooltip {\r
 693     width: auto;\r
 694 }\r
 695 \r
 696 .c3-tooltip td {\r
 697     color: #000;\r
 698 }\r
 699 \r
 700 .c3-axis.c3-axis-y {\r
 701     stroke-width: 1px;\r
 702 }\r
 703 \r
 704 .c3-axis.c3-axis-x {\r
 705     stroke-width: 1px;\r
 706 }\r
 707 \r
 708 /*checkbox & radio*/\r
 709 input[type="checkbox"] {\r
 710     -webkit-appearance: none;\r
 711     background: #fff url(../image/checkbox-radio/checkbox-init.png);\r
 712     height: 18px;\r
 713     vertical-align: middle;\r
 714     width: 18px;\r
 715         margin-bottom:5px;\r
 716         margin-right:5px;\r
 717 }\r
 718 \r
 719 input[type="checkbox"]:checked {\r
 720     -webkit-appearance: none;\r
 721     background: #fff url(../image/checkbox-radio/checkbox-checked.png);\r
 722     height: 18px;\r
 723     vertical-align: middle;\r
 724     width: 18px;\r
 725 }\r
 726 \r
 727 input[type="checkbox"]:focus,\r
 728 input[type="checkbox"]:hover {\r
 729     outline: none;\r
 730 }\r
 731 \r
 732 input[type="checkbox"][disabled] {\r
 733     -webkit-appearance: none;\r
 734     background: #fff url(../image/checkbox-radio/checkbox-disabled.png);\r
 735     height: 18px;\r
 736     vertical-align: middle;\r
 737     width: 18px;\r
 738         margin-bottom:5px;\r
 739         margin-right:5px;\r
 740 }\r
 741 \r
 742 input[type="checkbox"][disabled]:checked {\r
 743     -webkit-appearance: none;\r
 744     background: #fff url(../image/checkbox-radio/checkbox-checked-disabled.png);\r
 745     height: 18px;\r
 746     vertical-align: middle;\r
 747     width: 18px;\r
 748 }\r
 749 \r
 750 input[type="radio"] {\r
 751     -webkit-appearance: none;\r
 752     background: #fff url(../image/checkbox-radio/radio-init.png);\r
 753     height: 18px;\r
 754     vertical-align: middle;\r
 755     width: 18px;\r
 756         margin-bottom:5px;\r
 757         margin-right:5px;\r
 758 }\r
 759 \r
 760 input[type="radio"]:checked {\r
 761     -webkit-appearance: none;\r
 762     background: #fff url(../image/checkbox-radio/radio-checked.png);\r
 763     height: 18px;\r
 764     vertical-align: middle;\r
 765     width: 18px;\r
 766 }\r
 767 \r
 768 input[type="radio"]:focus,\r
 769 input[type="radio"]:hover {\r
 770     outline: none;\r
 771 }\r
 772 \r
 773 input[type="radio"][disabled] {\r
 774     -webkit-appearance: none;\r
 775     background: #fff url(../image/checkbox-radio/radio-disabled.png);\r
 776     height: 18px;\r
 777     vertical-align: middle;\r
 778     width: 18px;\r
 779         margin-bottom:5px;\r
 780         margin-right:5px;\r
 781 }\r
 782 \r
 783 input[type="radio"][disabled]:checked {\r
 784     -webkit-appearance: none;\r
 785     background: #fff url(../image/checkbox-radio/radio-checked-disabled.png);\r
 786     height: 18px;\r
 787     vertical-align: middle;\r
 788     width: 18px;\r
 789 }\r