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   -moz-border-radius: 3px;
  85   -webkit-border-radius: 3px;
  86   border-radius: 3px;
  87   -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
  88   -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
  89   box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
  90   margin: 0 auto;
  91 }
  92
  93 h1.text-muted, h2.text-muted, h3.text-muted {
  94   margin-top: 10px;
  95 }
  96
  97 header a.navbar-brand.logo {
  98   padding: 0 15px;
  99 }
 100 header a.navbar-brand img {
 101   max-height: 50px;
 102 }
 103
 104 #wrapwrap p:empty:after {
 105   content: "⁠";
 106 }
 107
 108 /* ----- Snippets Styles ----- */
 109 .para_large {
 110   font-size: 120%;
 111 }
 112
 113 .readable {
 114   font-size: 120%;
 115   max-width: 700px;
 116   margin-left: auto;
 117   margin-right: auto;
 118 }
 119
 120 /* ----- EDITOR ----- */
 121 #oe_main_menu_navbar {
 122   min-height: 34px;
 123   z-index: 1001;
 124   -moz-border-radius: 0px;
 125   -webkit-border-radius: 0px;
 126   border-radius: 0px;
 127   margin-bottom: 0px;
 128 }
 129 #oe_main_menu_navbar li a, #oe_main_menu_navbar li button {
 130   padding: 4px 8px 4px 8px;
 131   margin-top: 2px;
 132   font-size: 13px;
 133 }
 134 #oe_main_menu_navbar .navbar-nav.navbar-right:last-child {
 135   margin-right: 0 !important;
 136 }
 137
 138 .css_non_editable_mode_hidden {
 139   display: none !important;
 140 }
 141
 142 /* ----- BOOTSTRAP FIX ----- */
 143 .container .container, .readable .container {
 144   padding-left: 0;
 145   padding-right: 0;
 146   width: auto;
 147 }
 148
 149 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
 150 .navbar.navbar-static-top {
 151   margin-bottom: 0;
 152 }
 153 .navbar.navbar-static-top ul.nav > li.divider {
 154   margin-top: 15px;
 155   padding-top: 20px;
 156   border-right: 1px solid grey;
 157 }
 158
 159 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 160 html, body, #wrapwrap {
 161   -moz-box-sizing: border-box;
 162   -webkit-box-sizing: border-box;
 163   box-sizing: border-box;
 164   height: 100%;
 165 }
 166
 167 #wrapwrap {
 168   display: table;
 169   width: 100%;
 170 }
 171
 172 header, main, footer {
 173   display: table-row;
 174 }
 175
 176 footer {
 177   height: 100%;
 178   background: #eff8f8;
 179   background: rgba(200, 200, 200, 0.1);
 180 }
 181
 182 #footer_container, #footer {
 183   padding-top: 24px;
 184   padding-bottom: 12px;
 185 }
 186
 187 /* ----- BOOTSTRAP FIX ----- */
 188 .col-md-12 {
 189   float: left;
 190   width: 100%;
 191 }
 192
 193 @-moz-document url-prefix() {
 194   .table .img-responsive {
 195     width: 100%;
 196   }
 197 }
 198 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 199 .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 {
 200   background-image: url("/website/static/src/img/drag_here.png") !important;
 201 }
 202
 203 .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 {
 204   background-image: none;
 205   background-repeat: no-repeat;
 206   background-position: center;
 207   height: 220px !important;
 208 }
 209
 210 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
 211   position: static;
 212 }
 213
 214 .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 {
 215   content: " ";
 216   text-align: center;
 217   display: block;
 218   padding-top: 160px;
 219   padding-bottom: 30px;
 220   color: grey;
 221   font-size: 24px;
 222 }
 223
 224 .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 {
 225   content: "Drag Building Blocks Here" !important;
 226 }
 227
 228 .css_editable_display {
 229   display: none;
 230 }
 231
 232 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 233 .navbar .nav > li > p {
 234   margin-bottom: 0px;
 235 }
 236
 237 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
 238 .nav-hierarchy {
 239   padding-left: 16px;
 240 }
 241
 242 /* -- Hack for removing double scrollbar from mobile preview -- */
 243 div#mobile-preview.modal {
 244   overflow: hidden;
 245 }
 246
 247 ul.nav-stacked > li > a {
 248   padding: 2px 15px;
 249 }
 250
 251 #customize-menu .dropdown-header {
 252   text-transform: uppercase;
 253 }
 254
 255 /* ---- PUBLISH ---- */
 256 .css_published .btn-danger, .css_published .css_publish {
 257   display: none;
 258 }
 259
 260 .css_unpublished .btn-success, .css_unpublished .css_unpublish {
 261   display: none;
 262 }
 263
 264 [data-publish='off'] > *:not(.css_options) {
 265   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
 266   opacity: 0.5;
 267 }
 268
 269 /* ---- END of PUBLISH ---- */
 270 ::-moz-selection {
 271   background: rgba(150, 150, 220, 0.3);
 272 }
 273
 274 ::selection {
 275   background: rgba(150, 150, 220, 0.3);
 276 }
 277
 278 .logo-img {
 279   width: 220px;
 280 }
 281
 282 .oe_demo {
 283   position: relative;
 284 }
 285 .oe_demo img {
 286   width: 100%;
 287 }
 288 .oe_demo div {
 289   position: absolute;
 290   left: 0;
 291   background-color: rgba(0, 0, 0, 0.4);
 292   opacity: 0.85;
 293   bottom: 0px;
 294   width: 100%;
 295   padding: 7px;
 296   color: white;
 297   font-weight: bold;
 298 }
 299 .oe_demo div a {
 300   color: white;
 301 }
 302
 303 /* ---- SNIPPETS --- */
 304 .oe_img_bg {
 305   background-size: 100%;
 306 }
 307
 308 .carousel, .parallax, .blockquote {
 309   overflow: hidden;
 310 }
 311
 312 @media (max-width: 400px) {
 313   section, .parallax, .row, .hr, .blockquote {
 314     height: auto !important;
 315   }
 316 }
 317 .carousel-inner {
 318   height: 100%;
 319 }
 320 .carousel-inner .item {
 321   height: 100%;
 322   background-size: cover;
 323 }
 324
 325 .carousel .carousel-control {
 326   cursor: pointer;
 327 }
 328 .carousel .carousel-control span {
 329   top: 50%;
 330   position: absolute;
 331   margin-top: -8px;
 332 }
 333 .carousel .carousel-control.left {
 334   left: -10px;
 335 }
 336 .carousel .carousel-control.left * {
 337   position: absolute;
 338   top: 50%;
 339   z-index: 5;
 340   right: 50%;
 341 }
 342 .carousel .carousel-control.right {
 343   right: -10px;
 344 }
 345 .carousel .carousel-control.right * {
 346   position: absolute;
 347   top: 50%;
 348   z-index: 5;
 349   left: 50%;
 350 }
 351
 352 .quotecarousel {
 353   padding-bottom: 16px;
 354 }
 355
 356 .hr {
 357   padding: 4px 0;
 358 }
 359
 360 .o_image_floating {
 361   width: 40%;
 362   margin: 4px;
 363 }
 364 .o_image_floating div.o_container {
 365   position: relative;
 366 }
 367 .o_image_floating div.o_container mark {
 368   display: block;
 369   position: absolute;
 370   bottom: 0;
 371   width: 100%;
 372   background-color: rgba(86, 61, 124, 0.25);
 373 }
 374 .o_image_floating div.o_container mark a {
 375   color: white;
 376 }
 377 .o_image_floating.o_hide_link div.o_container mark {
 378   display: none;
 379 }
 380 .o_image_floating.o_margin_s {
 381   margin-bottom: 4px;
 382 }
 383 .o_image_floating.o_margin_s.pull-right {
 384   margin-left: 8px;
 385 }
 386 .o_image_floating.o_margin_s.pull-left {
 387   margin-right: 8px;
 388 }
 389 .o_image_floating.o_margin_m {
 390   margin-bottom: 8px;
 391 }
 392 .o_image_floating.o_margin_m.pull-right {
 393   margin-left: 12px;
 394 }
 395 .o_image_floating.o_margin_m.pull-left {
 396   margin-right: 12px;
 397 }
 398 .o_image_floating.o_margin_l {
 399   margin-bottom: 12px;
 400 }
 401 .o_image_floating.o_margin_l.pull-right {
 402   margin-left: 16px;
 403 }
 404 .o_image_floating.o_margin_l.pull-left {
 405   margin-right: 16px;
 406 }
 407 .o_image_floating.o_margin_xl {
 408   margin-bottom: 24px;
 409 }
 410 .o_image_floating.o_margin_xl.pull-right {
 411   margin-left: 32px;
 412 }
 413 .o_image_floating.o_margin_xl.pull-left {
 414   margin-right: 32px;
 415 }
 416
 417 /* gallery */
 418 .o_gallery.o_grid.o_spc-none div.row, .o_gallery.o_masonry.o_spc-none div.row {
 419   margin: 0;
 420 }
 421 .o_gallery.o_grid.o_spc-none div.row > *, .o_gallery.o_masonry.o_spc-none div.row > * {
 422   padding: 0;
 423 }
 424 .o_gallery.o_grid.o_spc-small div.row, .o_gallery.o_masonry.o_spc-small div.row {
 425   margin: 5px 0;
 426 }
 427 .o_gallery.o_grid.o_spc-small div.row > *, .o_gallery.o_masonry.o_spc-small div.row > * {
 428   padding: 0 5px;
 429 }
 430 .o_gallery.o_grid.o_spc-medium div.row, .o_gallery.o_masonry.o_spc-medium div.row {
 431   margin: 10px 0;
 432 }
 433 .o_gallery.o_grid.o_spc-medium div.row > *, .o_gallery.o_masonry.o_spc-medium div.row > * {
 434   padding: 0 10px;
 435 }
 436 .o_gallery.o_grid.o_spc-big div.row, .o_gallery.o_masonry.o_spc-big div.row {
 437   margin: 15px 0;
 438 }
 439 .o_gallery.o_grid.o_spc-big div.row > *, .o_gallery.o_masonry.o_spc-big div.row > * {
 440   padding: 0 15px;
 441 }
 442 .o_gallery.o_grid .img, .o_gallery.o_masonry .img {
 443   width: 100%;
 444 }
 445 .o_gallery.o_grid.size-auto .row {
 446   height: auto;
 447 }
 448 .o_gallery.o_grid.size-small .row {
 449   height: 100px;
 450 }
 451 .o_gallery.o_grid.size-medium .row {
 452   height: 250px;
 453 }
 454 .o_gallery.o_grid.size-big .row {
 455   height: 400px;
 456 }
 457 .o_gallery.o_grid.size-small .img, .o_gallery.o_grid.size-medium .img, .o_gallery.o_grid.size-big .img {
 458   height: 100%;
 459 }
 460 .o_gallery.o_nomode.o_spc-none .img {
 461   padding: 0;
 462 }
 463 .o_gallery.o_nomode.o_spc-small .img {
 464   padding: 5px;
 465 }
 466 .o_gallery.o_nomode.o_spc-medium .img {
 467   padding: 10px;
 468 }
 469 .o_gallery.o_nomode.o_spc-big .img {
 470   padding: 15px;
 471 }
 472 .o_gallery.o_slideshow .carousel ul.carousel-indicators li {
 473   border: 1px solid #aaa;
 474 }
 475 .o_gallery .carousel-inner .item img {
 476   max-width: none;
 477 }
 478
 479 .o_gallery.o_slideshow > .container {
 480   height: 100%;
 481 }
 482
 483 .o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel {
 484   height: 100%;
 485 }
 486 .o_gallery.o_slideshow .carousel img, .modal-body.o_slideshow .carousel img {
 487   max-height: 100%;
 488   max-width: 100%;
 489   margin: auto;
 490   position: relative;
 491   top: 50%;
 492   -webkit-transform: translateY(-50%);
 493   -ms-transform: translateY(-50%);
 494   transform: translateY(-50%);
 495 }
 496 .o_gallery.o_slideshow .carousel ul.carousel-indicators, .modal-body.o_slideshow .carousel ul.carousel-indicators {
 497   display: block;
 498   height: auto;
 499   padding: 0;
 500   border-width: 0;
 501   position: absolute;
 502   bottom: 0;
 503 }
 504 .o_gallery.o_slideshow .carousel ul.carousel-indicators li, .modal-body.o_slideshow .carousel ul.carousel-indicators li {
 505   list-style-image: none;
 506   display: inline-block;
 507   width: 35px;
 508   height: 35px;
 509   margin: 0 0px 5px 5px;
 510   padding: 0;
 511   border: 1px solid #aaa;
 512   text-indent: initial;
 513   background-size: cover;
 514   opacity: 0.5;
 515   background-color: #000;
 516 }
 517 .o_gallery.o_slideshow .carousel ul.carousel-indicators li.active, .modal-body.o_slideshow .carousel ul.carousel-indicators li.active {
 518   opacity: 1;
 519 }
 520 .o_gallery.o_slideshow .carousel .carousel-control.left, .o_gallery.o_slideshow .carousel .carousel-control.right, .modal-body.o_slideshow .carousel .carousel-control.left, .modal-body.o_slideshow .carousel .carousel-control.right {
 521   background-image: none;
 522   background-color: transparent;
 523 }
 524
 525 /* Parallax Theme */
 526 div.carousel .carousel-indicators li {
 527   border: 1px solid grey;
 528 }
 529 div.carousel .carousel-indicators .active {
 530   background-color: grey;
 531 }
 532 div.carousel span.carousel-img img, div.carousel div.carousel-content {
 533   max-height: 95%;
 534   padding: 10px;
 535 }
 536 div.carousel div.carousel-content {
 537   background-color: black;
 538   color: white;
 539   background: rgba(0, 0, 0, 0.3);
 540   margin-top: 75px;
 541 }
 542
 543 .parallax {
 544   background-size: cover;
 545 }
 546 .parallax > div {
 547   position: relative;
 548   display: table;
 549   width: 100%;
 550   min-height: 200px;
 551 }
 552 .parallax > div > div {
 553   display: table-cell;
 554   vertical-align: middle;
 555   padding: 32px 0;
 556 }
 557
 558 /* Background (kept for 8.0 compatibility) */
 559 .oe_dark {
 560   background: #eff8f8;
 561   background: rgba(200, 200, 200, 0.14);
 562 }
 563
 564 .oe_black {
 565   background-color: rgba(0, 0, 0, 0.9);
 566   color: white;
 567 }
 568
 569 .oe_green {
 570   background-color: #169C78;
 571   color: white;
 572 }
 573 .oe_green .text-muted {
 574   color: #ddd;
 575 }
 576
 577 .oe_blue_light {
 578   background-color: #41b6ab;
 579   color: white;
 580 }
 581 .oe_blue_light .text-muted {
 582   color: #ddd;
 583 }
 584
 585 .oe_blue {
 586   background-color: #34495e;
 587   color: white;
 588 }
 589
 590 .oe_orange {
 591   background-color: #f05442;
 592   color: white;
 593 }
 594 .oe_orange .text-muted {
 595   color: #ddd;
 596 }
 597
 598 .oe_purple {
 599   background-color: #b163a3;
 600   color: white;
 601 }
 602 .oe_purple .text-muted {
 603   color: #ddd;
 604 }
 605
 606 .oe_red {
 607   background-color: #9C1b31;
 608   color: white;
 609 }
 610 .oe_red .text-muted {
 611   color: #ddd;
 612 }
 613
 614 /* Misc */
 615 .texttop {
 616   vertical-align: top;
 617 }
 618
 619 table.well tr th {
 620   text-align: right;
 621   padding-right: 10px;
 622 }
 623 table.well tr td {
 624   padding-right: 5px;
 625 }
 626
 627 .logo-img {
 628   width: 220px;
 629 }
 630
 631 .oe_demo {
 632   position: relative;
 633 }
 634 .oe_demo img {
 635   width: 100%;
 636 }
 637 .oe_demo div {
 638   position: absolute;
 639   left: 0;
 640   background-color: rgba(0, 0, 0, 0.4);
 641   opacity: 0.85;
 642   bottom: 0px;
 643   width: 100%;
 644   padding: 7px;
 645   color: white;
 646   font-weight: bold;
 647 }
 648 .oe_demo div a {
 649   color: white;
 650 }
 651
 652 address .fa.fa-mobile-phone {
 653   margin: 0 3px 0 2px;
 654 }
 655 address .fa.fa-file-text-o {
 656   margin-right: 1px;
 657 }
 658
 659 span[data-oe-type="monetary"] {
 660   white-space: nowrap;
 661 }
 662
 663 .oe_template_fallback {
 664   -moz-column-count: 3;
 665   -webkit-column-count: 3;
 666   column-count: 3;
 667 }
 668
 669 .oe_website_login_container {
 670   width: 400px;
 671   margin: 40px auto;
 672 }
 673
 674 .oe_website_spinner {
 675   width: 121px;
 676 }
 677 .oe_website_spinner input {
 678   text-align: center;
 679 }
 680
 681 div.media_iframe_video {
 682   height: 0;
 683   margin: 0 auto;
 684   text-align: center;
 685   position: relative;
 686   overflow: hidden;
 687   padding-bottom: 66.5%;
 688 }
 689 div.media_iframe_video iframe {
 690   width: 100%;
 691   height: 100%;
 692   position: absolute;
 693   margin-left: -50%;
 694 }
 695 div.media_iframe_video .css_editable_mode_display {
 696   position: absolute;
 697   width: 100%;
 698   height: 100%;
 699   display: none;
 700   z-index: 2;
 701 }
 702
 703 /* Mobile view */
 704 @media (max-width: 768px) {
 705   img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
 706     -webkit-transform: none !important;
 707     -moz-transform: none !important;
 708     -ms-transform: none !important;
 709     -o-transform: none !important;
 710     transform: none !important;
 711   }
 712 }
 713 /* Fix: backward compatibility saas-3 */
 714 div.carousel .container > .carousel-caption {
 715   position: absolute;
 716   right: 50%;
 717   left: 50%;
 718   bottom: 20px;
 719 }
 720 div.carousel .container > .carousel-caption > div {
 721   position: absolute;
 722   text-align: left;
 723   padding: 20px;
 724   background: rgba(0, 0, 0, 0.4);
 725   bottom: 20px;
 726 }
 727 div.carousel .container > .carousel-image {
 728   top: 5%;
 729   bottom: 5%;
 730   position: absolute;
 731   max-height: 90%;
 732   margin: 0 auto;
 733 }
 734 div.carousel .item.text_image .container > .carousel-caption {
 735   left: 10%;
 736 }
 737 div.carousel .item.text_image .container > .carousel-caption > div {
 738   right: 50%;
 739   margin-right: -20%;
 740   max-width: 550px;
 741 }
 742 div.carousel .item.text_image .container > .carousel-image {
 743   right: 10%;
 744   left: 50%;
 745 }
 746 div.carousel .item.image_text .container > .carousel-caption {
 747   right: 10%;
 748 }
 749 div.carousel .item.image_text .container > .carousel-caption > div {
 750   left: 50%;
 751   margin-left: -20%;
 752   max-width: 550px;
 753 }
 754 div.carousel .item.image_text .container > .carousel-image {
 755   right: 50%;
 756   left: 10%;
 757 }
 758 div.carousel .item.text_only .container > .carousel-caption {
 759   left: 10%;
 760   right: 10%;
 761   top: 10%;
 762   bottom: auto;
 763 }
 764 div.carousel .item.text_only .container > .carousel-caption > div {
 765   text-align: center;
 766   background: transparent;
 767   bottom: auto;
 768   width: 100%;
 769 }
 770 div.carousel .item.text_only .container > .carousel-image {
 771   display: none !important;
 772 }