addons/website/static/src/css/website.css

   1 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
   2  *
   3  * css for editor buttons, openerp widget included in the website and other
   4  * stuff must go to the editor.css
   5  *
   6  */
   7 /* ----- GENERIC LAYOUTING HELPERS ---- */
   8 /* Vertical Spacing */
   9 .mt128 {
  10   margin-top: 128px !important;
  11 }
  12
  13 .mt92 {
  14   margin-top: 92px !important;
  15 }
  16
  17 .mt64 {
  18   margin-top: 64px !important;
  19 }
  20
  21 .mt48 {
  22   margin-top: 48px !important;
  23 }
  24
  25 .mt32 {
  26   margin-top: 32px !important;
  27 }
  28
  29 .mt16 {
  30   margin-top: 16px !important;
  31 }
  32
  33 .mt8 {
  34   margin-top: 8px !important;
  35 }
  36
  37 .mt4 {
  38   margin-top: 4px !important;
  39 }
  40
  41 .mt0 {
  42   margin-top: 0px !important;
  43 }
  44
  45 .mb128 {
  46   margin-bottom: 128px !important;
  47 }
  48
  49 .mb92 {
  50   margin-bottom: 92px !important;
  51 }
  52
  53 .mb64 {
  54   margin-bottom: 64px !important;
  55 }
  56
  57 .mb48 {
  58   margin-bottom: 48px !important;
  59 }
  60
  61 .mb32 {
  62   margin-bottom: 32px !important;
  63 }
  64
  65 .mb16 {
  66   margin-bottom: 16px !important;
  67 }
  68
  69 .mb8 {
  70   margin-bottom: 8px !important;
  71 }
  72
  73 .mb4 {
  74   margin-bottom: 4px !important;
  75 }
  76
  77 .mb0 {
  78   margin-bottom: 0px !important;
  79 }
  80
  81 .pt128 {
  82   padding-top: 128px !important;
  83 }
  84
  85 .pt92 {
  86   padding-top: 92px !important;
  87 }
  88
  89 .pt64 {
  90   padding-top: 64px !important;
  91 }
  92
  93 .pt48 {
  94   padding-top: 48px !important;
  95 }
  96
  97 .pt32 {
  98   padding-top: 32px !important;
  99 }
 100
 101 .pt16 {
 102   padding-top: 16px !important;
 103 }
 104
 105 .pt8 {
 106   padding-top: 8px !important;
 107 }
 108
 109 .pt4 {
 110   padding-top: 4px !important;
 111 }
 112
 113 .pt0 {
 114   padding-top: 0px !important;
 115 }
 116
 117 .pb128 {
 118   padding-bottom: 128px !important;
 119 }
 120
 121 .pb92 {
 122   padding-bottom: 92px !important;
 123 }
 124
 125 .pb64 {
 126   padding-bottom: 64px !important;
 127 }
 128
 129 .pb48 {
 130   padding-bottom: 48px !important;
 131 }
 132
 133 .pb32 {
 134   padding-bottom: 32px !important;
 135 }
 136
 137 .pb16 {
 138   padding-bottom: 16px !important;
 139 }
 140
 141 .pb8 {
 142   padding-bottom: 8px !important;
 143 }
 144
 145 .pb4 {
 146   padding-bottom: 4px !important;
 147 }
 148
 149 .pb0 {
 150   padding-bottom: 0px !important;
 151 }
 152
 153 /* Grid of unequally tall elements */
 154 .grid > [class*="col-md"] {
 155   display: inline-block;
 156   float: none;
 157   vertical-align: top;
 158   box-sizing: border-box;
 159 }
 160 .grid > [class*="col-md"].grid-align-top > [class*="col-md"] {
 161   vertical-align: top;
 162 }
 163 .grid > [class*="col-md"].grid-align-middle > [class*="col-md"] {
 164   vertical-align: middle;
 165 }
 166 .grid > [class*="col-md"].grid-align-bottom > [class*="col-md"] {
 167   vertical-align: bottom;
 168 }
 169
 170 /* Extra Styles */
 171 img.shadow {
 172   -webkit-border-radius: 3px;
 173   -moz-border-radius: 3px;
 174   -ms-border-radius: 3px;
 175   -o-border-radius: 3px;
 176   border-radius: 3px;
 177   -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
 178   -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
 179   box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
 180   margin: 0 auto;
 181 }
 182
 183 h1.text-muted, h2.text-muted, h3.text-muted {
 184   margin-top: 10px;
 185 }
 186
 187 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
 188 .navbar.navbar-default.navbar-static-top {
 189   margin-bottom: 0;
 190 }
 191
 192 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 193 html, body, #wrapwrap {
 194   -webkit-box-sizing: border-box;
 195   -moz-box-sizing: border-box;
 196   box-sizing: border-box;
 197   height: 100%;
 198 }
 199
 200 #wrapwrap {
 201   display: table;
 202   width: 100%;
 203 }
 204
 205 header, #wrap, footer {
 206   display: table-row;
 207 }
 208
 209 footer {
 210   height: 100%;
 211   background: #eff8f8;
 212   background: rgba(100, 200, 200, 0.1);
 213 }
 214
 215 #footer_container {
 216   padding-top: 24px;
 217   padding-bottom: 12px;
 218 }
 219
 220 /* ----- BOOTSTRAP FIX ----- */
 221 .col-md-12 {
 222   float: left;
 223   width: 100%;
 224 }
 225
 226 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 227 .oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
 228   background-image: url("/website/static/src/img/drag_here.png");
 229 }
 230
 231 .oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
 232   background-image: url("/website/static/src/img/edit_here.png");
 233   background-repeat: no-repeat;
 234   background-position: center;
 235   height: 220px !important;
 236 }
 237
 238 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
 239   position: static;
 240 }
 241
 242 .oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
 243   content: "Press The Top-Left Edit Button";
 244   text-align: center;
 245   display: block;
 246   padding-top: 160px;
 247   padding-bottom: 30px;
 248   color: grey;
 249   font-size: 24px;
 250 }
 251
 252 .oe_structure.oe_editable.oe_empty:empty:before, .oe_editable[data-oe-type=html]:empty:before, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
 253   content: "Drag Building Blocks Here";
 254 }
 255
 256 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 257 .navbar .nav > li > p {
 258   margin-bottom: 0px;
 259 }
 260
 261 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 262 .nav-hierarchy {
 263   padding-left: 16px;
 264 }
 265
 266 #themes-list .well {
 267   padding: 0 0 20px 0;
 268 }
 269
 270 /* -- Hack for removing double scrollbar from mobile preview -- */
 271 div#mobile-preview.modal {
 272   overflow: hidden;
 273   overflow-y: hidden;
 274 }
 275
 276 ul.nav-stacked > li > a {
 277   padding: 2px 15px;
 278 }
 279
 280 #customize-menu .dropdown-header {
 281   text-transform: uppercase;
 282 }
 283
 284 /* ---- PUBLISH ---- */
 285 .css_unpublish, .css_publish {
 286   display: none;
 287 }
 288
 289 .css_published .css_unpublish, .css_unpublished .css_publish {
 290   display: block;
 291 }
 292
 293 [data-publish='off'] {
 294   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
 295   opacity: 0.5;
 296 }
 297
 298 /* ---- END of PUBLISH ---- */
 299 ::-moz-selection {
 300   background: rgba(150, 150, 220, 0.3);
 301 }
 302
 303 ::selection {
 304   background: rgba(150, 150, 220, 0.3);
 305 }
 306
 307 .logo-img {
 308   width: 220px;
 309 }
 310
 311 .oe_demo {
 312   position: relative;
 313 }
 314 .oe_demo img {
 315   width: 100%;
 316 }
 317 .oe_demo div {
 318   position: absolute;
 319   left: 0;
 320   background-color: rgba(0, 0, 0, 0.4);
 321   opacity: 0.85;
 322   bottom: 0px;
 323   width: 100%;
 324   padding: 7px;
 325   color: white;
 326   font-weight: bold;
 327 }
 328 .oe_demo div a {
 329   color: white;
 330 }
 331
 332 /* ---- SNIPPETS --- */
 333 .carousel-inner .item {
 334   height: 100%;
 335   background-size: 100%;
 336 }
 337
 338 .carousel.oe_small .carousel-inner {
 339   height: 200px;
 340 }
 341 .carousel.oe_medium .carousel-inner {
 342   height: 300px;
 343 }
 344 .carousel.oe_big .carousel-inner {
 345   height: 450px;
 346 }
 347 .carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 {
 348   margin-top: 10px;
 349   margin-bottom: 10px;
 350 }
 351 .carousel .carousel-image {
 352   right: 10%;
 353   left: 50%;
 354   top: 5%;
 355   bottom: 5%;
 356   position: absolute;
 357   text-align: center;
 358 }
 359 .carousel .carousel-image img {
 360   height: 100%;
 361   margin: 0 auto;
 362 }
 363 .carousel .item.text_image .carousel-caption {
 364   left: auto;
 365   right: auto;
 366   bottom: 10%;
 367   text-align: left;
 368   padding: 20px;
 369   background: rgba(0, 0, 0, 0.4);
 370 }
 371 .carousel .item.text_only .carousel-image {
 372   display: none !important;
 373 }
 374 .carousel .item.text_only .carousel-caption {
 375   left: 10%;
 376   right: 10%;
 377   top: 10%;
 378   text-align: center;
 379 }
 380 .carousel .item.image_text .carousel-caption {
 381   left: auto;
 382   text-align: left;
 383   right: 10%;
 384   bottom: 10%;
 385   padding: 20px;
 386   background: rgba(0, 0, 0, 0.4);
 387 }
 388 .carousel .item.image_text .carousel-image {
 389   right: 50%;
 390   left: 10%;
 391 }
 392 .carousel .carousel-control {
 393   cursor: pointer;
 394 }
 395 .carousel .carousel-control span {
 396   top: 50%;
 397   position: absolute;
 398   margin-top: -8px;
 399 }
 400 .carousel .carousel-control.left span {
 401   left: 10px;
 402 }
 403 .carousel .carousel-control.right span {
 404   right: 10px;
 405 }
 406
 407 /* Parallax Theme */
 408 .parallax_quote {
 409   background: url("/website/static/src/img/parallax/quote.png") center center no-repeat fixed;
 410   background-size: contain;
 411 }
 412 .parallax_quote .carousel-indicators li {
 413   border: 1px solid grey;
 414 }
 415 .parallax_quote .carousel-indicators .active {
 416   background-color: grey;
 417 }
 418
 419 .parallax {
 420   position: relative;
 421   background-size: 100%;
 422 }
 423 .parallax.oe_small {
 424   height: 200px;
 425 }
 426 .parallax.oe_medium {
 427   height: 300px;
 428 }
 429 .parallax.oe_big {
 430   height: 450px;
 431 }
 432
 433 /* Background */
 434 .oe_dark {
 435   background: #eff8f8;
 436   background: rgba(100, 200, 200, 0.14);
 437   background-image: none !important;
 438   -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
 439   -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
 440   box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
 441 }
 442
 443 .oe_black {
 444   background-color: rgba(0, 0, 0, 0.9);
 445   background-image: none !important;
 446 }
 447
 448 .oe_green {
 449   background-color: rgba(0, 128, 0, 0.8);
 450   background-image: none !important;
 451 }
 452
 453 .oe_red {
 454   background-color: rgba(255, 0, 0, 0.8);
 455   background-image: none !important;
 456 }
 457
 458 .oe_custom_bg {
 459   height: 100%;
 460   background-size: 100%;
 461 }