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;
 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 {
 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 /* -- Hack for removing double scrollbar from mobile preview -- */
 242 div#mobile-preview.modal {
 243   overflow: hidden;
 244 }
 245
 246 ul.nav-stacked > li > a {
 247   padding: 2px 15px;
 248 }
 249
 250 #customize-menu .dropdown-header {
 251   text-transform: uppercase;
 252 }
 253
 254 /* ---- PUBLISH ---- */
 255 .css_published .btn-danger, .css_published .css_publish {
 256   display: none;
 257 }
 258
 259 .css_unpublished .btn-success, .css_unpublished .css_unpublish {
 260   display: none;
 261 }
 262
 263 [data-publish='off'] > *:not(.css_options) {
 264   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
 265   opacity: 0.5;
 266 }
 267
 268 /* ---- END of PUBLISH ---- */
 269 ::-moz-selection {
 270   background: rgba(150, 150, 220, 0.3);
 271 }
 272
 273 ::selection {
 274   background: rgba(150, 150, 220, 0.3);
 275 }
 276
 277 .logo-img {
 278   width: 220px;
 279 }
 280
 281 .oe_demo {
 282   position: relative;
 283 }
 284 .oe_demo img {
 285   width: 100%;
 286 }
 287 .oe_demo div {
 288   position: absolute;
 289   left: 0;
 290   background-color: rgba(0, 0, 0, 0.4);
 291   opacity: 0.85;
 292   bottom: 0px;
 293   width: 100%;
 294   padding: 7px;
 295   color: white;
 296   font-weight: bold;
 297 }
 298 .oe_demo div a {
 299   color: white;
 300 }
 301
 302 /* ---- SNIPPETS --- */
 303 .oe_img_bg {
 304   background-size: 100%;
 305 }
 306
 307 .carousel, .parallax, .blockquote {
 308   overflow: hidden;
 309 }
 310
 311 @media (max-width: 400px) {
 312   section, .parallax, .row, .hr, .blockquote {
 313     height: auto !important;
 314   }
 315 }
 316 .carousel-inner {
 317   height: 100%;
 318 }
 319 .carousel-inner .item {
 320   height: 100%;
 321   background-size: cover;
 322 }
 323
 324 .carousel .carousel-control {
 325   cursor: pointer;
 326 }
 327 .carousel .carousel-control span {
 328   top: 50%;
 329   position: absolute;
 330   margin-top: -8px;
 331 }
 332 .carousel .carousel-control.left {
 333   left: -10px;
 334 }
 335 .carousel .carousel-control.left * {
 336   position: absolute;
 337   top: 50%;
 338   z-index: 5;
 339   right: 50%;
 340 }
 341 .carousel .carousel-control.right {
 342   right: -10px;
 343 }
 344 .carousel .carousel-control.right * {
 345   position: absolute;
 346   top: 50%;
 347   z-index: 5;
 348   left: 50%;
 349 }
 350
 351 .quotecarousel {
 352   padding-bottom: 16px;
 353 }
 354
 355 .hr {
 356   padding: 4px 0;
 357 }
 358
 359 /* gallery */
 360 .o_gallery.o_grid.o_spc-none div.row, .o_gallery.o_masonry.o_spc-none div.row {
 361   margin: 0;
 362 }
 363 .o_gallery.o_grid.o_spc-none div.row > *, .o_gallery.o_masonry.o_spc-none div.row > * {
 364   padding: 0;
 365 }
 366 .o_gallery.o_grid.o_spc-small div.row, .o_gallery.o_masonry.o_spc-small div.row {
 367   margin: 5px 0;
 368 }
 369 .o_gallery.o_grid.o_spc-small div.row > *, .o_gallery.o_masonry.o_spc-small div.row > * {
 370   padding: 0 5px;
 371 }
 372 .o_gallery.o_grid.o_spc-medium div.row, .o_gallery.o_masonry.o_spc-medium div.row {
 373   margin: 10px 0;
 374 }
 375 .o_gallery.o_grid.o_spc-medium div.row > *, .o_gallery.o_masonry.o_spc-medium div.row > * {
 376   padding: 0 10px;
 377 }
 378 .o_gallery.o_grid.o_spc-big div.row, .o_gallery.o_masonry.o_spc-big div.row {
 379   margin: 15px 0;
 380 }
 381 .o_gallery.o_grid.o_spc-big div.row > *, .o_gallery.o_masonry.o_spc-big div.row > * {
 382   padding: 0 15px;
 383 }
 384 .o_gallery.o_grid .img, .o_gallery.o_masonry .img {
 385   width: 100%;
 386 }
 387 .o_gallery.o_grid.size-auto .row {
 388   height: auto;
 389 }
 390 .o_gallery.o_grid.size-small .row {
 391   height: 100px;
 392 }
 393 .o_gallery.o_grid.size-medium .row {
 394   height: 250px;
 395 }
 396 .o_gallery.o_grid.size-big .row {
 397   height: 400px;
 398 }
 399 .o_gallery.o_grid.size-small .img, .o_gallery.o_grid.size-medium .img, .o_gallery.o_grid.size-big .img {
 400   height: 100%;
 401 }
 402 .o_gallery.o_nomode.o_spc-none .img {
 403   padding: 0;
 404 }
 405 .o_gallery.o_nomode.o_spc-small .img {
 406   padding: 5px;
 407 }
 408 .o_gallery.o_nomode.o_spc-medium .img {
 409   padding: 10px;
 410 }
 411 .o_gallery.o_nomode.o_spc-big .img {
 412   padding: 15px;
 413 }
 414 .o_gallery.o_slideshow .carousel ul.carousel-indicators li {
 415   border: 1px solid #aaaaaa;
 416 }
 417 .o_gallery .carousel-inner .item img {
 418   max-width: none;
 419 }
 420
 421 .o_gallery.o_slideshow > .container {
 422   height: 100%;
 423 }
 424
 425 .o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel {
 426   height: 100%;
 427 }
 428 .o_gallery.o_slideshow .carousel img, .modal-body.o_slideshow .carousel img {
 429   max-height: 100%;
 430   max-width: 100%;
 431   margin: auto;
 432   position: relative;
 433   top: 50%;
 434   -webkit-transform: translateY(-50%);
 435   -ms-transform: translateY(-50%);
 436   transform: translateY(-50%);
 437 }
 438 .o_gallery.o_slideshow .carousel ul.carousel-indicators, .modal-body.o_slideshow .carousel ul.carousel-indicators {
 439   display: block;
 440   height: auto;
 441   padding: 0;
 442   border-width: 0;
 443   position: absolute;
 444   bottom: 0;
 445 }
 446 .o_gallery.o_slideshow .carousel ul.carousel-indicators li, .modal-body.o_slideshow .carousel ul.carousel-indicators li {
 447   list-style-image: none;
 448   display: inline-block;
 449   width: 35px;
 450   height: 35px;
 451   margin: 0 0px 5px 5px;
 452   padding: 0;
 453   border: 1px solid #aaaaaa;
 454   text-indent: initial;
 455   background-size: cover;
 456   opacity: 0.5;
 457   background-color: black;
 458 }
 459 .o_gallery.o_slideshow .carousel ul.carousel-indicators li.active, .modal-body.o_slideshow .carousel ul.carousel-indicators li.active {
 460   opacity: 1;
 461 }
 462 .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 {
 463   background-image: none;
 464   background-color: transparent;
 465 }
 466
 467 /* Parallax Theme */
 468 div.carousel .carousel-indicators li {
 469   border: 1px solid grey;
 470 }
 471 div.carousel .carousel-indicators .active {
 472   background-color: grey;
 473 }
 474 div.carousel span.carousel-img img, div.carousel div.carousel-content {
 475   max-height: 95%;
 476   padding: 10px;
 477 }
 478 div.carousel div.carousel-content {
 479   background-color: black;
 480   color: white;
 481   background: rgba(0, 0, 0, 0.3);
 482   margin-top: 75px;
 483 }
 484
 485 .parallax {
 486   background-size: cover;
 487 }
 488 .parallax > div {
 489   position: relative;
 490   display: table;
 491   width: 100%;
 492   min-height: 200px;
 493 }
 494 .parallax > div > div {
 495   display: table-cell;
 496   vertical-align: middle;
 497   padding: 32px 0;
 498 }
 499
 500 /* Misc */
 501 .texttop {
 502   vertical-align: top;
 503 }
 504
 505 table.well tr th {
 506   text-align: right;
 507   padding-right: 10px;
 508 }
 509 table.well tr td {
 510   padding-right: 5px;
 511 }
 512
 513 .logo-img {
 514   width: 220px;
 515 }
 516
 517 .oe_demo {
 518   position: relative;
 519 }
 520 .oe_demo img {
 521   width: 100%;
 522 }
 523 .oe_demo div {
 524   position: absolute;
 525   left: 0;
 526   background-color: rgba(0, 0, 0, 0.4);
 527   opacity: 0.85;
 528   bottom: 0px;
 529   width: 100%;
 530   padding: 7px;
 531   color: white;
 532   font-weight: bold;
 533 }
 534 .oe_demo div a {
 535   color: white;
 536 }
 537
 538 address .fa.fa-mobile-phone {
 539   margin: 0 3px 0 2px;
 540 }
 541 address .fa.fa-file-text-o {
 542   margin-right: 1px;
 543 }
 544
 545 span[data-oe-type="monetary"] {
 546   white-space: nowrap;
 547 }
 548
 549 .oe_template_fallback {
 550   -webkit-column-count: 3;
 551   -moz-column-count: 3;
 552   -ms-column-count: 3;
 553   -o-column-count: 3;
 554   column-count: 3;
 555 }
 556
 557 .oe_website_login_container {
 558   width: 400px;
 559   margin: 40px auto;
 560 }
 561
 562 div.media_iframe_video {
 563   height: 0;
 564   margin: 0 auto;
 565   text-align: center;
 566   position: relative;
 567   overflow: hidden;
 568   padding-bottom: 66.5%;
 569 }
 570 div.media_iframe_video iframe {
 571   width: 100%;
 572   height: 100%;
 573   position: absolute;
 574   margin-left: -50%;
 575 }
 576 div.media_iframe_video .css_editable_mode_display {
 577   position: absolute;
 578   width: 100%;
 579   height: 100%;
 580   display: none;
 581   z-index: 2;
 582 }
 583
 584 /* Mobile view */
 585 @media (max-width: 768px) {
 586   img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
 587     -webkit-transform: none !important;
 588     -moz-transform: none !important;
 589     -ms-transform: none !important;
 590     -o-transform: none !important;
 591     transform: none !important;
 592   }
 593 }