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

   1 @charset "utf-8";
   2 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
   3  *
   4  * css for editor buttons, openerp widget included in the website and other
   5  * stuff must go to the editor.css
   6  *
   7  */
   8 /* ----- GENERIC LAYOUTING HELPERS ---- */
   9 /* Vertical Spacing */
  10 .mt128 {
  11   margin-top: 128px !important;
  12 }
  13
  14 .mt92 {
  15   margin-top: 92px !important;
  16 }
  17
  18 .mt64 {
  19   margin-top: 64px !important;
  20 }
  21
  22 .mt48 {
  23   margin-top: 48px !important;
  24 }
  25
  26 .mt32 {
  27   margin-top: 32px !important;
  28 }
  29
  30 .mt16 {
  31   margin-top: 16px !important;
  32 }
  33
  34 .mt8 {
  35   margin-top: 8px !important;
  36 }
  37
  38 .mt4 {
  39   margin-top: 4px !important;
  40 }
  41
  42 .mt0 {
  43   margin-top: 0px !important;
  44 }
  45
  46 .mb128 {
  47   margin-bottom: 128px !important;
  48 }
  49
  50 .mb92 {
  51   margin-bottom: 92px !important;
  52 }
  53
  54 .mb64 {
  55   margin-bottom: 64px !important;
  56 }
  57
  58 .mb48 {
  59   margin-bottom: 48px !important;
  60 }
  61
  62 .mb32 {
  63   margin-bottom: 32px !important;
  64 }
  65
  66 .mb16 {
  67   margin-bottom: 16px !important;
  68 }
  69
  70 .mb8 {
  71   margin-bottom: 8px !important;
  72 }
  73
  74 .mb4 {
  75   margin-bottom: 4px !important;
  76 }
  77
  78 .mb0 {
  79   margin-bottom: 0px !important;
  80 }
  81
  82 /* Extra Styles */
  83 img.shadow {
  84   -webkit-border-radius: 3px;
  85   -moz-border-radius: 3px;
  86   -ms-border-radius: 3px;
  87   -o-border-radius: 3px;
  88   border-radius: 3px;
  89   -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
  90   -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
  91   box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
  92   margin: 0 auto;
  93 }
  94
  95 h1.text-muted, h2.text-muted, h3.text-muted {
  96   margin-top: 10px;
  97 }
  98
  99 header a.navbar-brand.logo {
 100   padding: 0 15px;
 101 }
 102 header a.navbar-brand img {
 103   max-height: 50px;
 104 }
 105
 106 #wrapwrap p:empty:after {
 107   content: "\2060";
 108 }
 109
 110 /* ----- Snippets Styles ----- */
 111 .para_large {
 112   font-size: 120%;
 113 }
 114
 115 .readable {
 116   font-size: 120%;
 117   max-width: 700px;
 118   margin-left: auto;
 119   margin-right: auto;
 120 }
 121
 122 /* ----- EDITOR ----- */
 123 #oe_main_menu_navbar {
 124   min-height: 34px;
 125   z-index: 1001;
 126   -webkit-border-radius: 0px;
 127   -moz-border-radius: 0px;
 128   -ms-border-radius: 0px;
 129   -o-border-radius: 0px;
 130   border-radius: 0px;
 131   margin-bottom: 0px;
 132 }
 133 #oe_main_menu_navbar li a, #oe_main_menu_navbar li button {
 134   padding: 4px 8px 4px 8px;
 135   margin-top: 2px;
 136   font-size: 13px;
 137 }
 138 #oe_main_menu_navbar .navbar-nav.navbar-right:last-child {
 139   margin-right: 0 !important;
 140 }
 141
 142 .css_non_editable_mode_hidden {
 143   display: none !important;
 144 }
 145
 146 /* ----- BOOTSTRAP FIX ----- */
 147 .container .container, .readable .container {
 148   padding-left: 0;
 149   padding-right: 0;
 150   width: auto;
 151 }
 152
 153 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
 154 .navbar.navbar-static-top {
 155   margin-bottom: 0;
 156 }
 157 .navbar.navbar-static-top ul.nav > li.divider {
 158   margin-top: 15px;
 159   padding-top: 20px;
 160   border-right: 1px solid grey;
 161 }
 162
 163 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 164 html, body, #wrapwrap {
 165   -webkit-box-sizing: border-box;
 166   -moz-box-sizing: border-box;
 167   box-sizing: border-box;
 168   height: 100%;
 169 }
 170
 171 #wrapwrap {
 172   display: table;
 173   width: 100%;
 174 }
 175
 176 header, main, footer {
 177   display: table-row;
 178 }
 179
 180 footer {
 181   height: 100%;
 182   background: #eff8f8;
 183   background: rgba(200, 200, 200, 0.1);
 184 }
 185
 186 #footer_container, #footer {
 187   padding-top: 24px;
 188   padding-bottom: 12px;
 189 }
 190
 191 /* ----- BOOTSTRAP FIX ----- */
 192 .col-md-12 {
 193   float: left;
 194   width: 100%;
 195 }
 196
 197 @-moz-document url-prefix() {
 198   .table .img-responsive {
 199     width: 100%;
 200   }
 201 }
 202 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 203 .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 {
 204   background-image: url("/website/static/src/img/drag_here.png") !important;
 205 }
 206
 207 .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 {
 208   background-image: none;
 209   background-repeat: no-repeat;
 210   background-position: center;
 211   height: 220px !important;
 212 }
 213
 214 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
 215   position: static;
 216 }
 217
 218 .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 {
 219   content: " ";
 220   text-align: center;
 221   display: block;
 222   padding-top: 160px;
 223   padding-bottom: 30px;
 224   color: grey;
 225   font-size: 24px;
 226 }
 227
 228 .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 {
 229   content: "Drag Building Blocks Here" !important;
 230 }
 231
 232 .css_editable_display {
 233   display: none;
 234 }
 235
 236 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 237 .navbar .nav > li > p {
 238   margin-bottom: 0px;
 239 }
 240
 241 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 242 .nav-hierarchy {
 243   padding-left: 16px;
 244 }
 245
 246 #themes-list .well {
 247   padding: 0 0 20px 0;
 248 }
 249
 250 /* -- Hack for removing double scrollbar from mobile preview -- */
 251 div#mobile-preview.modal {
 252   overflow: hidden;
 253 }
 254
 255 ul.nav-stacked > li > a {
 256   padding: 2px 15px;
 257 }
 258
 259 #customize-menu .dropdown-header {
 260   text-transform: uppercase;
 261 }
 262
 263 /* ---- PUBLISH ---- */
 264 .css_published .btn-danger, .css_published .css_publish {
 265   display: none;
 266 }
 267
 268 .css_unpublished .btn-success, .css_unpublished .css_unpublish {
 269   display: none;
 270 }
 271
 272 [data-publish='off'] > *:not(.css_options) {
 273   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
 274   opacity: 0.5;
 275 }
 276
 277 /* ---- END of PUBLISH ---- */
 278 ::-moz-selection {
 279   background: rgba(150, 150, 220, 0.3);
 280 }
 281
 282 ::selection {
 283   background: rgba(150, 150, 220, 0.3);
 284 }
 285
 286 .logo-img {
 287   width: 220px;
 288 }
 289
 290 .oe_demo {
 291   position: relative;
 292 }
 293 .oe_demo img {
 294   width: 100%;
 295 }
 296 .oe_demo div {
 297   position: absolute;
 298   left: 0;
 299   background-color: rgba(0, 0, 0, 0.4);
 300   opacity: 0.85;
 301   bottom: 0px;
 302   width: 100%;
 303   padding: 7px;
 304   color: white;
 305   font-weight: bold;
 306 }
 307 .oe_demo div a {
 308   color: white;
 309 }
 310
 311 /* ---- SNIPPETS --- */
 312 .oe_img_bg {
 313   background-size: 100%;
 314 }
 315
 316 .carousel, .parallax, .blockquote {
 317   overflow: hidden;
 318 }
 319
 320 @media (max-width: 400px) {
 321   section, .parallax, .row, .hr, .blockquote {
 322     height: auto !important;
 323   }
 324 }
 325 .carousel-inner {
 326   height: 100%;
 327 }
 328 .carousel-inner .item {
 329   height: 100%;
 330   background-size: cover;
 331 }
 332
 333 .carousel .carousel-control {
 334   cursor: pointer;
 335 }
 336 .carousel .carousel-control span {
 337   top: 50%;
 338   position: absolute;
 339   margin-top: -8px;
 340 }
 341 .carousel .carousel-control.left {
 342   left: -10px;
 343 }
 344 .carousel .carousel-control.left * {
 345   position: absolute;
 346   top: 50%;
 347   z-index: 5;
 348   right: 50%;
 349 }
 350 .carousel .carousel-control.right {
 351   right: -10px;
 352 }
 353 .carousel .carousel-control.right * {
 354   position: absolute;
 355   top: 50%;
 356   z-index: 5;
 357   left: 50%;
 358 }
 359
 360 .quotecarousel {
 361   padding-bottom: 16px;
 362 }
 363
 364 .hr {
 365   padding: 4px 0;
 366 }
 367
 368 .o_image_floating {
 369   width: 40%;
 370   margin: 4px;
 371 }
 372 .o_image_floating div.o_container {
 373   position: relative;
 374 }
 375 .o_image_floating div.o_container mark {
 376   display: block;
 377   position: absolute;
 378   bottom: 0;
 379   width: 100%;
 380   background-color: rgba(86, 61, 124, 0.25);
 381 }
 382 .o_image_floating div.o_container mark a {
 383   color: white;
 384 }
 385 .o_image_floating.o_hide_link div.o_container mark {
 386   display: none;
 387 }
 388 .o_image_floating.o_margin_s {
 389   margin-bottom: 4px;
 390 }
 391 .o_image_floating.o_margin_s.pull-right {
 392   margin-left: 8px;
 393 }
 394 .o_image_floating.o_margin_s.pull-left {
 395   margin-right: 8px;
 396 }
 397 .o_image_floating.o_margin_m {
 398   margin-bottom: 8px;
 399 }
 400 .o_image_floating.o_margin_m.pull-right {
 401   margin-left: 12px;
 402 }
 403 .o_image_floating.o_margin_m.pull-left {
 404   margin-right: 12px;
 405 }
 406 .o_image_floating.o_margin_l {
 407   margin-bottom: 12px;
 408 }
 409 .o_image_floating.o_margin_l.pull-right {
 410   margin-left: 16px;
 411 }
 412 .o_image_floating.o_margin_l.pull-left {
 413   margin-right: 16px;
 414 }
 415 .o_image_floating.o_margin_xl {
 416   margin-bottom: 24px;
 417 }
 418 .o_image_floating.o_margin_xl.pull-right {
 419   margin-left: 32px;
 420 }
 421 .o_image_floating.o_margin_xl.pull-left {
 422   margin-right: 32px;
 423 }
 424
 425 /* Parallax Theme */
 426 div.carousel .carousel-indicators li {
 427   border: 1px solid grey;
 428 }
 429 div.carousel .carousel-indicators .active {
 430   background-color: grey;
 431 }
 432 div.carousel span.carousel-img img, div.carousel div.carousel-content {
 433   max-height: 95%;
 434   padding: 10px;
 435 }
 436 div.carousel div.carousel-content {
 437   background-color: black;
 438   color: white;
 439   background: rgba(0, 0, 0, 0.3);
 440   margin-top: 75px;
 441 }
 442
 443 .parallax {
 444   background-size: cover;
 445 }
 446 .parallax > div {
 447   position: relative;
 448   display: table;
 449   width: 100%;
 450   min-height: 200px;
 451 }
 452 .parallax > div > div {
 453   display: table-cell;
 454   vertical-align: middle;
 455   padding: 32px 0;
 456 }
 457
 458 /* Background */
 459 .oe_dark {
 460   background: #eff8f8;
 461   background: rgba(200, 200, 200, 0.14);
 462 }
 463
 464 .oe_black {
 465   background-color: rgba(0, 0, 0, 0.9);
 466   color: white;
 467 }
 468
 469 .oe_green {
 470   background-color: #169c78;
 471   color: white;
 472 }
 473 .oe_green .text-muted {
 474   color: #dddddd;
 475 }
 476
 477 .oe_blue_light {
 478   background-color: #41b6ab;
 479   color: white;
 480 }
 481 .oe_blue_light .text-muted {
 482   color: #dddddd;
 483 }
 484
 485 .oe_blue {
 486   background-color: #34495e;
 487   color: white;
 488 }
 489
 490 .oe_orange {
 491   background-color: #f05442;
 492   color: white;
 493 }
 494 .oe_orange .text-muted {
 495   color: #dddddd;
 496 }
 497
 498 .oe_purple {
 499   background-color: #b163a3;
 500   color: white;
 501 }
 502 .oe_purple .text-muted {
 503   color: #dddddd;
 504 }
 505
 506 .oe_red {
 507   background-color: #9c1b31;
 508   color: white;
 509 }
 510 .oe_red .text-muted {
 511   color: #dddddd;
 512 }
 513
 514 /* Misc */
 515 .texttop {
 516   vertical-align: top;
 517 }
 518
 519 table.well tr th {
 520   text-align: right;
 521   padding-right: 10px;
 522 }
 523 table.well tr td {
 524   padding-right: 5px;
 525 }
 526
 527 .logo-img {
 528   width: 220px;
 529 }
 530
 531 .oe_demo {
 532   position: relative;
 533 }
 534 .oe_demo img {
 535   width: 100%;
 536 }
 537 .oe_demo div {
 538   position: absolute;
 539   left: 0;
 540   background-color: rgba(0, 0, 0, 0.4);
 541   opacity: 0.85;
 542   bottom: 0px;
 543   width: 100%;
 544   padding: 7px;
 545   color: white;
 546   font-weight: bold;
 547 }
 548 .oe_demo div a {
 549   color: white;
 550 }
 551
 552 address .fa.fa-mobile-phone {
 553   margin: 0 3px 0 2px;
 554 }
 555 address .fa.fa-file-text-o {
 556   margin-right: 1px;
 557 }
 558
 559 span[data-oe-type="monetary"] {
 560   white-space: nowrap;
 561 }
 562
 563 .oe_template_fallback {
 564   -webkit-column-count: 3;
 565   -moz-column-count: 3;
 566   -ms-column-count: 3;
 567   -o-column-count: 3;
 568   column-count: 3;
 569 }
 570
 571 .oe_website_login_container {
 572   width: 400px;
 573   margin: 40px auto;
 574 }
 575
 576 .oe_website_spinner {
 577   width: 121px;
 578 }
 579 .oe_website_spinner input {
 580   text-align: center;
 581 }
 582
 583 div.media_iframe_video {
 584   height: 0;
 585   margin: 0 auto;
 586   text-align: center;
 587   position: relative;
 588   overflow: hidden;
 589   padding-bottom: 66.5%;
 590 }
 591 div.media_iframe_video iframe {
 592   width: 100%;
 593   height: 100%;
 594   position: absolute;
 595   margin-left: -50%;
 596 }
 597 div.media_iframe_video .css_editable_mode_display {
 598   position: absolute;
 599   width: 100%;
 600   height: 100%;
 601   display: none;
 602   z-index: 2;
 603 }
 604
 605 /* Mobile view */
 606 @media (max-width: 768px) {
 607   img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
 608     -webkit-transform: none !important;
 609     -moz-transform: none !important;
 610     -ms-transform: none !important;
 611     -o-transform: none !important;
 612     transform: none !important;
 613   }
 614 }
 615 /* Fix: backward compatibility saas-3 */
 616 div.carousel .container > .carousel-caption {
 617   position: absolute;
 618   right: 50%;
 619   left: 50%;
 620   bottom: 20px;
 621 }
 622 div.carousel .container > .carousel-caption > div {
 623   position: absolute;
 624   text-align: left;
 625   padding: 20px;
 626   background: rgba(0, 0, 0, 0.4);
 627   bottom: 20px;
 628 }
 629 div.carousel .container > .carousel-image {
 630   top: 5%;
 631   bottom: 5%;
 632   position: absolute;
 633   max-height: 90%;
 634   margin: 0 auto;
 635 }
 636 div.carousel .item.text_image .container > .carousel-caption {
 637   left: 10%;
 638 }
 639 div.carousel .item.text_image .container > .carousel-caption > div {
 640   right: 50%;
 641   margin-right: -20%;
 642   max-width: 550px;
 643 }
 644 div.carousel .item.text_image .container > .carousel-image {
 645   right: 10%;
 646   left: 50%;
 647 }
 648 div.carousel .item.image_text .container > .carousel-caption {
 649   right: 10%;
 650 }
 651 div.carousel .item.image_text .container > .carousel-caption > div {
 652   left: 50%;
 653   margin-left: -20%;
 654   max-width: 550px;
 655 }
 656 div.carousel .item.image_text .container > .carousel-image {
 657   right: 50%;
 658   left: 10%;
 659 }
 660 div.carousel .item.text_only .container > .carousel-caption {
 661   left: 10%;
 662   right: 10%;
 663   top: 10%;
 664   bottom: auto;
 665 }
 666 div.carousel .item.text_only .container > .carousel-caption > div {
 667   text-align: center;
 668   background: transparent;
 669   bottom: auto;
 670   width: 100%;
 671 }
 672 div.carousel .item.text_only .container > .carousel-image {
 673   display: none !important;
 674 }