portal-common/src/main/webapp/common/css/themes/ztebluelight4.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 light theme\r
  18 ***/\r
  19 \r
  20 /***\r
  21 Reset and overrides  \r
  22 ***/\r
  23 body {\r
  24     background-color: #f1f3fa !important;\r
  25 }\r
  26 \r
  27 .page-content .page-breadcrumb.breadcrumb .dashboard-date-range {\r
  28     background-color: #ededed !important;\r
  29 }\r
  30 \r
  31 .page-content {\r
  32     background-color: #f1f3fa !important;\r
  33 }\r
  34 \r
  35 .vSplitbar {\r
  36     background-color: transparent !important;\r
  37 }\r
  38 \r
  39 .btn-group .btn.blue.dropdown-toggle {\r
  40     background-color: #333 !important;\r
  41 }\r
  42 \r
  43 .btn-group .btn.blue.dropdown-toggle:hover {\r
  44     background-color: #000 !important;\r
  45 }\r
  46 \r
  47 /***\r
  48 Page header\r
  49 ***/\r
  50 .header {\r
  51     filter: none !important;\r
  52     background-color: #333333 !important;\r
  53 }\r
  54 \r
  55 .header .btn-navbar {\r
  56     background-color: #434343 !important;\r
  57 }\r
  58 \r
  59 .header .navbar-nav .dropdown-toggle:hover,\r
  60 .header .navbar-nav .dropdown.open .dropdown-toggle {\r
  61     background-color: #40484c !important;\r
  62 }\r
  63 \r
  64 .header .navbar-nav li.dropdown .dropdown-toggle i {\r
  65     color: #ffffff !important;\r
  66 }\r
  67 \r
  68 .zte-theme-panel > .toggler:hover {\r
  69     background-color: #40484c !important;\r
  70 }\r
  71 \r
  72 /***\r
  73 Header Search\r
  74 ***/\r
  75 .header .search-form {\r
  76     background-color: #3a3a3a;\r
  77 }\r
  78 \r
  79 .header .search-form .form-control {\r
  80     color: #ccc;\r
  81     border: 0;\r
  82     background-color: #3a3a3a;\r
  83 }\r
  84 \r
  85 .header .search-form .submit {\r
  86     background: url(../../image/search-icon.png);\r
  87 }\r
  88 \r
  89 /***\r
  90 Hor menu\r
  91 ***/\r
  92 .header .hor-menu ul.nav li a {\r
  93     color: #fff;\r
  94 }\r
  95 \r
  96 .header .hor-menu ul.nav li.open > a,\r
  97 .header .hor-menu ul.nav li > a:hover,\r
  98 .header .hor-menu ul.nav li > a:focus {\r
  99     color: #ccc;\r
 100     background: #333333;\r
 101 }\r
 102 \r
 103 .header .hor-menu .dropdown-menu li:hover > a,\r
 104 .header .hor-menu ul.nav li.active > a,\r
 105 .header .hor-menu ul.nav li.active > a:hover {\r
 106     color: #fff;\r
 107     background: #333 !important;\r
 108 }\r
 109 \r
 110 .header.navbar .hor-menu ul.nav li.current .selected,\r
 111 .header.navbar .hor-menu ul.nav li.active .selected {\r
 112     border-top: 6px solid #101010;\r
 113 }\r
 114 \r
 115 .header .hor-menu ul.nav li.current > a,\r
 116 .header .hor-menu ul.nav li.current > a:hover {\r
 117     color: #fff;\r
 118     background: #e02222 !important;\r
 119 }\r
 120 \r
 121 .header .hor-menu .dropdown-menu {\r
 122     background: #4f4f4f;\r
 123 }\r
 124 \r
 125 .header .hor-menu .dropdown-menu li > a {\r
 126     color: #ccc;\r
 127 }\r
 128 \r
 129 .header .hor-menu .hor-menu-search-form-toggler.off {\r
 130     background: #4f4f4f url(../../image/hor-menu-search-close-white.png) no-repeat center;\r
 131 }\r
 132 \r
 133 .header .hor-menu .search-form {\r
 134     background: #4f4f4f;\r
 135 }\r
 136 \r
 137 .header .hor-menu .search-form form input {\r
 138     color: #ccc;\r
 139 }\r
 140 \r
 141 .header .hor-menu .search-form .btn {\r
 142     color: #ccc;\r
 143     background: url(../../image/search-icon-white.png) no-repeat center;\r
 144 }\r
 145 \r
 146 .header .hor-menu .search-form form input::-webkit-input-placeholder {\r
 147     /* WebKit browsers */\r
 148     color: #ccc;\r
 149 }\r
 150 \r
 151 .header .hor-menu .search-form form input:-moz-placeholder {\r
 152     /* Mozilla Firefox 4 to 18 */\r
 153     color: #ccc;\r
 154 }\r
 155 \r
 156 .header .hor-menu .search-form form input::-moz-placeholder {\r
 157     /* Mozilla Firefox 19+ */\r
 158     color: #ccc;\r
 159 }\r
 160 \r
 161 .header .hor-menu .search-form form input:-ms-input-placeholder {\r
 162     /* Internet Explorer 10+ */\r
 163     color: #ccc;\r
 164 }\r
 165 \r
 166 /***\r
 167 Mega Menu\r
 168 ***/\r
 169 .mega-menu .mega-menu-submenu {\r
 170     border-right: 1px solid #656565;\r
 171 }\r
 172 \r
 173 .mega-menu .mega-menu-submenu li h3 {\r
 174     color: #fff;\r
 175 }\r
 176 \r
 177 /***\r
 178 Page sidebar\r
 179 ***/\r
 180 /*.page-content {\r
 181   border-left: 1px solid #e2e2e2 !important;\r
 182   border-bottom: 1px solid #e2e2e2 !important;\r
 183 }*/\r
 184 .page-sidebar-menu > li.active > a .selected {\r
 185     background-image: none !important;\r
 186         border-right:#5C9ACF 3px solid;\r
 187         height:40px !important;\r
 188         top:0 !important;\r
 189 }\r
 190 \r
 191 .page-sidebar-reversed .page-content {\r
 192     border-left: 0;\r
 193     border-right: 1px solid #e2e2e2 !important;\r
 194 }\r
 195 \r
 196 .page-sidebar {\r
 197     background-color: #f1f3fa;\r
 198 }\r
 199 \r
 200 .page-sidebar-fixed .page-content {\r
 201     border: 0 !important;\r
 202 }\r
 203 \r
 204 .page-sidebar-fixed .page-sidebar {\r
 205     border-right: 1px solid #e2e2e2 !important;\r
 206 }\r
 207 \r
 208 ul.page-sidebar-menu > li > a {\r
 209     border: 1px solid #dddddd !important;\r
 210     color: #000 !important;\r
 211     font-weight: 400;\r
 212     background-color: #fff !important;\r
 213     margin-left: 3px;\r
 214     margin-right: 3px;\r
 215     margin-bottom: 5px;\r
 216     -webkit-border-radius: 3px !important;\r
 217     -moz-border-radius: 3px !important;\r
 218     -ms-border-radius: 3px !important;\r
 219     -o-border-radius: 3px !important;\r
 220     border-radius: 3px !important;\r
 221 }\r
 222 \r
 223 .page-sidebar-menu > li.start > a {\r
 224     border-top: 1px solid #dddddd !important;\r
 225 }\r
 226 \r
 227 ul.page-sidebar-menu > li:first-child > a {\r
 228     border-top: 1px solid #dddddd !important;\r
 229 }\r
 230 \r
 231 ul.page-sidebar-menu > li:last-child > a {\r
 232     border-bottom: 1px solid #dddddd !important;\r
 233 }\r
 234 \r
 235 /*ul.page-sidebar-menu > li a i {\r
 236   color: #000 !important;\r
 237 }*/\r
 238 \r
 239 /*ul.page-sidebar-menu > li.open > a:hover {\r
 240     background: #ededed !important;\r
 241     color: #000 !important;\r
 242 }*/\r
 243 ul.page-sidebar-menu > li.open > a {\r
 244     background: #fff !important;\r
 245     color: #000 !important;\r
 246 }\r
 247 ul.page-sidebar-menu > li.active > a:hover {\r
 248     background: #fff !important;\r
 249    color: #5C9ACF !important ;\r
 250         //border-left: #5C9ACF 3px solid;\r
 251 }\r
 252 \r
 253 \r
 254 /*ul.page-sidebar-menu > li.active > a .selected {\r
 255   right:-7px;\r
 256   top:0px;\r
 257   width: 7px;\r
 258   height: 39px;\r
 259   background-image: url("../../image/sidebar-menu-arrow-green.png");*/\r
 260     }\r
 261 \r
 262 .page-sidebar-reversed ul.page-sidebar-menu > li.active > a .selected {\r
 263     right: auto;\r
 264     left: -7px;\r
 265     background-image: url("../../image/sidebar-menu-arrow-green-reverse.png");\r
 266 }\r
 267 \r
 268 /*ul.page-sidebar-menu > li.active i {\r
 269   color: #fff !important;\r
 270 }*/\r
 271 .page-sidebar-fixed ul.page-sidebar-menu > li.active > a .selected {\r
 272     display: none;\r
 273 }\r
 274 \r
 275 ul.page-sidebar-menu > li.active > a {\r
 276     background: #fff !important;\r
 277   border-right-color: transparent !important;\r
 278     color: #1177CF !important;\r
 279 }\r
 280 \r
 281 ul.page-sidebar-menu > li.active > a i {\r
 282     color: #5C9ACF;\r
 283 }\r
 284 \r
 285 ul.page-sidebar-menu > li > a > .arrow:before,\r
 286 ul.page-sidebar-menu > li > a > .arrow.open:before {\r
 287     color: #ccc !important;\r
 288 }\r
 289 \r
 290 ul.page-sidebar-menu > li.active > a .arrow:before,\r
 291 ul.page-sidebar-menu > li.active > a .arrow.open:before {\r
 292     color: #5C9ACF !important;\r
 293 }\r
 294 \r
 295 ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {\r
 296     border-top: 0px !important;\r
 297 }\r
 298 \r
 299 ul.page-sidebar-menu ul.sub-menu > li > a {\r
 300     font-weight: 400 !important;\r
 301     color: #2a6496 !important;\r
 302     margin-left: 4px !important;\r
 303     margin-right: 4px !important;\r
 304     margin-bottom: 5px !important;\r
 305 }\r
 306 \r
 307 ul.page-sidebar-menu ul.sub-menu > li.active > a,\r
 308 ul.page-sidebar-menu ul.sub-menu > li > a:hover {\r
 309     color: #818181 !important;\r
 310     background: #ededed !important;\r
 311 }\r
 312 \r
 313 ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,\r
 314 ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {\r
 315     color: #ccc !important;\r
 316 }\r
 317 \r
 318 /* sub menu links effects */\r
 319 ul.page-sidebar-menu ul.sub-menu > li.active > a,\r
 320 ul.page-sidebar-menu ul.sub-menu > li.active > a:hover {\r
 321     color: #1177CF !important;\r
 322     background: #dbe6ea !important;\r
 323 }\r
 324 \r
 325 ul.page-sidebar-menu ul.sub-menu > li > a:hover,\r
 326 ul.page-sidebar-menu ul.sub-menu > li.open > a {\r
 327     color: #428bca !important;\r
 328     background: #eaf1f4 !important;\r
 329 }\r
 330 \r
 331 ul.page-sidebar-menu > li > a:hover,\r
 332 ul.page-sidebar-menu > li.active > a:hover {\r
 333   background-color: #ecf1f5 !important;\r
 334   color: #585858;\r
 335 }\r
 336 /* sidebar search */\r
 337 .page-sidebar .sidebar-search input {\r
 338     background-color: #f5f5f5 !important;\r
 339     color: #727272 !important;\r
 340 }\r
 341 \r
 342 .page-sidebar .sidebar-search input::-webkit-input-placeholder {\r
 343     color: #aaa !important;\r
 344 }\r
 345 \r
 346 .page-sidebar .sidebar-search input:-moz-placeholder {\r
 347     color: #aaa !important;\r
 348 }\r
 349 \r
 350 .page-sidebar .sidebar-search input:-ms-input-placeholder {\r
 351     color: #aaa !important;\r
 352 }\r
 353 \r
 354 .page-sidebar .sidebar-search .input-box {\r
 355     border-bottom: 1px solid #e2e2e2 !important;\r
 356 }\r
 357 \r
 358 .page-sidebar .sidebar-search .submit {\r
 359     background-image: url(../../image/search-icon-white.png);\r
 360 }\r
 361 \r
 362 /***\r
 363 Sidebar toggler\r
 364 ***/\r
 365 .sidebar-toggler {\r
 366     background-image: url(../../image/sidebar-toggler-light.jpg);\r
 367     background-color: #333;\r
 368 }\r
 369 \r
 370 /* search box bg color on expanded */\r
 371 .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {\r
 372     background-color: #fbfbfb !important;\r
 373 }\r
 374 \r
 375 .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {\r
 376     background-image: url("../../image/sidebar-search-close-light.png");\r
 377 }\r
 378 \r
 379 /* sub menu bg color on hover menu item */\r
 380 .page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {\r
 381     background-color: #f5f5f5;\r
 382 }\r
 383 \r
 384 /***\r
 385 Footer \r
 386 ***/\r
 387 .footer .footer-inner {\r
 388     color: #333333;\r
 389 }\r
 390 \r
 391 .footer .footer-tools .go-top {\r
 392     background-color: #666666;\r
 393 }\r
 394 \r
 395 .footer .footer-tools .go-top:hover {\r
 396     opacity: 0.7;\r
 397     filter: alpha(opacity=70);\r
 398 }\r
 399 \r
 400 .footer .footer-tools .go-top i {\r
 401     color: #999999;\r
 402 }\r
 403 \r
 404 /***\r
 405 Footer Layouts (new in v1.3)\r
 406 ***/\r
 407 /* begin:fixed footer */\r
 408 .page-footer-fixed .footer {\r
 409     background-color: #434343;\r
 410 }\r
 411 \r
 412 .page-footer-fixed .footer .footer-inner {\r
 413     color: #aaaaaa;\r
 414 }\r
 415 \r
 416 .page-footer-fixed .footer .footer-tools .go-top {\r
 417     background-color: #666666;\r
 418 }\r
 419 \r
 420 .page-footer-fixed .footer .footer-tools .go-top i {\r
 421     color: #aaaaaa;\r
 422 }\r
 423 \r
 424 /* end:fixed footer */\r
 425 /***\r
 426 Gritter Notifications \r
 427 ***/\r
 428 .gritter-top {\r
 429     background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important;\r
 430 }\r
 431 \r
 432 .gritter-bottom {\r
 433     background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important;\r
 434 }\r
 435 \r
 436 .gritter-item {\r
 437     display: block;\r
 438     background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important;\r
 439 }\r
 440 \r
 441 .gritter-close {\r
 442     background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important;\r
 443 }\r
 444 \r
 445 .gritter-title {\r
 446     text-shadow: none !important;\r
 447     /* Not supported by IE :( */\r
 448 \r
 449 }\r
 450 \r
 451 /* for the light (white) version of the gritter notice */\r
 452 .gritter-light .gritter-item,\r
 453 .gritter-light .gritter-bottom,\r
 454 .gritter-light .gritter-top,\r
 455 .gritter-light .gritter-close {\r
 456     background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;\r
 457 }\r
 458 \r
 459 .gritter-item-wrapper a {\r
 460     color: #18a5ed;\r
 461 }\r
 462 \r
 463 .gritter-item-wrapper a:hover {\r
 464     color: #0b6694;\r
 465 }\r
 466 \r
 467 /* begin: boxed page */\r
 468 @media (min-width: 992px) {\r
 469     .page-boxed {\r
 470         background-color: #E8E8E8 !important;\r
 471     }\r
 472 \r
 473     .page-boxed .page-container {\r
 474         background-color: #f5f5f5;\r
 475         border-left: 1px solid #e2e2e2;\r
 476         border-bottom: 1px solid #e2e2e2;\r
 477     }\r
 478 \r
 479     .page-sidebar-reversed.page-boxed .page-container {\r
 480         border-left: 0;\r
 481         border-right: 1px solid #e2e2e2;\r
 482     }\r
 483 \r
 484     .page-boxed.page-sidebar-fixed .page-container {\r
 485         border-left: 0;\r
 486         border-bottom: 0;\r
 487     }\r
 488 \r
 489     .page-boxed.page-sidebar-fixed .page-sidebar {\r
 490         border-left: 1px solid #e2e2e2;\r
 491     }\r
 492 \r
 493     .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {\r
 494         border-right: 1px solid #e2e2e2;\r
 495         border-left: 0;\r
 496     }\r
 497 \r
 498     .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {\r
 499         background-color: #E8E8E8 !important;\r
 500     }\r
 501 \r
 502     .page-sidebar-closed .page-sidebar-menu > li > a {\r
 503         margin-left: 0;\r
 504         margin-right: 0;\r
 505     }\r
 506 }\r
 507 \r
 508 /* end: boxed page */\r
 509 /***\r
 510 Landscape phone to portrait tablet\r
 511 ***/\r
 512 @media (max-width: 991px) {\r
 513     /***\r
 514     page sidebar\r
 515     ***/\r
 516     .page-sidebar-closed .page-sidebar-menu > li > a {\r
 517         margin-left: 0;\r
 518         margin-right: 0;\r
 519     }\r
 520 \r
 521     .page-sidebar {\r
 522         background-color: #f1f1f1 !important;\r
 523         border-right: none !important;\r
 524     }\r
 525 \r
 526     .page-sidebar-fixed .page-sidebar {\r
 527         border-right: none !important;\r
 528     }\r
 529 \r
 530     .page-content {\r
 531         border-left: none !important;\r
 532     }\r
 533 \r
 534     ul.page-sidebar-menu > li > a {\r
 535         border-top: 1px solid #ececec !important;\r
 536         border-bottom: 1px solid #cccccc !important;\r
 537     }\r
 538 \r
 539     /* ul.page-sidebar-menu > li:last-child > a {\r
 540        border-bottom: 0 !important;\r
 541      }*/\r
 542     ul.page-sidebar-menu > li.open > a, {\r
 543         color: #666666 !important;\r
 544         background-color: #e0e0e0 !important;\r
 545     }\r
 546 \r
 547     /*ul.page-sidebar-menu > li > a:hover {\r
 548       color: #666666 !important;\r
 549       background-color: #e7e7e7 !important;\r
 550     }*/\r
 551     ul.page-sidebar-menu > li.open > a {\r
 552         border-bottom-color: transparent !important;\r
 553     }\r
 554 \r
 555     /* ul.page-sidebar-menu > li.active > a {\r
 556        color: #ffffff !important;\r
 557        background-color: #28b779 !important;\r
 558      }*/\r
 559     /*ul.page-sidebar-menu ul.sub-menu > li > a {\r
 560       color: #111 !important;\r
 561     }*/\r
 562     /*ul.page-sidebar-menu ul.sub-menu > li.active > a{\r
 563         color: #000 !important;\r
 564         background: #dbe6ea !important; */\r
 565 }\r
 566 \r
 567 /* ul.page-sidebar-menu ul.sub-menu > li.open > a,\r
 568    ul.page-sidebar-menu ul.sub-menu > li > a:hover {\r
 569    color: #000 !important;\r
 570    background: #e7e7e7 !important;\r
 571  }*/\r
 572 \r
 573 .page-sidebar .sidebar-search input {\r
 574     background-color: #f1f1f1 !important;\r
 575     color: #ccc !important;\r
 576 }\r
 577 \r
 578 .page-sidebar .sidebar-search .input-box {\r
 579     border-bottom-color: #ccc !important;\r
 580 }\r
 581 \r
 582 .page-sidebar .sidebar-search input::-webkit-input-placeholder {\r
 583     color: #ccc !important;\r
 584 }\r
 585 \r
 586 .page-sidebar .sidebar-search input:-moz-placeholder {\r
 587     color: #ccc !important;\r
 588 }\r
 589 \r
 590 .page-sidebar .sidebar-search input:-ms-input-placeholder {\r
 591     color: #ccc !important;\r
 592 }\r
 593 \r
 594 /***\r
 595 page footer\r
 596 ***/\r
 597 \r
 598 .footer {\r
 599     background-color: #434343;\r
 600 }\r
 601 \r
 602 .footer .footer-inner {\r
 603     color: #cccccc;\r
 604 }\r
 605 \r
 606 .footer .footer-tools .go-top {\r
 607     background-color: #666666;\r
 608 }\r
 609 \r
 610 .footer .footer-tools .go-top i {\r
 611     color: #999999;\r
 612 }\r
 613 \r
 614     }\r
 615 \r
 616 @media (max-width: 767px) {\r
 617     body {\r
 618         background-color: #333333 !important;\r
 619     }\r
 620 }