openo-portal/portal-common/src/main/webapp/common/css/themes/ztebluelight3.css

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