openo-portal/portal-common/src/main/webapp/common/css/themes/grey.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 Grey theme\r
  18 ***/\r
  19 /***\r
  20 Reset and overrides  \r
  21 ***/\r
  22 body {\r
  23   background-color: #666666 !important;\r
  24 }\r
  25 /***\r
  26 Page header\r
  27 ***/\r
  28 .header {\r
  29   filter: none !important;\r
  30   background-image: none !important;\r
  31   background-color: #4a4a4a !important;\r
  32 }\r
  33 .header .btn-navbar {\r
  34   background-color: #4a4a4a !important;\r
  35 }\r
  36 .header .navbar-nav .dropdown-toggle:hover,\r
  37 .header .navbar-nav .dropdown.open .dropdown-toggle {\r
  38   background-color: #616161 !important;\r
  39 }\r
  40 .header .navbar-nav li.dropdown .dropdown-toggle i {\r
  41   color: #b3b3b3 !important;\r
  42 }\r
  43 .page-content .page-breadcrumb.breadcrumb{\r
  44 background-color:#F5F5F5 !important;\r
  45 }\r
  46 /***\r
  47 Header Search\r
  48 ***/\r
  49 .header .search-form {\r
  50   background-color: #3a3a3a;\r
  51 }\r
  52 \r
  53 .header .search-form .form-control{\r
  54   color: #ccc;\r
  55   border: 0; \r
  56   background-color: #3a3a3a;  \r
  57 }\r
  58 \r
  59 .header .search-form .submit {  \r
  60   background: url(../../image/search-icon-light.png);\r
  61 }\r
  62 /***\r
  63 Hor menu\r
  64 ***/\r
  65 .header .hor-menu ul.nav li a {\r
  66   color: #ccc;\r
  67 }\r
  68 \r
  69 .header .hor-menu ul.nav li.open > a,\r
  70 .header .hor-menu ul.nav li > a:hover,\r
  71 .header .hor-menu ul.nav li > a:focus {\r
  72   color: #fff;\r
  73   background: #616161;\r
  74 }\r
  75 \r
  76 .header .hor-menu .dropdown-menu li:hover > a,\r
  77 .header .hor-menu ul.nav li.active > a,\r
  78 .header .hor-menu ul.nav li.active > a:hover {\r
  79   color: #fff;\r
  80   background: #e02222 !important; \r
  81 }\r
  82 \r
  83 .header .hor-menu ul.nav li.current > a,\r
  84 .header .hor-menu ul.nav li.current > a:hover {\r
  85   color: #fff;\r
  86   background: #e02222 !important; \r
  87 }\r
  88 \r
  89 .header .hor-menu .dropdown-menu {  \r
  90     background: #616161;\r
  91 }\r
  92 .header .hor-menu .dropdown-menu li > a {    \r
  93     color: #ccc;\r
  94 }\r
  95 \r
  96 .header .hor-menu .hor-menu-search-form-toggler.off {\r
  97    background: #616161 url(../../image/hor-menu-search-close-white.png) no-repeat center;\r
  98 }\r
  99 \r
 100 .header .hor-menu .search-form {  \r
 101   background:#616161; \r
 102 }\r
 103 \r
 104 .header .hor-menu .search-form form input {\r
 105   color: #ccc;\r
 106 }\r
 107 \r
 108 .header .hor-menu .search-form .btn {\r
 109   color: #ccc;\r
 110   background: url(../../image/search-icon-white.png) no-repeat center;\r
 111 }\r
 112 \r
 113 .header .hor-menu .search-form form input::-webkit-input-placeholder { /* WebKit browsers */\r
 114     color: #ccc;\r
 115 }\r
 116 .header .hor-menu .search-form form input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */\r
 117     color: #ccc;\r
 118 }\r
 119 .header .hor-menu .search-form form input::-moz-placeholder { /* Mozilla Firefox 19+ */\r
 120     color: #ccc;\r
 121 }\r
 122 .header .hor-menu .search-form form input:-ms-input-placeholder { /* Internet Explorer 10+ */\r
 123     color: #ccc;\r
 124 }\r
 125 \r
 126 /***\r
 127 Mega Menu\r
 128 ***/\r
 129 .mega-menu .mega-menu-submenu {  \r
 130   border-right: 1px solid #757575;\r
 131 }\r
 132 \r
 133 .mega-menu .mega-menu-submenu li h3 {  \r
 134   color: #fff;\r
 135 }\r
 136 \r
 137 /***\r
 138 Page sidebar\r
 139 ***/\r
 140 .page-sidebar {\r
 141   background-color: #666666;\r
 142 }\r
 143 ul.page-sidebar-menu > li > a {\r
 144   border-top: 1px solid #858585 !important;\r
 145   color: #ffffff !important;\r
 146 }\r
 147 ul.page-sidebar-menu > li:last-child > a {\r
 148   border-bottom: 1px solid transparent !important;\r
 149 }\r
 150 ul.page-sidebar-menu > li a i {\r
 151   color: #bfbfbf;\r
 152 }\r
 153 ul.page-sidebar-menu > li.open > a,\r
 154 ul.page-sidebar-menu > li > a:hover,\r
 155 ul.page-sidebar-menu > li:hover > a {\r
 156   background: #595959;\r
 157 }\r
 158 ul.page-sidebar-menu > li.active > a {\r
 159   background: #e02222 !important;\r
 160   border-top-color: transparent !important;\r
 161   color: #ffffff;\r
 162 }\r
 163 ul.page-sidebar-menu > li.active > a i {\r
 164   color: #ffffff;\r
 165 }\r
 166 ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {\r
 167   border-top: 0px !important;\r
 168 }\r
 169 ul.page-sidebar-menu > li > ul.sub-menu > li.active > a,\r
 170 ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {\r
 171   color: #ffffff !important;\r
 172   background: #808080 !important;\r
 173 }\r
 174 ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {\r
 175   background: #808080 !important;\r
 176 }\r
 177 /* 3rd level sub menu */\r
 178 ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,\r
 179 ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,\r
 180 ul.page-sidebar-menu > li > ul.sub-menu li.open > a {\r
 181   color: #ffffff !important;\r
 182   background: #808080 !important;\r
 183 }\r
 184 /* font color for all sub menu links*/\r
 185 ul.page-sidebar-menu li > ul.sub-menu > li > a {\r
 186   color: #e6e6e6;\r
 187 }\r
 188 /* menu arrows */\r
 189 ul.page-sidebar-menu > li > a .arrow:before,\r
 190 ul.page-sidebar-menu > li > a .arrow.open:before {\r
 191   color: #a6a6a6 !important;\r
 192 }\r
 193 ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,\r
 194 ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {\r
 195   color: #999999 !important;\r
 196 }\r
 197 ul.page-sidebar-menu > li > a > .arrow.open:before {\r
 198   color: #b3b3b3 !important;\r
 199 }\r
 200 ul.page-sidebar-menu > li.active > a .arrow:before,\r
 201 ul.page-sidebar-menu > li.active > a .arrow.open:before {\r
 202   color: #ffffff !important;\r
 203 }\r
 204 /* sidebar search */\r
 205 .page-sidebar .sidebar-search input {\r
 206   background-color: #4d4d4d !important;\r
 207   color: #a6a6a6;\r
 208 }\r
 209 .page-sidebar .sidebar-search input::-webkit-input-placeholder {\r
 210   color: #a6a6a6 !important;\r
 211 }\r
 212 .page-sidebar .sidebar-search input:-moz-placeholder {\r
 213   color: #a6a6a6 !important;\r
 214 }\r
 215 .page-sidebar .sidebar-search input:-ms-input-placeholder {\r
 216   color: #a6a6a6 !important;\r
 217 }\r
 218 .page-sidebar .sidebar-search input {\r
 219   background-color: #666666 !important;\r
 220   color: #bfbfbf !important;\r
 221 }\r
 222 .page-sidebar .sidebar-search .input-box {\r
 223   border-bottom: 1px solid #a6a6a6 !important;\r
 224 }\r
 225 .page-sidebar .sidebar-search .submit {\r
 226   background-image: url(../../image/search-icon.png);\r
 227 }\r
 228 /***\r
 229 Sidebar toggler\r
 230 ***/\r
 231 .sidebar-toggler {\r
 232   background-image: url(../../image/sidebar-toggler.jpg);\r
 233   background-color: #4d4d4d;\r
 234 }\r
 235 /* search box bg color on expanded */\r
 236 .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container {\r
 237   background-color: #666666 !important;\r
 238 }\r
 239 .page-sidebar-closed .page-sidebar .sidebar-search.open .form-container .remove {\r
 240   background-image: url("../../image/sidebar-search-close.png");\r
 241 }\r
 242 /* sub menu bg color on hover menu item */\r
 243 .page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {\r
 244   background-color: #666666;\r
 245 }\r
 246 /***\r
 247 Footer \r
 248 ***/\r
 249 .footer .footer-inner {\r
 250   color: #b3b3b3;\r
 251 }\r
 252 .footer .footer-tools .go-top {\r
 253   background-color: #787878;\r
 254 }\r
 255 .footer .footer-tools .go-top:hover {\r
 256   opacity: 0.7;\r
 257   filter: alpha(opacity=70);\r
 258 }\r
 259 .footer .footer-tools .go-top i {\r
 260   color: #b3b3b3;\r
 261 }\r
 262 /***\r
 263 Footer Layouts (new in v1.3)\r
 264 ***/\r
 265 /* begin:fixed footer */\r
 266 .page-footer-fixed .footer {\r
 267   background-color: #4d4d4d;\r
 268 }\r
 269 .page-footer-fixed .footer .footer-inner {\r
 270   color: #b3b3b3;\r
 271 }\r
 272 .page-footer-fixed .footer .footer-tools .go-top {\r
 273   background-color: #787878;\r
 274 }\r
 275 .page-footer-fixed .footer .footer-tools .go-top i {\r
 276   color: #b3b3b3;\r
 277 }\r
 278 /* end:fixed footer */\r
 279 /***\r
 280 Gritter Notifications \r
 281 ***/\r
 282 .gritter-top {\r
 283   background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -30px !important;\r
 284 }\r
 285 .gritter-bottom {\r
 286   background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left bottom !important;\r
 287 }\r
 288 .gritter-item {\r
 289   display: block;\r
 290   background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left -40px !important;\r
 291 }\r
 292 .gritter-close {\r
 293   background: url(../../thirdparty/gritter/images/gritter.png) no-repeat left top !important;\r
 294 }\r
 295 .gritter-title {\r
 296   text-shadow: none !important;\r
 297   /* Not supported by IE :( */\r
 298 \r
 299 }\r
 300 /* for the light (white) version of the gritter notice */\r
 301 .gritter-light .gritter-item,\r
 302 .gritter-light .gritter-bottom,\r
 303 .gritter-light .gritter-top,\r
 304 .gritter-light .gritter-close {\r
 305   background-image: url(../../thirdparty/gritter/images/gritter-light.png) !important;\r
 306 }\r
 307 .gritter-item-wrapper a {\r
 308   color: #18a5ed;\r
 309 }\r
 310 .gritter-item-wrapper a:hover {\r
 311   color: #0b6694;\r
 312 }\r
 313 /* begin: boxed page */\r
 314 @media (min-width: 992px) {\r
 315   .page-boxed {\r
 316     background-color: #575757 !important;\r
 317   }\r
 318   .page-boxed .page-container {\r
 319     background-color: #666666;\r
 320     border-left: 1px solid #878787;\r
 321     border-bottom: 1px solid #878787;\r
 322   }\r
 323   .page-boxed.page-sidebar-reversed .page-container {\r
 324     border-left: 0;\r
 325     border-right: 1px solid #878787;\r
 326   }\r
 327   .page-boxed.page-sidebar-fixed .page-container {\r
 328     border-left: 0;\r
 329     border-bottom: 0;\r
 330   }\r
 331   .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-container {\r
 332     border-left: 0;\r
 333     border-right: 0;\r
 334     border-bottom: 0;\r
 335   }\r
 336   .page-boxed.page-sidebar-fixed .page-sidebar {\r
 337     border-left: 1px solid #878787;\r
 338   }\r
 339   .page-boxed.page-sidebar-reversed.page-sidebar-fixed .page-sidebar {\r
 340     border-right: 1px solid #878787;\r
 341     border-left: 0; \r
 342   }\r
 343   .page-boxed.page-sidebar-fixed.page-footer-fixed .footer {\r
 344     background-color: #575757 !important;\r
 345   }\r
 346 }\r
 347 /* end: boxed page */\r
 348 /***\r
 349 Landscape phone to portrait tablet\r
 350 ***/\r
 351 @media (max-width: 991px) {\r
 352   /***\r
 353     page sidebar\r
 354     ***/\r
 355   .page-sidebar {\r
 356     background-color: #525252 !important;\r
 357   }\r
 358   ul.page-sidebar-menu > li > a {\r
 359     border-top: 1px solid #737373 !important;\r
 360   }\r
 361   ul.page-sidebar-menu > li:last-child > a {\r
 362     border-bottom: 0 !important;\r
 363   }\r
 364   .page-sidebar .sidebar-search input {\r
 365     background-color: #525252 !important;\r
 366   }\r
 367   ul.page-sidebar-menu > li.open > a,\r
 368   ul.page-sidebar-menu > li > a:hover,\r
 369   ul.page-sidebar-menu > li:hover > a {\r
 370     background: #474747;\r
 371   }\r
 372 }\r