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