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