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