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