openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight2.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 Blue theme\r
  18 ***/\r
  19 /***\r
  20 Reset and overrides  \r
  21 ***/\r
  22 body {\r
  23     background-color: #f9f9f9 !important;\r
  24     font-family: "microsoft yahei" !important;\r
  25 }\r
  26 \r
  27 .page-content {\r
  28     background-color: #f1f3fa !important;\r
  29 }\r
  30 \r
  31 /***\r
  32 Page header\r
  33 ***/\r
  34 .header {\r
  35     filter: none !important;\r
  36     /*background-image: none !important;*/\r
  37     background-color: #1178ee !important;\r
  38     /*  background: -webkit-linear-gradient(#37c4fa, #0081bb );\r
  39      background: -o-linear-gradient(#37c4fa, #0081bb );\r
  40      background: -moz-linear-gradient(#37c4fa, #0081bb );\r
  41      background: linear-gradient(#37c4fa, #0081bb ); */\r
  42 }\r
  43 \r
  44 .header .btn-navbar {\r
  45     background-color: #f9f9f9 !important;\r
  46 }\r
  47 \r
  48 .header .navbar-nav .dropdown-toggle:hover,\r
  49 .header .navbar-nav .dropdown.open .dropdown-toggle {\r
  50     color: #fff;\r
  51     background-color: #1470d8 !important;\r
  52 }\r
  53 \r
  54 .zte-theme-panel > .toggler:hover {\r
  55     background-color: #70abcd !important;\r
  56 }\r
  57 \r
  58 .header .navbar-nav li.dropdown .dropdown-toggle i {\r
  59     color: #fff !important;\r
  60 }\r
  61 \r
  62 .btn-group .btn.blue.dropdown-toggle {\r
  63     background-color: #1178EE !important;\r
  64 }\r
  65 \r
  66 .btn-group .btn.blue.dropdown-toggle:hover {\r
  67     background-color: #0f70df !important;\r
  68 }\r
  69 \r
  70 /***\r
  71 Header Search\r
  72 ***/\r
  73 .header .search-form {\r
  74     background-color: #0B4263;\r
  75 }\r
  76 \r
  77 .header .search-form .form-control {\r
  78     color: #68bbec;\r
  79     border: 0;\r
  80     background-color: #0B4263;\r
  81 }\r
  82 \r
  83 .header .search-form .submit {\r
  84     background: url(../../image/search-icon-blue.png);\r
  85 }\r
  86 \r
  87 /***\r
  88 Hor menu\r
  89 ***/\r
  90 .header .hor-menu ul.nav li a {\r
  91     color: #fff;\r
  92 }\r
  93 \r
  94 .header .hor-menu ul.nav li.open > a,\r
  95 .header .hor-menu ul.nav li > a:hover,\r
  96 .header .hor-menu ul.nav li > a:focus {\r
  97     color: #D4E9F2;\r
  98     background-color: #1178ee;\r
  99     /*background: -webkit-linear-gradient(#37c4fa, #0081bb );\r
 100     background: -o-linear-gradient(#37c4fa, #0081bb );\r
 101     background: -moz-linear-gradient(#37c4fa, #0081bb );\r
 102     background: linear-gradient(#37c4fa, #0081bb );*/\r
 103 }\r
 104 \r
 105 .header.navbar .hor-menu ul.nav li.current .selected,\r
 106 .header.navbar .hor-menu ul.nav li.active .selected {\r
 107     border-top: 6px solid #0081bb;\r
 108 }\r
 109 \r
 110 .header .hor-menu .dropdown-menu li:hover > a,\r
 111 .header .hor-menu ul.nav li.active > a,\r
 112 .header .hor-menu ul.nav li.active > a:hover {\r
 113     color: #fff;\r
 114     /*background: -webkit-linear-gradient(#37c4fa, #0081bb );\r
 115     background: -o-linear-gradient(#37c4fa, #0081bb );\r
 116     background: -moz-linear-gradient(#37c4fa, #0081bb );\r
 117     background: linear-gradient(#37c4fa, #0081bb );*/\r
 118 }\r
 119 \r
 120 .header.navbar .hor-menu ul.nav li.current .selected,\r
 121 .header.navbar .hor-menu ul.nav li.active .selected {\r
 122     border-top: 6px solid #0081bb;\r
 123 }\r
 124 \r
 125 .header .hor-menu ul.nav li.current > a,\r
 126 .header .hor-menu ul.nav li.current > a:hover {\r
 127     color: #fff;\r
 128     background: #e02222 !important;\r
 129 }\r
 130 \r
 131 .header .hor-menu .dropdown-menu {\r
 132     background: #1178EE;\r
 133 }\r
 134 \r
 135 .header .hor-menu .dropdown-menu li > a {\r
 136     color: #ccc;\r
 137 }\r
 138 \r
 139 .header .hor-menu .hor-menu-search-form-toggler.off {\r
 140     background: #126ed8 url(../../image/hor-menu-search-close-white.png) no-repeat center;\r
 141 }\r
 142 \r
 143 .header .hor-menu .search-form {\r
 144     background: #126ed8;\r
 145 }\r
 146 \r
 147 .header .hor-menu .search-form form input {\r
 148     color: #ccc;\r
 149 }\r
 150 \r
 151 .header .hor-menu .search-form .btn {\r
 152     color: #ccc;\r
 153     background: url(../../image/search-icon-white.png) no-repeat center;\r
 154 }\r
 155 \r
 156 .header .hor-menu .search-form form input::-webkit-input-placeholder {\r
 157     /* WebKit browsers */\r
 158     color: #ccc;\r
 159 }\r
 160 \r
 161 .header .hor-menu .search-form form input:-moz-placeholder {\r
 162     /* Mozilla Firefox 4 to 18 */\r
 163     color: #ccc;\r
 164 }\r
 165 \r
 166 .header .hor-menu .search-form form input::-moz-placeholder {\r
 167     /* Mozilla Firefox 19+ */\r
 168     color: #ccc;\r
 169 }\r
 170 \r
 171 .header .hor-menu .search-form form input:-ms-input-placeholder {\r
 172     /* Internet Explorer 10+ */\r
 173     color: #ccc;\r
 174 }\r
 175 \r
 176 .dropdown-menu .mega-menu-content .row .mega-menu-submenu li:hover > a {\r
 177     color: #fff !important;\r
 178     background: #388ef1 !important;\r
 179 }\r
 180 \r
 181 .dropdown-menu .mega-menu-content .row .mega-menu-submenu .active > a,\r
 182 .dropdown-menu .mega-menu-content .row .mega-menu-submenu .active > a:hover {\r
 183     color: #fff !important;\r
 184     background: #0e6ad4 !important;\r
 185 }\r
 186 \r
 187 /***\r
 188 Mega Menu\r
 189 ***/\r
 190 .mega-menu .mega-menu-submenu {\r
 191     border-right: 1px solid #1876AD;\r
 192 }\r
 193 \r
 194 .mega-menu .mega-menu-submenu li h3 {\r
 195     color: #fff;\r
 196     font-family: "microsoft yahei"\r
 197 }\r
 198 \r
 199 /***\r
 200 Page sidebar\r
 201 ***/\r
 202 .page-sidebar {\r
 203     background-color: #f9f9f9;\r
 204 }\r
 205 \r
 206 ul.page-sidebar-menu > li > a {\r
 207     border-top: 1px solid #e5e5e5 !important;\r
 208     color: #616161 !important;\r
 209     border-left: 3px solid transparent !important;\r
 210 }\r
 211 \r
 212 ul.page-sidebar-menu > li > a:hover {\r
 213     color: #1178EE !important;\r
 214     background-color: #eee;\r
 215 }\r
 216 \r
 217 ul.page-sidebar-menu > li:last-child > a {\r
 218     border-bottom: 1px solid #e5e5e5 !important;\r
 219 }\r
 220 \r
 221 /*ul.page-sidebar-menu > li a i {\r
 222   color: #e5e5e5 ! important;\r
 223 }*/\r
 224 ul.page-sidebar-menu ul.sub-menu > li > a {\r
 225     color: #616161 !important;\r
 226 }\r
 227 \r
 228 ul.page-sidebar-menu ul.sub-menu > li.active > a {\r
 229     color: #1178EE !important;\r
 230 }\r
 231 \r
 232 ul.page-sidebar-menu ul.sub-menu > li > a:hover {\r
 233     color: #1178EE !important;\r
 234     background-color: #eee;\r
 235 }\r
 236 \r
 237 ul.page-sidebar-menu > li > a:hover,\r
 238 ul.page-sidebar-menu > li:hover > a {\r
 239     background: #fff;\r
 240     color: #585858;\r
 241     border-left: 3px solid #1178ee !important;\r
 242 }\r
 243 \r
 244 ul.page-sidebar-menu > li.open > a {\r
 245     background: #fff;\r
 246     color: #585858;\r
 247     border-bottom: 1px solid #e5e5e5 !important;\r
 248 }\r
 249 \r
 250 ul.page-sidebar-menu > li.active > a {\r
 251     background: #fff !important;\r
 252     border-top: 1px solid #e5e5e5 !important;\r
 253     color: #1178ee !important;\r
 254     font-weight: bold;\r
 255 }\r
 256 \r
 257 ul.page-sidebar-menu > li.active > a i {\r
 258     color: #1178ee;\r
 259 }\r
 260 \r
 261 ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {\r
 262     /* border-top: 1px solid #e5e5e5 !important;*/\r
 263 }\r
 264 \r
 265 ul.page-sidebar-menu > li > ul.sub-menu > li.active > a\r
 266 ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {\r
 267     color: #4b88b7 !important;\r
 268 }\r
 269 \r
 270 ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {\r
 271     /* background: #1b8fd3 !important;*/\r
 272 }\r
 273 \r
 274 /* 3rd level sub menu */\r
 275 ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,\r
 276 ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,\r
 277 ul.page-sidebar-menu > li > ul.sub-menu li.open > a {\r
 278     color: #ffffff !important;\r
 279     border-bottom: 1px solid #e5e5e5 !important;\r
 280 }\r
 281 \r
 282 .page-sidebar-menu > li.active > a .selected {\r
 283     /* background-image: url(../../image/sidebar-menu-arrow-blue.png) !important;*/\r
 284     border-right: 2px solid #1178ee !important;\r
 285     height: 37px !important;\r
 286     top: 2px !important;\r
 287 }\r
 288 \r
 289 /* font color for all sub menu links*/\r
 290 ul.page-sidebar-menu li > ul.sub-menu > li > a {\r
 291     /*color: #c3e4f7;*/\r
 292 }\r
 293 \r
 294 /* menu arrows */\r
 295 ul.page-sidebar-menu > li > a .arrow:before,\r
 296 ul.page-sidebar-menu > li > a .arrow.open:before {\r
 297     /*color: #51b1e9 !important;*/\r
 298 }\r
 299 \r
 300 ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,\r
 301 ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {\r
 302     color: #3ba6e6 !important;\r
 303 }\r
 304 \r
 305 ul.page-sidebar-menu > li > a > .arrow.open:before {\r
 306     /* color: #68bbec !important;*/\r
 307 }\r
 308 \r
 309 /*ul.page-sidebar-menu > li.active > a .arrow:before,\r
 310 ul.page-sidebar-menu > li.active > a .arrow.open:before {\r
 311   color: #ffffff !important;\r
 312 }*/\r
 313 /* sidebar search */\r
 314 .page-sidebar .sidebar-search input {\r
 315     background-color: #0f5179 !important;\r
 316     color: #1178ee;\r
 317 }\r
 318 \r
 319 .page-sidebar .sidebar-search input::-webkit-input-placeholder {\r
 320     color: #1178ee !important;\r
 321 }\r
 322 \r
 323 .page-sidebar .sidebar-search input:-moz-placeholder {\r
 324     color: #1178ee !important;\r
 325 }\r
 326 \r
 327 .page-sidebar .sidebar-search input:-ms-input-placeholder {\r
 328     color: #1178ee !important;\r
 329 }\r
 330 \r
 331 .page-sidebar .sidebar-search input {\r
 332     background-color: #f9f9f9 !important;\r
 333     /* color: #bfbfbf !important;*/\r
 334 }\r
 335 \r
 336 .page-sidebar .sidebar-search .input-box {\r
 337     border-bottom: 1px solid #1178ee !important;\r
 338 }\r
 339 \r
 340 .page-sidebar .sidebar-search .submit {\r
 341     background-image: url(../../image/search-icon-blue.png);\r
 342 }\r
 343 \r
 344 /***\r
 345 Sidebar toggler\r
 346 ***/\r
 347 .sidebar-toggler {\r
 348     background-image: url(../../image/sidebar-toggler-grey.jpg);\r
 349     background-color: #0f5179;\r
 350 }\r
 351 \r
 352 /* search box bg color on expanded */\r
 353 .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {\r
 354     background-color: #f9f9f9 !important;\r
 355 }\r
 356 \r
 357 .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {\r
 358     background-image: url("../../image/sidebar-search-close-blue.png");\r
 359 }\r
 360 \r
 361 /* sub menu bg color on hover menu item */\r
 362 .page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {\r
 363     background-color: #f9f9f9;\r
 364 }\r
 365 \r
 366 /***\r
 367 Footer \r
 368 ***/\r
 369 .footer .footer-inner {\r
 370     color: #7c7c7c;\r
 371 }\r
 372 \r
 373 .footer .footer-tools .go-top {\r
 374     background-color: #1985c6;\r
 375 }\r
 376 \r
 377 .footer .footer-tools .go-top:hover {\r
 378     opacity: 0.7;\r
 379     filter: alpha(opacity=70);\r
 380 }\r
 381 \r
 382 .footer .footer-tools .go-top i {\r
 383     color: #68bbec;\r
 384 }\r
 385 \r
 386 /***\r
 387 Footer Layouts (new in v1.3)\r
 388 ***/\r
 389 /* begin:fixed footer */\r
 390 .page-footer-fixed .footer {\r
 391     background-color: #0f5179;\r
 392 }\r
 393 \r
 394 .page-footer-fixed .footer .footer-inner {\r
 395     color: #68bbec;\r
 396 }\r
 397 \r
 398 .page-footer-fixed .footer .footer-tools .go-top {\r
 399     background-color: #1985c6;\r
 400 }\r
 401 \r
 402 .page-footer-fixed .footer .footer-tools .go-top i {\r
 403     color: #68bbec;\r
 404 }\r
 405 \r
 406 /* end:fixed footer */\r
 407 /***\r
 408 Gritter Notifications \r
 409 ***/\r
 410 .gritter-top {\r
 411     background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -30px !important;\r
 412 }\r
 413 \r
 414 .gritter-bottom {\r
 415     background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left bottom !important;\r
 416 }\r
 417 \r
 418 .gritter-item {\r
 419     display: block;\r
 420     background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left -40px !important;\r
 421 }\r
 422 \r
 423 .gritter-close {\r
 424     background: url(../../thirdparty/gritter/images/gritter-blue.png) no-repeat left top !important;\r
 425 }\r
 426 \r
 427 .gritter-title {\r
 428     text-shadow: none !important;\r
 429     /* Not supported by IE :( */\r
 430 \r
 431 }\r
 432 \r
 433 /* for the light (white) version of the gritter notice */\r
 434 .gritter-light .gritter-item,\r
 435 .gritter-light .gritter-bottom,\r
 436 .gritter-light .gritter-top,\r
 437 .gritter-light .gritter-close {\r
 438     background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;\r
 439 }\r
 440 \r
 441 .gritter-item-wrapper a {\r
 442     color: #18a5ed;\r
 443 }\r
 444 \r
 445 .gritter-item-wrapper a:hover {\r
 446     color: #0b6694;\r
 447 }\r
 448 \r
 449 /* begin: boxed page */\r
 450 @media (min-width: 992px) {\r
 451     .page-boxed {\r
 452         background-color: #125e8b !important;\r
 453     }\r
 454 \r
 455     .page-boxed .page-container {\r
 456         background-color: #1570a6;\r
 457         border-left: 1px solid #1c98e1;\r
 458         border-bottom: 1px solid #1c98e1;\r
 459     }\r
 460 \r
 461     .page-boxed.page-sidebar-reversed .page-container {\r
 462         border-left: 0;\r
 463         border-right: 1px solid #1c98e1;\r
 464     }\r
 465 \r
 466     .page-boxed.page-sidebar-fixed .page-container {\r
 467         border-left: 0;\r
 468         border-bottom: 0;\r
 469     }\r
 470 \r
 471     .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {\r
 472         border-left: 0;\r
 473         border-right: 0;\r
 474         border-bottom: 0;\r
 475     }\r
 476 \r
 477     .page-boxed.page-sidebar-fixed .page-sidebar {\r
 478         border-left: 1px solid #1c98e1;\r
 479     }\r
 480 \r
 481     .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {\r
 482         border-right: 1px solid #1c98e1;\r
 483         border-left: 0;\r
 484     }\r
 485 \r
 486     .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {\r
 487         background-color: #125e8b !important;\r
 488     }\r
 489 }\r
 490 \r
 491 /* end: boxed page */\r
 492 /***\r
 493 Landscape phone to portrait tablet\r
 494 ***/\r
 495 @media (max-width: 991px) {\r
 496     /***\r
 497       page sidebar\r
 498       ***/\r
 499     .page-sidebar {\r
 500         background-color: #f9f9f9 !important;\r
 501     }\r
 502 \r
 503     ul.page-sidebar-menu > li > a {\r
 504         border-top: 1px solid #e5e5e5 !important;\r
 505     }\r
 506 \r
 507     ul.page-sidebar-menu > li:last-child > a {\r
 508         border-bottom: 0 !important;\r
 509     }\r
 510 \r
 511     .page-sidebar .sidebar-search input {\r
 512         background-color: #f9f9f9 !important;\r
 513     }\r
 514 \r
 515     ul.page-sidebar-menu > li.open > a,\r
 516     ul.page-sidebar-menu > li > a:hover,\r
 517     ul.page-sidebar-menu > li:hover > a {\r
 518         background: #fff;\r
 519     }\r
 520 }\r