openo-portal/portal-performance/src/main/webapp/performance/css/alarmsQuery.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 body {\r
  17         overflow: auto !important;\r
  18         background-color: #fff;\r
  19 }\r
  20 \r
  21 .ms-controller{\r
  22         visibility: hidden\r
  23 }\r
  24 \r
  25 .container-fluid{\r
  26         background-color: #fff;\r
  27 }\r
  28 \r
  29 .page-content-body {\r
  30         margin-top: 10px;\r
  31 }\r
  32 .page-content-body .row{\r
  33     margin-left:0;\r
  34 }\r
  35 #ict_fm_alarmCount_div_left{\r
  36     margin-bottom:10px;\r
  37 }\r
  38 .page-content-body .separator-line{\r
  39     height:1px;\r
  40         border-bottom:1px dashed #ccc;\r
  41         background:transparent;\r
  42 }\r
  43 .circleBtn:first-child {\r
  44     border-top-left-radius: 3px !important;\r
  45     border-bottom-left-radius: 3px !important;\r
  46 }\r
  47 \r
  48 .circleBtn:last-child {\r
  49 \r
  50     border-top-right-radius: 3px !important;\r
  51     border-bottom-right-radius: 3px !important;\r
  52 }\r
  53 \r
  54 .sideBtn:first-child {\r
  55     border-top-left-radius: 20px !important;\r
  56     border-bottom-left-radius: 20px !important;\r
  57     min-width: 50px;\r
  58 }\r
  59 \r
  60 .sideBtn:last-child {\r
  61     border-top-right-radius: 20px !important;\r
  62     border-bottom-right-radius: 20px !important;\r
  63     min-width: 50px;\r
  64 }\r
  65 \r
  66 .btnRiusCircle {\r
  67     border-radius: 20px !important;\r
  68 }\r
  69 \r
  70 button:last-child {\r
  71     margin-left: 15px;\r
  72 }\r
  73 .btn-groupBlue {\r
  74     padding-left: 20px;\r
  75 }\r
  76 \r
  77 .btn-groupBlue .btn:hover {\r
  78     color: #333;\r
  79     background-color: #ebebeb ;\r
  80 \r
  81 }\r
  82 .btnWhite {\r
  83     font-size: 14px;\r
  84     font-family: "微软雅黑";\r
  85     line-height: 20px;\r
  86     /*background-image: linear-gradient(to bottom, #ffffff, #ffffff);*/\r
  87     background-color: #ffffff;\r
  88 \r
  89     border: 1px solid #cccccc;\r
  90 }\r
  91 .btnWhite:hover{\r
  92 background-color:#ebebeb;\r
  93 color:#333;\r
  94 }\r
  95 .btn_group1 .btn:hover {\r
  96     color: #ffffff;\r
  97         background-color:#ebebeb;\r
  98     background-position: 0 0px;\r
  99     -webkit-transition: background-position 0.1s linear;\r
 100     -moz-transition: background-position 0.1s linear;\r
 101     -o-transition: background-position 0.1s linear;\r
 102     transition: background-position 0.1s linear;\r
 103 }\r
 104 \r
 105 .blueactive {\r
 106     color: #ffffff !important;\r
 107     background-color: #5b9bd1;\r
 108 }\r
 109 \r
 110 .blueactive:hover {\r
 111     color: #ffffff !important;\r
 112     background-color: #4d85b4 !important;       \r
 113 }\r
 114 \r
 115 .cond_zone {\r
 116     background-color: #fff;\r
 117     padding-left: 20px;\r
 118     padding-right: 50px;\r
 119 }\r
 120 \r
 121 .cond_zone_time {\r
 122         background-color: #fff;\r
 123     margin-top: 20px;\r
 124     margin-bottom: 10px;\r
 125 }\r
 126 \r
 127 .condSelect {\r
 128     /* width: 100%; */\r
 129     border: 1px solid #CCC;\r
 130         height: 34px !important;\r
 131 }\r
 132 \r
 133 .cond_selected{\r
 134         padding-left: 10px;\r
 135 }\r
 136 \r
 137 button.btn.btn-default {\r
 138     color: #aaa;\r
 139 }\r
 140 \r
 141 .filtergroup button.btn {\r
 142     min-width: 68px;\r
 143 }\r
 144 .adCondition button.btn {\r
 145     min-width: 80px;\r
 146 }\r
 147 .btn-default {\r
 148     color: #5b9bd1;\r
 149     background-color: #fff;\r
 150     border-color: #ccc;\r
 151 }\r
 152 \r
 153 .daySelect {\r
 154     width: 42px;\r
 155     height: 26px !important;\r
 156     font-size: 14px;\r
 157     margin-bottom: 0px;\r
 158     border-width: 1px;\r
 159     padding: 0px 0px; \r
 160     border-radius: 4px; \r
 161 }\r
 162 \r
 163 .calendar-date {\r
 164     color: #5b9bd1;\r
 165 }\r
 166 \r
 167 .daterangepicker .ranges {\r
 168     width: 205px;\r
 169 }\r
 170 \r
 171 .daterangepicker .ranges input {\r
 172     width: 95px !important;\r
 173 }\r
 174 \r
 175 /* .daterangepicker {\r
 176     left: 20% !important;\r
 177 } */\r
 178 .daterangepicker .ranges input[type="text"] {\r
 179     width: 85px !important;\r
 180 }\r
 181 \r
 182 .dataRange {\r
 183     width: 195px;\r
 184     line-height: 0;\r
 185     height: 26px;\r
 186     vertical-align: top;\r
 187     margin-left: 5px;\r
 188     padding: 0px 0px;\r
 189 }\r
 190 \r
 191 div.dataTables_paginate {\r
 192     display: inline;\r
 193     float: right !important;\r
 194 }\r
 195 \r
 196 div.dataTables_length, div.dataTables_info {\r
 197     display: inline;\r
 198 }\r
 199 \r
 200 div.pagination-panel {\r
 201     margin-right: 10px;\r
 202 }\r
 203 \r
 204 input.pagination-panel-input {\r
 205     width: 50px;\r
 206 }\r
 207 \r
 208 .input-sm {\r
 209     padding: 4px 10px;\r
 210 }\r
 211 \r
 212 td.details-control {\r
 213         text-align: center;\r
 214     cursor: pointer;\r
 215 }\r
 216 \r
 217 \r
 218 .details table td {\r
 219     word-wrap: break-word;\r
 220     word-break: normal;\r
 221     border-top: 1px solid #dddddd;\r
 222 }\r
 223 \r
 224 td.title {\r
 225     width: 10%;\r
 226 }\r
 227 \r
 228 .detailTitleStyle{\r
 229         background-color: #EEE !important;\r
 230 }\r
 231 \r
 232 .close-statistic{\r
 233     float:right;\r
 234         margin-top:5px;\r
 235         margin-right:25px;\r
 236         vertical-align:bottom;\r
 237         padding:3px;\r
 238         border:2px solid #fff ;\r
 239         border-radius:20px;\r
 240     color:#9b9b9b;      \r
 241 }\r
 242 .close-statistic:hover{\r
 243 border:2px solid #e74c3c ;\r
 244 color:#e74c3c;\r
 245 text-decoration:none;\r
 246 }\r
 247 .detailCellStyle{\r
 248         background-color: #FFF !important;\r
 249 }\r
 250 \r
 251 table.dataTable tbody th, table.dataTable tbody td {\r
 252     padding: 8px 10px;\r
 253     vertical-align:middle;\r
 254 }\r
 255 \r
 256 .echart_height{\r
 257         height: 400px;\r
 258 }\r
 259 \r
 260 \r
 261 \r
 262 button.serveractive {\r
 263     color: #ffffff !important;\r
 264     background-position: 0 0px;\r
 265     -webkit-transition: background-position 0.1s linear;\r
 266     -moz-transition: background-position 0.1s linear;\r
 267     -o-transition: background-position 0.1s linear;\r
 268     transition: background-position 0.1s linear;\r
 269     background-image: linear-gradient(to bottom, #E6971A, #E6971A) !important;\r
 270 }\r
 271 \r
 272 .rule_title {\r
 273     padding: 8px;\r
 274     margin-bottom: 25px;\r
 275     border-left: 2px solid #5b9bd1;\r
 276     color: #1A78CA;\r
 277     font-size: 16px;\r
 278 }\r
 279 \r
 280 .iconPosition > div {\r
 281     margin: 20px 0px 0px 0px;\r
 282 }\r
 283 .iconPosition{\r
 284   margin-top: 90px;\r
 285 }\r
 286 .iconPosition div {\r
 287     color: #757575;\r
 288     cursor: pointer;\r
 289 }\r
 290 \r
 291 .iconPosition div:hover {\r
 292     color: #333;\r
 293 }\r
 294 \r
 295 #defaulInfo, #selectAralmCodes {\r
 296     border: 1px solid #e0e0e0;\r
 297 }\r
 298 \r
 299 .right_assign_box {\r
 300     height: 370px;\r
 301     overflow-y: auto;\r
 302     overflow-x: auto;\r
 303     border: 1px solid #e0e0e0;\r
 304 }\r
 305 \r
 306 .right-assign-checked-box{\r
 307     /*height: 312px;*/\r
 308         height: 370px;\r
 309     overflow-y: auto;\r
 310     overflow-x: auto;\r
 311     border: 1px solid #e0e0e0;\r
 312 } \r
 313 \r
 314 .fmZtree {\r
 315     z-index: 3000;\r
 316     position: absolute;\r
 317     background: #fff;\r
 318     outline: none;\r
 319 }\r
 320 \r
 321 .filtergroup {\r
 322     text-align: center;\r
 323     margin-top: 15px;\r
 324 }\r
 325 \r
 326 .fliterline {\r
 327     margin-top: 20px;\r
 328         height:1px;\r
 329         border-bottom:1px dashed #c4cde8;\r
 330         margin-bottom:15px;\r
 331         overflow:hidden;\r
 332         width:100%;\r
 333 }\r
 334 \r
 335 .adCondition {\r
 336     float: right;\r
 337 }\r
 338 \r
 339 .btn .caret {\r
 340     margin-right: 5px;\r
 341 }\r
 342 \r
 343 .tablebtn {\r
 344     float: right;\r
 345 }\r
 346 \r
 347 #ict_alarms_table_div {\r
 348     padding-right: 0;\r
 349     margin-top: 10px;\r
 350 }\r
 351 \r
 352 div.alarmsTree {\r
 353     width: 580px;\r
 354 }\r
 355 \r
 356 div.alarmsTree-small{\r
 357     width: 280px; \r
 358 }\r
 359 .alarm-serious {\r
 360     background-color: #de4040;\r
 361     color: #ffffff !important;\r
 362 }\r
 363 .alarm-serious:hover {\r
 364     background-color: #c23737 !important;\r
 365 }\r
 366 .alarm-important {\r
 367     background-color: #e37c29;\r
 368     color: #ffffff !important;\r
 369 }\r
 370 .alarm-important:hover {\r
 371     background-color: #c86e25 !important;\r
 372 }\r
 373 .alarm-secondary {\r
 374     background-color: #e9d426;\r
 375     color: #ffffff !important;\r
 376 }\r
 377 .alarm-secondary:hover {\r
 378     background-color: #d3c023 !important;   \r
 379 }\r
 380 .alarm-slightly {\r
 381     background-color: #86bcdb;\r
 382     color: #ffffff !important;\r
 383 }\r
 384 .alarm-slightly:hover {\r
 385     background-color: #77a7c2 !important;\r
 386 }\r
 387 .flRight {\r
 388     float: right;\r
 389         margin-right: 1px;\r
 390 }\r
 391 \r
 392 /* #alLocation {\r
 393     margin-top: 40px;\r
 394 } */\r
 395 \r
 396 .borderBottom {\r
 397     border-bottom: 4px solid !important;\r
 398     border-top: 0px solid !important;\r
 399 }\r
 400 \r
 401 .borderTop {\r
 402     border-top: 4px solid !important;\r
 403     border-bottom: 0px solid !important;\r
 404 }\r
 405 \r
 406 .spinnerSmall {\r
 407     width: 34px !important;\r
 408     margin-right: 24px;\r
 409 }\r
 410 \r
 411 .icheckbox_square-aero{\r
 412     margin-right: 5px;\r
 413 }\r
 414 .alarmsSave {\r
 415   font-size: 16px;\r
 416   color: #555;\r
 417   vertical-align: middle;\r
 418   cursor: pointer;\r
 419 }\r
 420 \r
 421 .alarmsSave:hover {\r
 422     color: #5b9bd1;\r
 423 }\r
 424 .margin-space{\r
 425     margin-bottom: 15px;\r
 426         margin-top: 5px;\r
 427 }\r
 428 \r
 429 .defaultHideTopLink{\r
 430   display: none;\r
 431   position: absolute;\r
 432   display: none;\r
 433   background: #000;\r
 434   opacity: 0.8;\r
 435   border: 1px solid #ddd !important;\r
 436   font-size: 0.8em;\r
 437   box-shadow: 2px 3px 5px #C8C8C8;\r
 438   border-radius: 8px;\r
 439   padding: 0px 10px;\r
 440   z-index: 999;\r
 441   height: 30px;\r
 442   color: #fff;\r
 443   line-height: 25px;\r
 444 }\r
 445 \r
 446 .defaultHideTopLink:after {\r
 447   position: absolute;\r
 448   top: -6px;\r
 449   left: 10px;\r
 450   display: inline-block;\r
 451   border-right: 6px solid transparent;\r
 452   border-bottom: 6px solid #000;\r
 453   border-left: 6px solid transparent;\r
 454   content: '';\r
 455 }\r
 456 \r
 457 .tooltip-inner {\r
 458     max-width: 300px !important;\r
 459 }\r
 460 \r
 461 .calendar-time select {\r
 462   color: #555 !important;\r
 463 }\r
 464 \r
 465 #affirmTrip{\r
 466   margin-top: 3%;\r
 467   margin-left: 1%;\r
 468 }\r
 469 \r
 470 \r
 471 #unAffirmTrip{\r
 472   margin-top: 3%;\r
 473   margin-left: 4%;\r
 474 }\r
 475 \r
 476 #alLocationTree,#alCodeTree,#alTypeTree{\r
 477   border: 1px solid rgba(0,0,0,.2);\r
 478   margin-top: 5px;\r
 479   background-clip: padding-box;\r
 480   border-radius: 6px;\r
 481   outline: 0;\r
 482   margin-left: -5px;\r
 483   box-shadow: 0 5px 15px rgba(0,0,0,.5);\r
 484 }\r
 485 \r
 486 #right-menu {\r
 487   position: fixed;\r
 488   top: 0;\r
 489   right: 0;\r
 490   width: 400px;\r
 491   height: 100%;\r
 492   border-left: 4px solid rgb(58,174,218);\r
 493   background-color: rgba(255,255,255,.95);\r
 494   padding-left: 19px;\r
 495   padding-right: 13px;\r
 496   padding-top: 20px;\r
 497   z-index: 9999;\r
 498   overflow-y: auto;\r
 499 }\r
 500 \r
 501 .btn-right-detail {\r
 502   color: #5b9bd1;\r
 503   background-color: #fff;\r
 504   border-color: #ccc;\r
 505 }\r
 506 \r
 507 \r
 508 .right {\r
 509   float: right;\r
 510 }\r
 511 \r
 512 \r
 513 .default-display-none{\r
 514   display: none;\r
 515 }\r
 516 \r
 517 .nodesDetail {\r
 518   margin-top: 15px;\r
 519 }\r
 520 \r
 521 #ict_table_general_div td{\r
 522     min-width: 115px;\r
 523 }\r
 524 \r
 525 \r
 526 #moreCond label{\r
 527     margin-bottom: 0px;\r
 528 }\r
 529 \r
 530 .alarm-date-form-control{\r
 531     padding: 0px 4px;\r
 532 }\r
 533 \r
 534 .titlefont {\r
 535   font-size: 16px;\r
 536 }\r
 537 \r
 538 .subtitlefont {\r
 539   font-size: 14px;\r
 540 }\r
 541 \r
 542 \r
 543 .ackState a:hover{\r
 544     color: #fff;\r
 545   text-decoration:none;\r
 546 }\r
 547 \r
 548 \r
 549 .label-danger:hover{\r
 550   background-color: #C9302C;\r
 551 }\r
 552 \r
 553 .right-button-pointer {\r
 554   display: inline-block;\r
 555   cursor: pointer;\r
 556 }\r
 557 \r
 558 .tree-right-table td{\r
 559   white-space: nowrap;\r
 560   cursor: pointer;\r
 561 }\r
 562 \r
 563 .tree-right-table td:hover{\r
 564   background: #FFEDE4;\r
 565   border-bottom: 1px solid #f8dddd;\r
 566   border-top: 1px solid #f8dddd;\r
 567 }\r
 568 \r
 569 .tallCellSelected{\r
 570   background: #f8dddd;\r
 571   border-bottom: 1px solid #f8dddd;\r
 572   border-top: 1px solid #f8dddd;\r
 573 }\r
 574 \r
 575 .tallCellSelected:hover{\r
 576   background: #f8dddd !important;\r
 577 }\r
 578 \r
 579 \r
 580 .margin-top-space{\r
 581   margin-top: 15px;\r
 582 }\r
 583 \r
 584 \r
 585 .tree-left-table td{\r
 586   white-space: nowrap;\r
 587   cursor: pointer;\r
 588 }\r
 589 \r
 590 .tree-left-table td:hover{\r
 591   background: #FFEDE4;\r
 592   border-bottom: 1px solid #f8dddd;\r
 593   border-top: 1px solid #f8dddd;\r
 594 }\r
 595 \r
 596 #saveModalCancle{\r
 597   color:#333;\r
 598 }\r
 599 \r
 600 .radioLabel{  \r
 601   margin-left: -10px;\r
 602   margin-right: 10px;\r
 603 }\r
 604 \r
 605 .alarmbtn, #ict_alarms_table_div{\r
 606 padding-left:0;\r
 607 }\r
 608 \r
 609 .advanced-selection{\r
 610         margin-top:40px;\r
 611 }\r
 612 \r
 613 #moreCond{\r
 614         border: 1px dashed rgb(196, 205, 232);\r
 615         margin-top: 10px;\r
 616     margin-bottom: 10px;\r
 617     margin-left: 0px;\r
 618     margin-right: 0px;\r
 619     padding-left: 15px;\r
 620     padding-right: 15px;\r
 621 }\r
 622 \r
 623 .bodyTop{\r
 624         margin-top: 10px;\r
 625 }\r
 626 \r
 627 .confirmTime{\r
 628         margin-left: 5px;\r
 629 }\r
 630 \r
 631 .condSaveTip{\r
 632         margin-top: 15px;\r
 633 }\r
 634 \r
 635 /*修改树组件默认样式*/\r
 636 .ztree li a {   \r
 637         border: 0px;\r
 638 }\r
 639 \r
 640 .ict-Magnifier:hover{\r
 641         color:#555555\r
 642 }\r
 643 \r
 644 .ict-save:hover{\r
 645         color:#555555\r
 646 }\r
 647 \r
 648 .dataTables_scrollHeadInner table.dataTable tbody td {\r
 649     padding-top: 0px !important;\r
 650     padding-bottom: 0px !important;\r
 651 }\r
 652 \r
 653 .dataTables_scrollHeadInner table.dataTable {\r
 654         margin-bottom: 0px !important;\r
 655         border-bottom: 0px !important;\r
 656 }\r
 657 \r
 658 .dataTables_scrollBody  table {\r
 659         border-top: 0px !important;\r
 660         border-bottom: 1px solid #ddd !important;\r
 661         /* margin-top: -5px; */\r
 662 }\r
 663 \r
 664 .dataTables_scrollBody {\r
 665         margin-top: -2px;\r
 666 }\r
 667 \r
 668 #ict_alarms_table_wrapper .bottom{\r
 669         margin-top: 10px;\r
 670 }\r
 671 \r
 672 table .DataTables_sort_wrapper {\r
 673         padding-left: 2px !important;\r
 674 }\r
 675 \r
 676 .detailTable {\r
 677   border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;\r
 678 }\r
 679 \r
 680 .detailTable td{border:1px solid #ddd !important;}\r
 681 \r
 682 .detailTitleStyle .label{\r
 683         color:#333333;\r
 684         background-color: rgba(66, 139, 202, 0);\r
 685         float:right;\r
 686 }\r
 687 \r
 688 .label{\r
 689         font-size: 100%;\r
 690     font-weight: 100;\r
 691 }\r
 692 \r
 693 input[name="daterange"] {\r
 694     width: 220px;\r
 695     line-height: 0;\r
 696     height: 31px;\r
 697     /* vertical-align: top; */\r
 698     margin-top: 2px;\r
 699 }\r
 700 .acknow-purple{\r
 701 background-color:#bf74d5;\r
 702 color:#fff;\r
 703 }\r
 704 .acknow-purple:hover{\r
 705 background-color:#b36bc8;\r
 706 }\r
 707 .ict-table{\r
 708  color:#549bb6;\r
 709 }\r
 710 .dataTables_length  select[size]{\r
 711     height:28px;\r
 712 }\r
 713 /*1024下展开左边菜单*/\r
 714 @media screen and (max-width: 770px) and (min-width: 750px) {\r
 715     .btn-groupBlue {\r
 716         padding-left: 5px;\r
 717     }  \r
 718 }\r
 719 \r
 720 /*1024下，左边菜单收起来*/\r
 721 \r
 722 @media screen and (max-width: 1000px) and (min-width: 810px) {\r
 723     .tree-padd {\r
 724         padding-left: 7%;\r
 725     }\r
 726 \r
 727     .daterange-cond-padd {\r
 728         padding-left: 10%;\r
 729     }\r
 730 }\r
 731 \r
 732 @media screen and (max-width: 1100px) and (min-width: 1000px) {\r
 733 \r
 734     .tree-padd {\r
 735         padding-left: 10%;\r
 736     }\r
 737 \r
 738     .tree-daterange-cond-padd {\r
 739         padding-left: 10%;\r
 740     }\r
 741 }\r
 742 \r
 743 @media screen and (min-width: 1100px) {\r
 744     .tree-padd {\r
 745         padding-left: 12%;\r
 746     }\r
 747 \r
 748     .daterange-cond-padd {\r
 749         padding-left: 10%;\r
 750     }\r
 751 }\r
 752 \r