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