openo-portal/portal-extsys/src/main/webapp/extsys/sdncontroller/css/VMMain.css

   1 /* Copyright 2016, Huawei Technologies Co., Ltd.\r
   2  *\r
   3  * Licensed under the Apache License, Version 2.0 (the "License");\r
   4  * you may not use this file except in compliance with the License.\r
   5  * You may obtain a copy of the License at\r
   6  *\r
   7  *    http://www.apache.org/licenses/LICENSE-2.0\r
   8  *\r
   9  * Unless required by applicable law or agreed to in writing, software\r
  10  * distributed under the License is distributed on an "AS IS" BASIS,\r
  11  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  12  * See the License for the specific language governing permissions and\r
  13  * limitations under the License.\r
  14  */\r
  15 \r
  16 \r
  17 body{\r
  18     font-family: '微软雅黑';\r
  19     font-size: 12px;\r
  20     color: #333;\r
  21     background: #fafafa;\r
  22 }\r
  23 button{\r
  24     outline: none;\r
  25 }\r
  26 ul,li{\r
  27     list-style: none;\r
  28     padding:0;\r
  29     margin:0;\r
  30 }\r
  31 .titleFont{\r
  32     font-size: 16px;\r
  33 }\r
  34 .separator-line{\r
  35     height: 1px;\r
  36     width: 100%;\r
  37     border:1px solid #ddd;\r
  38     margin: 6px 0 15px 0;\r
  39 }\r
  40 .uploadBtn{\r
  41     overflow: hidden;\r
  42 }\r
  43 .creat-btn {\r
  44         padding: 0 14px;\r
  45         height: 24px;\r
  46     float: left;\r
  47     cursor: pointer;\r
  48     text-decoration: none;\r
  49     outline: 0;\r
  50     border: 1px solid #d3d3d3;\r
  51     text-align: center;\r
  52     box-shadow: 0 1px 1px rgba(0,0,0,.05);\r
  53     background: #fafafa;\r
  54     background: -moz-linear-gradient(top,#fff,#fafafa);\r
  55     background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#fafafa));\r
  56     background: -webkit-linear-gradient(top,#fff,#fafafa);\r
  57     background: linear-gradient(to bottom,#fff,#fafafa);\r
  58     border-radius: 6px;\r
  59     background: #fff url(../images/add.png) no-repeat 5px center;\r
  60     padding-left: 20px;\r
  61 }\r
  62 .creat-btn:hover {\r
  63         color: #009ae7; \r
  64         border: 1px solid #4AC9FF\r
  65 }\r
  66 .creat-btn:active {\r
  67         color: #000;    \r
  68         border: 1px solid #4AC9FF\r
  69 }\r
  70 /*.creat-btn{\r
  71     background: #fff url(../image/add.png) no-repeat 5px center;\r
  72     border: 1px solid #ddd;\r
  73     float: left;\r
  74 }\r
  75 .creat-btn:hover{\r
  76     background: #428bca;\r
  77     color: #fff;\r
  78     border:1px solid #428bca;\r
  79 }*/\r
  80 .search{\r
  81     width: 310px;\r
  82     height: 30px;\r
  83     float:right;\r
  84 }\r
  85 .search-text{\r
  86     width: 250px;\r
  87     float: left;\r
  88     margin-right: 6px;\r
  89 }\r
  90 .search-btn{\r
  91     height: 30px;\r
  92     background: #fff;\r
  93     border: 1px solid #ddd;\r
  94     float: left;\r
  95 }\r
  96 #ict_virtualApplication_table_div{\r
  97     margin-top: 15px;\r
  98 }\r
  99 .table>thead>tr.active>th{\r
 100     border: 1px solid #ddd!important;\r
 101     border-bottom: 0;\r
 102     background: #f0f0f0;\r
 103 }\r
 104 /*.table tbody tr:hover{\r
 105     background: #e6fbe0!important;\r
 106 }*/\r
 107 .table tbody tr:last-child{\r
 108     border-bottom: 1px solid #ddd;\r
 109 }\r
 110 .table-btn{\r
 111     border: 1px solid #ccc;\r
 112     border-radius: 3px;\r
 113 }\r
 114 .delete-btn{\r
 115     background: url(../image/delete.png) no-repeat;\r
 116     width: 16px;\r
 117     height: 16px;\r
 118     border: none;\r
 119 }\r
 120 .detail-btn{\r
 121     background: url(../image/openo.png) no-repeat -343px -283px;\r
 122     width: 16px;\r
 123     height: 16px;\r
 124     border: none;\r
 125 }\r
 126 .detail-btn.current{\r
 127     background-position: -7px -314px; \r
 128 }\r
 129 .detail{\r
 130     height: 200px;\r
 131     border: 1px solid #ddd;\r
 132     margin-top: 60px;\r
 133 }\r
 134 \r
 135 .detail-top ul{\r
 136     height: 50px;\r
 137     line-height: 50px;\r
 138     border-bottom: 1px solid #ddd;\r
 139     padding-left: 0px;\r
 140      background: #fafafa;\r
 141 }\r
 142 .detail-top ul li{\r
 143     float:left;\r
 144     width: 120px;\r
 145     text-align: center;\r
 146     border-right: 1px solid #ddd;\r
 147     cursor: pointer;\r
 148 }\r
 149 .detail-top ul li.current{\r
 150     background: #fff;\r
 151 }\r
 152 .vmapp-margin{\r
 153     margin-bottom: 10px;\r
 154 }\r
 155 .control-label .required{\r
 156     color: #e02222;\r
 157     font-size: 12px;\r
 158     padding-left: 2px;\r
 159 }\r
 160 .form-group .control-label{\r
 161     font-size: 12px;\r
 162     font-weight: 400;\r
 163 }\r
 164 legend{\r
 165     font-size: 12px;\r
 166     font-weight: bold;\r
 167 }\r
 168 .pageGro{\r
 169     width: 250px;\r
 170     float: right;\r
 171 }\r
 172 .pageUp,.pageDown,.pageList,.pageList li{\r
 173     float: left;\r
 174     cursor: pointer;\r
 175 }\r
 176 .pageUp,.pageDown{\r
 177     width: 60px;\r
 178     height: 30px;\r
 179     border: 1px solid #ddd;\r
 180     text-align: center;\r
 181     line-height: 30px;\r
 182 }\r
 183 .pageList li{\r
 184     width: 30px;\r
 185     height: 30px;\r
 186     border: 1px solid #ddd;\r
 187     text-align: center;\r
 188     line-height: 30px;\r
 189     border-left: none;\r
 190 }\r
 191 .pageList li.active{\r
 192     background: #428bca;\r
 193     color: #fff;\r
 194     border-color: #428bca;\r
 195 }\r
 196 .pageDown{\r
 197     border-left: none;\r
 198 }\r
 199 .headerLinkP{\r
 200     padding-top: 17px;\r
 201 }\r
 202 .headerLinkP span{\r
 203     font-size: 12px;\r
 204     color: #666;\r
 205     font-weight: normal!important;\r
 206 }\r
 207 label{\r
 208     font-weight: normal!important;\r
 209 }\r
 210 table.userform tbody tr td {\r
 211   display: table-cell;\r
 212   padding-right: 10px;\r
 213   padding-top: 10px;\r
 214   font-size: 12px;\r
 215   color: #333;\r
 216 }\r
 217 .table th,.table td{\r
 218     padding-top: 3px!important;\r
 219     padding-bottom: 3px!important;\r
 220 }\r
 221 .openoBrowseButton_element {\r
 222   display: table;\r
 223 }\r
 224 .openo {\r
 225   font-family: "Microsoft Yahei",SimSun,Arial,Tahoma;\r
 226   font-size: 12px;\r
 227   color: #000;\r
 228 }\r
 229 .openoBrowseButton_input {\r
 230   width: 198px;\r
 231   position: relative;\r
 232   border: 1px solid #c3c3c3!important;\r
 233   height: 26px;\r
 234   background-color: #f3f3f3;\r
 235   border-radius: 4px 0 0 4px;\r
 236   border-right: none;\r
 237   padding: 0;\r
 238 }\r
 239 .buttonClassDefault, .buttonClassDefault:active {\r
 240   cursor: pointer;\r
 241   background-image: url(../images/openo.png);\r
 242   background-position: -154px -7px!important;\r
 243 }\r
 244 .openoBrowseButton_button {\r
 245   width: 27px;\r
 246   border: 0;\r
 247   float: right;\r
 248   position: relative;\r
 249   height: 26px;\r
 250   right: 0;\r
 251   top: 0;\r
 252   border-radius: 0 4px 4px 0;\r
 253   border-right: 1px solid #c3c3c3;\r
 254   border-left: none;\r
 255 }\r
 256 .openo .openo-input, .openo.openo-input {\r
 257   outline: 0;\r
 258   border: 1px solid #c3c3c3;\r
 259   box-shadow: 1px 1px #f6f6f6 inset;\r
 260   background-color: #fff;\r
 261   height: 26px;\r
 262 }\r
 263 .openoInput_openoDefaultText {\r
 264   padding: 0 0 0 6px;\r
 265   border-radius: 4px;\r
 266   color: #000;\r
 267   display: inline-block;\r
 268   outline: 0;\r
 269   box-shadow: 1px 1px #f6f6f6 inset;\r
 270   font-size: 12px;\r
 271   background: #fff;\r
 272 }\r
 273 div.openo-select {\r
 274   border: 1px solid #c3c3c3;\r
 275   border-radius: 4px;\r
 276   background: url(../images/arrow-down-enable.png) right no-repeat #fff;\r
 277   line-height: 24px;\r
 278   padding-left: 3px;\r
 279   display: block;\r
 280 }\r
 281 div.openo-select>input.openo-select-input {\r
 282   border: none;\r
 283   outline: 0;\r
 284   line-height: 21px;\r
 285   height: 21px;\r
 286   padding-left: 3px;\r
 287   border-right: solid 1px #c3c3c3;\r
 288 }\r
 289 .openo .openo-ellipsis, .openo.openo-ellipsis {\r
 290   overflow: hidden;\r
 291   white-space: nowrap;\r
 292   text-overflow: ellipsis;\r
 293 }\r
 294 a.openoButton_buttonClass, a.openoButton_buttonDisableClass, div.openoButton_buttonClass, div.openoButton_buttonDisableClass {\r
 295   height: 26px;\r
 296   float: left;\r
 297   cursor: pointer;\r
 298   text-decoration: none;\r
 299   outline: 0;\r
 300   border: 1px solid #d3d3d3;\r
 301   text-align: center;\r
 302   box-shadow: 0 1px 1px rgba(0,0,0,.05);\r
 303   background: #fafafa;\r
 304   background: -moz-linear-gradient(top,#fff,#fafafa);\r
 305   background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#fafafa));\r
 306   background: -webkit-linear-gradient(top,#fff,#fafafa);\r
 307   background: linear-gradient(to bottom,#fff,#fafafa);\r
 308   border-radius: 6px;\r
 309 }\r
 310 .openoButton_buttonInnerClass{\r
 311       padding: 0 19px;\r
 312       border-radius: 6px;\r
 313 }\r
 314 .openoButton_buttonCenterText {\r
 315   color: #000;\r
 316   line-height: 24px;\r
 317   white-space: nowrap;\r
 318   width: auto!important;\r
 319 }\r
 320 .userHeader {\r
 321   clear: left;\r
 322   overflow: hidden;\r
 323   margin-bottom: 10px;\r
 324   padding: 10px 10px 0px 0px;\r
 325 }\r
 326 .openoButton_buttonGroupClass {\r
 327   display: inline;\r
 328 }\r
 329 .openoButton_buttonGroupClass div.openoButton_buttonClass_parent:first-child {\r
 330   margin-left: 0;\r
 331 }\r
 332 .openoButton_buttonLeftImg {\r
 333   margin-right: 5px;\r
 334 }\r
 335 .openoButton_buttonLeftImg, .openoButton_buttonRightImg {\r
 336   display: inline-block;\r
 337   vertical-align: top;\r
 338   width: 16px;\r
 339   height: 16px;\r
 340   margin-top: 4px;\r
 341 }\r
 342 .openo-table-pagination-wrapper {\r
 343   height: 37px;\r
 344 }\r
 345 .openo-pagination {\r
 346   display: block;\r
 347   float: left;\r
 348   overflow: hidden;\r
 349   padding: 5px 0 0;\r
 350   margin-top: 8px;\r
 351 }\r
 352 .openoPagination_openoPaginationLengthOptions:not(msie8) {\r
 353   line-height: 24px;\r
 354 }\r
 355 .openoPagination_openoPaginationLengthOptions {\r
 356   white-space: normal;\r
 357   height: 24px;\r
 358   float: left;\r
 359   outline: 0;\r
 360   line-height: 20px;\r
 361   margin: 0 5px;\r
 362 }\r
 363 .openo-pagination-select {\r
 364   height: 26px;\r
 365   line-height: 22px;\r
 366   text-align: center;\r
 367   margin-right: -2px;\r
 368   border: 1px solid #e0e0e0;\r
 369   border-radius: 5px 0 0 5px;\r
 370   padding: 1px;\r
 371 }\r
 372 .openoPagination_openoPaginationLengthOptions span {\r
 373   background-color: #fff!important;\r
 374 }\r
 375 .openo-pagination-theme a, .openo-pagination-theme span {\r
 376   float: left;\r
 377   color: #666;\r
 378   font: 12px Lucida Grande,Verdana,Arial,Helvetica,sans-serif;\r
 379   line-height: 24px;\r
 380   font-weight: 400;\r
 381   text-align: center;\r
 382   border: 1px solid #e0e0e0;\r
 383   text-decoration: none!important;\r
 384   padding: 0 7px;\r
 385   border-radius: 3px;\r
 386   background: #fff;\r
 387 }\r
 388 .openo-pagination-selectspan {\r
 389   background: url(../images/ideo_default_select.png) left no-repeat!important;\r
 390   float: right!important;\r
 391   width: 26px;\r
 392   height: 26px;\r
 393   cursor: pointer;\r
 394 }\r
 395 .openo-pagination-theme label {\r
 396   padding-top: 6px;\r
 397   vertical-align: middle;\r
 398   margin-right: 20px;\r
 399   margin-top: -1px;\r
 400   float: left;\r
 401   display: inline-block;\r
 402   height: 20px;\r
 403   font: 12px Lucida Grande,Verdana,Arial,Helvetica,sans-serif;\r
 404 }\r
 405 .openo-pagination li, .openo-pagination ul {\r
 406   list-style: none;\r
 407   padding: 0;\r
 408   margin: 0;\r
 409   float: left;\r
 410 }\r
 411 dd, dl, dt, li {\r
 412   color: #000;\r
 413 }\r
 414 .openo-pagination-theme a, .openo-pagination-theme span.current {\r
 415   margin: 0 5px 0 0;\r
 416 }\r
 417 .openo .openo-disabled, .openo.openo-disabled {\r
 418   border-color: #c3c3c3!important;\r
 419   color: #666!important;\r
 420   opacity: .3;\r
 421   filter: alpha(opacity=30);\r
 422 }\r
 423 .openo-pagination-theme .prev {\r
 424   background: 0 0;\r
 425   float: left;\r
 426 }\r
 427 .openo-pagination-theme .current {\r
 428   text-decoration: none!important;\r
 429   float: left;\r
 430   padding-left: 6px;\r
 431   height: 24px;\r
 432   color: #fff;\r
 433   display: inline;\r
 434   border-color: #00adf5;\r
 435   background: #4ad2ff;\r
 436 }\r
 437 .openo-pagination-theme a, .openo-pagination-theme span {\r
 438   float: left;\r
 439   color: #666;\r
 440   font: 12px Lucida Grande,Verdana,Arial,Helvetica,sans-serif;\r
 441   line-height: 24px;\r
 442   font-weight: 400;\r
 443   text-align: center;\r
 444   border: 1px solid #e0e0e0;\r
 445   text-decoration: none!important;\r
 446   padding: 0 7px;\r
 447   border-radius: 3px;\r
 448   background: #fff;\r
 449 }\r
 450 .openo-pagination-theme .prev.openo-disabled:before {\r
 451   background: url(../images/page_left_disabled.png) 50% 45% no-repeat;\r
 452 }\r
 453 .openo-pagination-theme .prev.openo-disabled:before {\r
 454   background: url(../images/page_left_disabled.png) 50% 45% no-repeat;\r
 455 }\r
 456 .openo-pagination-theme .prev:before {\r
 457   background: url(../images/page_l.png) 50% 45% no-repeat;\r
 458 }\r
 459 .openo-pagination-theme .next:after, .openo-pagination-theme .prev:before {\r
 460   display: inline-block;\r
 461   content: "";\r
 462   vertical-align: middle;\r
 463   width: 10px;\r
 464   height: 24px;\r
 465 }\r
 466 .openo-pagination-theme .prev:before {\r
 467   background: url(../images/page_l.png) 50% 45% no-repeat;\r
 468 }\r
 469 .openo-pagination-theme .next:after, .openo-pagination-theme .prev:before {\r
 470   display: inline-block;\r
 471   content: "";\r
 472   vertical-align: middle;\r
 473   width: 10px;\r
 474   height: 24px;\r
 475 }\r
 476 pagination ul {\r
 477   list-style: none;\r
 478   padding: 0;\r
 479   margin: 0;\r
 480   float: left;\r
 481 }\r
 482 .openo-pagination li, .openo-pagination ul {\r
 483   list-style: none;\r
 484   padding: 0;\r
 485   margin: 0;\r
 486   float: left;\r
 487 }\r
 488 .openoPagination_gototext {\r
 489   background: #FFF;\r
 490   outline: 0;\r
 491   width: 29px;\r
 492   float: left;\r
 493   height: 26px;\r
 494   line-height: 24px;\r
 495   border-radius: 4px;\r
 496   border: 1px solid #c3c3c3;\r
 497   padding: 0 0 0 5px;\r
 498   margin: 0;\r
 499   color: #666;\r
 500   min-width: 50px;\r
 501 }\r
 502 .openoPagination_gotoimage {\r
 503   width: 29px;\r
 504   height: 26px;\r
 505   line-height: 26px;\r
 506   background-color: #FFF;\r
 507   background-image: url(/portal/themes/default/components/openo/images/openo.png);\r
 508   padding-left: 21px;\r
 509   float: left;\r
 510   margin-left: 5px;\r
 511   border: 1px solid #e0e0e0;\r
 512   border-radius: 4px;\r
 513   box-sizing: border-box;\r
 514   -moz-box-sizing: border-box;\r
 515   background-position: -184px -181px!important;\r
 516 }\r
 517 .openo-pagination-theme .ellipse {\r
 518   float: left;\r
 519   margin-left: -8px;\r
 520   margin-right: -4px;\r
 521   background: 0 0;\r
 522   border: none;\r
 523   border-radius: 0;\r
 524   box-shadow: none;\r
 525   font-weight: 700;\r
 526   cursor: default;\r
 527 }\r
 528 .openo.openo-disabled {\r
 529   border-color: #c3c3c3!important;\r
 530   color: #666!important;\r
 531   opacity: .3;\r
 532   filter: alpha(opacity=30);\r
 533 }\r
 534 .openo-pagination-theme .prev {\r
 535   background: 0 0;\r
 536   float: left;\r
 537 }\r
 538 .openo-pagination-theme .current {\r
 539   text-decoration: none!important;\r
 540   float: left;\r
 541   padding-left: 6px;\r
 542   height: 26px;\r
 543   color: #fff;\r
 544   display: inline;\r
 545   /*border-color: #00adf5;\r
 546   background: #4ad2ff;*/\r
 547     border: 1px solid #e0e0e0;\r
 548 }\r
 549 .openo-pagination-theme .next:after {\r
 550   background: url(../images/page_r.png) 50% 45% no-repeat;\r
 551 }\r
 552 .openoButton_buttonGroupClass div.openoButton_buttonClass_parent, .openoButton_buttonRightImg {\r
 553   margin-left: 5px;\r
 554 }\r
 555 \r
 556 html, body {\r
 557   height: 99%;\r
 558   width: 98%;\r
 559 }\r
 560 .cotentBody {\r
 561   padding: 0px 20px 0px 20px;\r
 562 }\r
 563 \r
 564 div.openoButton_buttonClass:hover {\r
 565   border: 1px solid #4ac9ff;\r
 566 }\r
 567 div.openoButton_button_default:hover .openoButton_buttonCenterText {\r
 568   color: #009ae7;\r
 569 }\r
 570 .header_lineimg {\r
 571   height: 1px;\r
 572   width: 100%;\r
 573   margin-top: 17px;\r
 574 }\r
 575 .openo.openo-hide {\r
 576   display: none;\r
 577 }\r
 578 div.openo-select-popup-container {\r
 579   position: absolute;\r
 580   border: 1px solid #4ac9ff;\r
 581   border-top: none;\r
 582   border-radius: 0 0 4px 4px;\r
 583   max-height: 202px;\r
 584   overflow-y: auto;\r
 585   background-color: #fff;\r
 586   z-index: 880;\r
 587 }\r
 588 div.openo-select-popup-container>div.openo-select-item {\r
 589   display: block;\r
 590 }\r
 591 .openo .openo-ellipsis, .openo.openo-ellipsis {\r
 592   overflow: hidden;\r
 593   white-space: nowrap;\r
 594   text-overflow: ellipsis;\r
 595 }\r
 596 div.openo-select-popup-container>div.openo-select-item>label {\r
 597   padding-top: 3px;\r
 598   padding-bottom: 3px;\r
 599   line-height: 20px;\r
 600 }\r
 601 .openo .openo-ellipsis, .openo.openo-ellipsis {\r
 602   overflow: hidden;\r
 603   white-space: nowrap;\r
 604   text-overflow: ellipsis;\r
 605 }\r
 606 .openo-select-item label {\r
 607   margin-left: 4px;\r
 608   margin-right: 4px;\r
 609   white-space: nowrap;\r
 610 }\r
 611 div.openo-select-popup-container>div.openo-select-item.openo-item-selected, div.openo-select-popup-container>div.openo-select-item:hover {\r
 612   background-color: #f1f1f1;\r
 613   color: #008fd6;\r
 614 }\r
 615 div.openo-select.openo-focus {\r
 616   border: 1px solid #4ac9ff;\r
 617   border-bottom-left-radius: 0;\r
 618   border-bottom-right-radius: 0;\r
 619   border-bottom-color: #ddd;\r
 620 }\r
 621 .openo-pagination-theme a:hover {\r
 622   border-color: #4ac9ff;\r
 623   cursor: pointer;\r
 624 }\r
 625 .SDBtn{\r
 626      background: #fff; \r
 627      color: #333; \r
 628      border: 1px solid #ddd;\r
 629 }\r
 630 .SDBtn:hover{\r
 631     color: #009ae7;     \r
 632         border: 1px solid #4AC9FF\r
 633 }\r
 634 table tbody tr.even:hover td, table tbody tr.odd:hover td {\r
 635   background-color: #e6fbe0;\r
 636 }\r
 637 table tr.openoTable_row_selected td {\r
 638   background: #e8f8fe!important;\r
 639   border-bottom: 1px solid #e8e8e8!important;\r
 640 }\r
 641 .modal-body{\r
 642     padding: 0!important;\r
 643 }\r
 644 .form-control{\r
 645     height: 26px!important;\r
 646 }\r
 647 .form-group .control-label {\r
 648   margin-left: 20px;\r
 649 }\r
 650 \r
 651 .form-horizontal .control-label {\r
 652   text-align: left;\r
 653 }