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