[MERGE] forward port of branch 8.0 up to 591e329
[odoo/odoo.git] / addons / website / static / src / css / website.css
index 71f030a..fb41e07 100644 (file)
@@ -1,4 +1,4 @@
-@charset "utf-8";
+@charset "UTF-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
   margin-bottom: 0px !important;
 }
 
-.pt128 {
-  padding-top: 128px !important;
-}
-
-.pt92 {
-  padding-top: 92px !important;
-}
-
-.pt64 {
-  padding-top: 64px !important;
-}
-
-.pt48 {
-  padding-top: 48px !important;
-}
-
-.pt32 {
-  padding-top: 32px !important;
-}
-
-.pt16 {
-  padding-top: 16px !important;
-}
-
-.pt8 {
-  padding-top: 8px !important;
-}
-
-.pt4 {
-  padding-top: 4px !important;
-}
-
-.pt0 {
-  padding-top: 0px !important;
-}
-
-.pb128 {
-  padding-bottom: 128px !important;
-}
-
-.pb92 {
-  padding-bottom: 92px !important;
-}
-
-.pb64 {
-  padding-bottom: 64px !important;
+/* Extra Styles */
+img.shadow {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  margin: 0 auto;
 }
 
-.pb48 {
-  padding-bottom: 48px !important;
+h1.text-muted, h2.text-muted, h3.text-muted {
+  margin-top: 10px;
 }
 
-.pb32 {
-  padding-bottom: 32px !important;
+header a.navbar-brand.logo {
+  padding: 0 15px;
 }
-
-.pb16 {
-  padding-bottom: 16px !important;
+header a.navbar-brand img {
+  max-height: 50px;
 }
 
-.pb8 {
-  padding-bottom: 8px !important;
+#wrapwrap p:empty:after {
+  content: "⁠";
 }
 
-.pb4 {
-  padding-bottom: 4px !important;
+/* ----- Snippets Styles ----- */
+.para_large {
+  font-size: 120%;
 }
 
-.pb0 {
-  padding-bottom: 0px !important;
+.readable {
+  font-size: 120%;
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-/* Grid of unequally tall elements */
-.grid > [class*="col-md"] {
-  display: inline-block;
-  float: none;
-  vertical-align: top;
-  box-sizing: border-box;
-}
-.grid > [class*="col-md"].grid-align-top > [class*="col-md"] {
-  vertical-align: top;
+/* ----- EDITOR ----- */
+#oe_main_menu_navbar {
+  min-height: 34px;
+  z-index: 1001;
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+  margin-bottom: 0px;
 }
-.grid > [class*="col-md"].grid-align-middle > [class*="col-md"] {
-  vertical-align: middle;
+#oe_main_menu_navbar li a, #oe_main_menu_navbar li button {
+  padding: 4px 8px 4px 8px;
+  margin-top: 2px;
+  font-size: 13px;
 }
-.grid > [class*="col-md"].grid-align-bottom > [class*="col-md"] {
-  vertical-align: bottom;
+#oe_main_menu_navbar .navbar-nav.navbar-right:last-child {
+  margin-right: 0 !important;
 }
 
-/* Extra Styles */
-img.shadow {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-  margin: 0 auto;
+.css_non_editable_mode_hidden {
+  display: none !important;
 }
 
-h1.text-muted, h2.text-muted, h3.text-muted {
-  margin-top: 10px;
+/* ----- BOOTSTRAP FIX ----- */
+.container .container, .readable .container {
+  padding-left: 0;
+  padding-right: 0;
+  width: auto;
 }
 
 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
-.navbar.navbar-default.navbar-static-top {
+.navbar.navbar-static-top {
   margin-bottom: 0;
 }
+.navbar.navbar-static-top ul.nav > li.divider {
+  margin-top: 15px;
+  padding-top: 20px;
+  border-right: 1px solid grey;
+}
 
 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 html, body, #wrapwrap {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   height: 100%;
 }
@@ -203,17 +169,17 @@ html, body, #wrapwrap {
   width: 100%;
 }
 
-header, #wrap, footer {
+header, main, footer {
   display: table-row;
 }
 
 footer {
   height: 100%;
   background: #eff8f8;
-  background: rgba(100, 200, 200, 0.1);
+  background: rgba(200, 200, 200, 0.1);
 }
 
-#footer_container {
+#footer_container, #footer {
   padding-top: 24px;
   padding-bottom: 12px;
 }
@@ -224,13 +190,18 @@ footer {
   width: 100%;
 }
 
+@-moz-document url-prefix() {
+  .table .img-responsive {
+    width: 100%;
+  }
+}
 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 .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 {
-  background-image: url("/website/static/src/img/drag_here.png");
+  background-image: url("/website/static/src/img/drag_here.png") !important;
 }
 
 .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 {
-  background-image: url("/website/static/src/img/edit_here.png");
+  background-image: none;
   background-repeat: no-repeat;
   background-position: center;
   height: 220px !important;
@@ -241,7 +212,7 @@ footer {
 }
 
 .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 {
-  content: "Press The Top-Left Edit Button";
+  content: " ";
   text-align: center;
   display: block;
   padding-top: 160px;
@@ -251,14 +222,11 @@ footer {
 }
 
 .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 {
-  content: "Drag Building Blocks Here";
+  content: "Drag Building Blocks Here" !important;
 }
 
-.oe_structure.oe_editable [data-snippet-id]:empty {
-  background: rgba(255, 0, 0, 0.1);
-}
-.oe_structure.oe_editable [data-snippet-id]:empty:before {
-  content: "Please Edit This Empty Block";
+.css_editable_display {
+  display: none;
 }
 
 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
@@ -271,14 +239,9 @@ footer {
   padding-left: 16px;
 }
 
-#themes-list .well {
-  padding: 0 0 20px 0;
-}
-
 /* -- Hack for removing double scrollbar from mobile preview -- */
 div#mobile-preview.modal {
   overflow: hidden;
-  overflow-y: hidden;
 }
 
 ul.nav-stacked > li > a {
@@ -290,15 +253,15 @@ ul.nav-stacked > li > a {
 }
 
 /* ---- PUBLISH ---- */
-.css_unpublish, .css_publish {
+.css_published .btn-danger, .css_published .css_publish {
   display: none;
 }
 
-.css_published .css_unpublish, .css_unpublished .css_publish {
-  display: block;
+.css_unpublished .btn-success, .css_unpublished .css_unpublish {
+  display: none;
 }
 
-[data-publish='off'] {
+[data-publish='off'] > *:not(.css_options) {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
   opacity: 0.5;
 }
@@ -338,132 +301,317 @@ ul.nav-stacked > li > a {
 }
 
 /* ---- SNIPPETS --- */
+.oe_img_bg {
+  background-size: 100%;
+}
+
+.carousel, .parallax, .blockquote {
+  overflow: hidden;
+}
+
+@media (max-width: 400px) {
+  section, .parallax, .row, .hr, .blockquote {
+    height: auto !important;
+  }
+}
+.carousel-inner {
+  height: 100%;
+}
 .carousel-inner .item {
   height: 100%;
-  background-size: 100%;
+  background-size: cover;
 }
 
-.carousel.oe_small .carousel-inner {
-  height: 200px;
+.carousel .carousel-control {
+  cursor: pointer;
 }
-.carousel.oe_medium .carousel-inner {
-  height: 300px;
+.carousel .carousel-control span {
+  top: 50%;
+  position: absolute;
+  margin-top: -8px;
 }
-.carousel.oe_big .carousel-inner {
-  height: 450px;
+.carousel .carousel-control.left {
+  left: -10px;
 }
-.carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 {
-  margin-top: 10px;
-  margin-bottom: 10px;
+.carousel .carousel-control.left * {
+  position: absolute;
+  top: 50%;
+  z-index: 5;
+  right: 50%;
 }
-.carousel .carousel-image {
-  right: 10%;
+.carousel .carousel-control.right {
+  right: -10px;
+}
+.carousel .carousel-control.right * {
+  position: absolute;
+  top: 50%;
+  z-index: 5;
   left: 50%;
-  top: 5%;
-  bottom: 5%;
+}
+
+.quotecarousel {
+  padding-bottom: 16px;
+}
+
+.hr {
+  padding: 4px 0;
+}
+
+.o_image_floating {
+  width: 40%;
+  margin: 4px;
+}
+.o_image_floating div.o_container {
+  position: relative;
+}
+.o_image_floating div.o_container mark {
+  display: block;
   position: absolute;
-  text-align: center;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(86, 61, 124, 0.25);
+}
+.o_image_floating div.o_container mark a {
+  color: white;
+}
+.o_image_floating.o_hide_link div.o_container mark {
+  display: none;
+}
+.o_image_floating.o_margin_s {
+  margin-bottom: 4px;
+}
+.o_image_floating.o_margin_s.pull-right {
+  margin-left: 8px;
+}
+.o_image_floating.o_margin_s.pull-left {
+  margin-right: 8px;
+}
+.o_image_floating.o_margin_m {
+  margin-bottom: 8px;
+}
+.o_image_floating.o_margin_m.pull-right {
+  margin-left: 12px;
+}
+.o_image_floating.o_margin_m.pull-left {
+  margin-right: 12px;
+}
+.o_image_floating.o_margin_l {
+  margin-bottom: 12px;
+}
+.o_image_floating.o_margin_l.pull-right {
+  margin-left: 16px;
+}
+.o_image_floating.o_margin_l.pull-left {
+  margin-right: 16px;
+}
+.o_image_floating.o_margin_xl {
+  margin-bottom: 24px;
+}
+.o_image_floating.o_margin_xl.pull-right {
+  margin-left: 32px;
+}
+.o_image_floating.o_margin_xl.pull-left {
+  margin-right: 32px;
+}
+
+/* gallery */
+.o_gallery.o_grid.o_spc-none div.row, .o_gallery.o_masonry.o_spc-none div.row {
+  margin: 0;
+}
+.o_gallery.o_grid.o_spc-none div.row > *, .o_gallery.o_masonry.o_spc-none div.row > * {
+  padding: 0;
+}
+.o_gallery.o_grid.o_spc-small div.row, .o_gallery.o_masonry.o_spc-small div.row {
+  margin: 5px 0;
+}
+.o_gallery.o_grid.o_spc-small div.row > *, .o_gallery.o_masonry.o_spc-small div.row > * {
+  padding: 0 5px;
+}
+.o_gallery.o_grid.o_spc-medium div.row, .o_gallery.o_masonry.o_spc-medium div.row {
+  margin: 10px 0;
+}
+.o_gallery.o_grid.o_spc-medium div.row > *, .o_gallery.o_masonry.o_spc-medium div.row > * {
+  padding: 0 10px;
+}
+.o_gallery.o_grid.o_spc-big div.row, .o_gallery.o_masonry.o_spc-big div.row {
+  margin: 15px 0;
+}
+.o_gallery.o_grid.o_spc-big div.row > *, .o_gallery.o_masonry.o_spc-big div.row > * {
+  padding: 0 15px;
+}
+.o_gallery.o_grid .img, .o_gallery.o_masonry .img {
+  width: 100%;
+}
+.o_gallery.o_grid.size-auto .row {
+  height: auto;
+}
+.o_gallery.o_grid.size-small .row {
+  height: 100px;
+}
+.o_gallery.o_grid.size-medium .row {
+  height: 250px;
 }
-.carousel .carousel-image img {
+.o_gallery.o_grid.size-big .row {
+  height: 400px;
+}
+.o_gallery.o_grid.size-small .img, .o_gallery.o_grid.size-medium .img, .o_gallery.o_grid.size-big .img {
   height: 100%;
-  margin: 0 auto;
 }
-.carousel .item.text_image .carousel-caption {
-  left: auto;
-  right: auto;
-  bottom: 10%;
-  text-align: left;
-  padding: 20px;
-  background: rgba(0, 0, 0, 0.4);
+.o_gallery.o_nomode.o_spc-none .img {
+  padding: 0;
 }
-.carousel .item.text_only .carousel-image {
-  display: none !important;
+.o_gallery.o_nomode.o_spc-small .img {
+  padding: 5px;
 }
-.carousel .item.text_only .carousel-caption {
-  left: 10%;
-  right: 10%;
-  top: 10%;
-  text-align: center;
+.o_gallery.o_nomode.o_spc-medium .img {
+  padding: 10px;
 }
-.carousel .item.image_text .carousel-caption {
-  left: auto;
-  text-align: left;
-  right: 10%;
-  bottom: 10%;
-  padding: 20px;
-  background: rgba(0, 0, 0, 0.4);
+.o_gallery.o_nomode.o_spc-big .img {
+  padding: 15px;
 }
-.carousel .item.image_text .carousel-image {
-  right: 50%;
-  left: 10%;
+.o_gallery.o_slideshow .carousel ul.carousel-indicators li {
+  border: 1px solid #aaa;
 }
-.carousel .carousel-control {
-  cursor: pointer;
+.o_gallery .carousel-inner .item img {
+  max-width: none;
 }
-.carousel .carousel-control span {
+
+.o_gallery.o_slideshow > .container {
+  height: 100%;
+}
+
+.o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel {
+  height: 100%;
+}
+.o_gallery.o_slideshow .carousel img, .modal-body.o_slideshow .carousel img {
+  max-height: 100%;
+  max-width: 100%;
+  margin: auto;
+  position: relative;
   top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+.o_gallery.o_slideshow .carousel ul.carousel-indicators, .modal-body.o_slideshow .carousel ul.carousel-indicators {
+  display: block;
+  height: auto;
+  padding: 0;
+  border-width: 0;
   position: absolute;
-  margin-top: -8px;
+  bottom: 0;
+}
+.o_gallery.o_slideshow .carousel ul.carousel-indicators li, .modal-body.o_slideshow .carousel ul.carousel-indicators li {
+  list-style-image: none;
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  margin: 0 0px 5px 5px;
+  padding: 0;
+  border: 1px solid #aaa;
+  text-indent: initial;
+  background-size: cover;
+  opacity: 0.5;
+  background-color: #000;
 }
-.carousel .carousel-control.left span {
-  left: 10px;
+.o_gallery.o_slideshow .carousel ul.carousel-indicators li.active, .modal-body.o_slideshow .carousel ul.carousel-indicators li.active {
+  opacity: 1;
 }
-.carousel .carousel-control.right span {
-  right: 10px;
+.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 {
+  background-image: none;
+  background-color: transparent;
 }
 
 /* Parallax Theme */
-.parallax_quote, [data-snippet-id="slider"] {
-  background: center center no-repeat fixed;
-  background-size: contain;
-}
-.parallax_quote .carousel-indicators li, [data-snippet-id="slider"] .carousel-indicators li {
+div.carousel .carousel-indicators li {
   border: 1px solid grey;
 }
-.parallax_quote .carousel-indicators .active, [data-snippet-id="slider"] .carousel-indicators .active {
+div.carousel .carousel-indicators .active {
   background-color: grey;
 }
+div.carousel span.carousel-img img, div.carousel div.carousel-content {
+  max-height: 95%;
+  padding: 10px;
+}
+div.carousel div.carousel-content {
+  background-color: black;
+  color: white;
+  background: rgba(0, 0, 0, 0.3);
+  margin-top: 75px;
+}
 
 .parallax {
-  position: relative;
-  background-size: 100%;
-}
-.parallax.oe_small {
-  height: 200px;
+  background-size: cover;
 }
-.parallax.oe_medium {
-  height: 300px;
+.parallax > div {
+  position: relative;
+  display: table;
+  width: 100%;
+  min-height: 200px;
 }
-.parallax.oe_big {
-  height: 450px;
+.parallax > div > div {
+  display: table-cell;
+  vertical-align: middle;
+  padding: 32px 0;
 }
 
-/* Background */
+/* Background (kept for 8.0 compatibility) */
 .oe_dark {
   background: #eff8f8;
-  background: rgba(100, 200, 200, 0.14);
-  -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-  -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-  box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
+  background: rgba(200, 200, 200, 0.14);
 }
 
 .oe_black {
   background-color: rgba(0, 0, 0, 0.9);
+  color: white;
 }
 
 .oe_green {
-  background-color: rgba(0, 128, 0, 0.8);
+  background-color: #169C78;
+  color: white;
+}
+.oe_green .text-muted {
+  color: #ddd;
 }
 
-.oe_red {
-  background-color: rgba(255, 0, 0, 0.8);
+.oe_blue_light {
+  background-color: #41b6ab;
+  color: white;
+}
+.oe_blue_light .text-muted {
+  color: #ddd;
 }
 
-.oe_img_bg {
-  height: 100%;
-  background-size: 100%;
+.oe_blue {
+  background-color: #34495e;
+  color: white;
+}
+
+.oe_orange {
+  background-color: #f05442;
+  color: white;
+}
+.oe_orange .text-muted {
+  color: #ddd;
+}
+
+.oe_purple {
+  background-color: #b163a3;
+  color: white;
+}
+.oe_purple .text-muted {
+  color: #ddd;
+}
+
+.oe_red {
+  background-color: #9C1b31;
+  color: white;
+}
+.oe_red .text-muted {
+  color: #ddd;
 }
 
+/* Misc */
 .texttop {
   vertical-align: top;
 }
@@ -500,3 +648,125 @@ table.well tr td {
 .oe_demo div a {
   color: white;
 }
+
+address .fa.fa-mobile-phone {
+  margin: 0 3px 0 2px;
+}
+address .fa.fa-file-text-o {
+  margin-right: 1px;
+}
+
+span[data-oe-type="monetary"] {
+  white-space: nowrap;
+}
+
+.oe_template_fallback {
+  -moz-column-count: 3;
+  -webkit-column-count: 3;
+  column-count: 3;
+}
+
+.oe_website_login_container {
+  width: 400px;
+  margin: 40px auto;
+}
+
+.oe_website_spinner {
+  width: 121px;
+}
+.oe_website_spinner input {
+  text-align: center;
+}
+
+div.media_iframe_video {
+  height: 0;
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 66.5%;
+}
+div.media_iframe_video iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  margin-left: -50%;
+}
+div.media_iframe_video .css_editable_mode_display {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: none;
+  z-index: 2;
+}
+
+/* Mobile view */
+@media (max-width: 768px) {
+  img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
+    -webkit-transform: none !important;
+    -moz-transform: none !important;
+    -ms-transform: none !important;
+    -o-transform: none !important;
+    transform: none !important;
+  }
+}
+/* Fix: backward compatibility saas-3 */
+div.carousel .container > .carousel-caption {
+  position: absolute;
+  right: 50%;
+  left: 50%;
+  bottom: 20px;
+}
+div.carousel .container > .carousel-caption > div {
+  position: absolute;
+  text-align: left;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.4);
+  bottom: 20px;
+}
+div.carousel .container > .carousel-image {
+  top: 5%;
+  bottom: 5%;
+  position: absolute;
+  max-height: 90%;
+  margin: 0 auto;
+}
+div.carousel .item.text_image .container > .carousel-caption {
+  left: 10%;
+}
+div.carousel .item.text_image .container > .carousel-caption > div {
+  right: 50%;
+  margin-right: -20%;
+  max-width: 550px;
+}
+div.carousel .item.text_image .container > .carousel-image {
+  right: 10%;
+  left: 50%;
+}
+div.carousel .item.image_text .container > .carousel-caption {
+  right: 10%;
+}
+div.carousel .item.image_text .container > .carousel-caption > div {
+  left: 50%;
+  margin-left: -20%;
+  max-width: 550px;
+}
+div.carousel .item.image_text .container > .carousel-image {
+  right: 50%;
+  left: 10%;
+}
+div.carousel .item.text_only .container > .carousel-caption {
+  left: 10%;
+  right: 10%;
+  top: 10%;
+  bottom: auto;
+}
+div.carousel .item.text_only .container > .carousel-caption > div {
+  text-align: center;
+  background: transparent;
+  bottom: auto;
+  width: 100%;
+}
+div.carousel .item.text_only .container > .carousel-image {
+  display: none !important;
+}