[MERGE] Sync with trunk

bzr revid: odo@openerp.com-20140411094018-zqw3ac1br991qsnp

16 files changed, 464 insertions, 145 deletions

diff --git a/addons/website/static/src/css/bootswatch/amelia.fix.css b/addons/website/static/src/css/bootswatch/amelia.fix.css
new file mode 100644
index 00000000000..2f16ea5465c
--- /dev/null
+++ b/addons/website/static/src/css/bootswatch/amelia.fix.css
@@ -0,0 +1,27 @@
+#website-top-navbar a.btn-link {
+    color: #ad1d28;
+}
+.oe_product section {
+    background: rgba(16, 138, 147, 0.75) !important;
+}
+.oe_product section .text-info {
+    color: #DFD6F5;
+}
+ul.wizard li {
+    background: #debb27 !important;
+}
+ul.wizard .chevron:before {
+    border-left: 10px solid #debb27 !important;
+}
+ul.wizard .text-primary {
+    color: #ad1d28 !important;
+}
+ul.wizard .text-success {
+    color: #ffffff !important;
+}
+.oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before {
+    color: #79D5DB !important;
+}
+.input-group-addon .fa {
+    color: #444;
+}
diff --git a/addons/website/static/src/css/bootswatch/cosmo.fix.css b/addons/website/static/src/css/bootswatch/cosmo.fix.css
new file mode 100644
index 00000000000..907aa7bf757
--- /dev/null
+++ b/addons/website/static/src/css/bootswatch/cosmo.fix.css
@@ -0,0 +1,7 @@
+#website-top-navbar button.btn-primary {
+    color: #fff;
+    border: 2px solid #0061c2;
+}
+#website-top-navbar a.btn-link {
+    color: #fff;
+}
\ No newline at end of file
diff --git a/addons/website/static/src/css/bootswatch/cyborg.fix.css b/addons/website/static/src/css/bootswatch/cyborg.fix.css
new file mode 100644
index 00000000000..e93b2aa8ded
--- /dev/null
+++ b/addons/website/static/src/css/bootswatch/cyborg.fix.css
@@ -0,0 +1,30 @@
+.oe_product section {
+    background: rgba(40, 40, 40, 0.85) !important;
+}
+.oe_product section .text-info {
+    color: #BA66E4;
+}
+ul.wizard li {
+    background: #222 !important;
+}
+ul.wizard .chevron:before {
+    border-left: 10px solid #222 !important;
+}
+.popover, .modal-content {
+    border: 1px solid rgba(200,200,200,0.5);
+}
+.close {
+    color: #fff;
+}
+.popover.bottom .arrow:after {
+    border-bottom-color: #333;
+}
+.popover.top .arrow:after {
+    border-top-color: #333;
+}
+.popover.left .arrow:after {
+    border-left-color: #333;
+}
+.popover.right .arrow:after {
+    border-right-color: #333;
+}
\ No newline at end of file
diff --git a/addons/website/static/src/css/bootswatch/flatly.fix.css b/addons/website/static/src/css/bootswatch/flatly.fix.css
new file mode 100644
index 00000000000..c2d9500f5da
--- /dev/null
+++ b/addons/website/static/src/css/bootswatch/flatly.fix.css
@@ -0,0 +1,3 @@
+#website-top-navbar a.btn-link {
+    color: #2c3e50;
+}
\ No newline at end of file
diff --git a/addons/website/static/src/css/bootswatch/journal.fix.css b/addons/website/static/src/css/bootswatch/journal.fix.css
new file mode 100644
index 00000000000..e9f41a33e8f
--- /dev/null
+++ b/addons/website/static/src/css/bootswatch/journal.fix.css
@@ -0,0 +1,6 @@
+#website-top-navbar button.btn-primary {
+    border: 2px solid #e4332e;
+}
+#website-top-navbar a.btn-link {
+    color: #fff;
+}
\ No newline at end of file
diff --git a/addons/website/static/src/css/bootswatch/readable.fix.css b/addons/website/static/src/css/bootswatch/readable.fix.css
new file mode 100644
index 00000000000..8e22d318615
--- /dev/null
+++ b/addons/website/static/src/css/bootswatch/readable.fix.css
@@ -0,0 +1,3 @@
+.oe_product section .text-info {
+    color: #2A9CBE;
+}
\ No newline at end of file
diff --git a/addons/website/static/src/css/bootswatch/simplex.fix.css b/addons/website/static/src/css/bootswatch/simplex.fix.css
new file mode 100644
index 00000000000..56dbb1fdd5f
--- /dev/null
+++ b/addons/website/static/src/css/bootswatch/simplex.fix.css
@@ -0,0 +1,3 @@
+#website-top-navbar a.btn-link {
+    color: #fff;
+}
\ No newline at end of file
diff --git a/addons/website/static/src/css/bootswatch/slate.fix.css b/addons/website/static/src/css/bootswatch/slate.fix.css
new file mode 100644
index 00000000000..c2e1a999b03
--- /dev/null
+++ b/addons/website/static/src/css/bootswatch/slate.fix.css
@@ -0,0 +1,21 @@
+.oe_product section {
+    background: rgba(40, 40, 45, 0.80) !important;
+}
+ul.wizard li {
+    background-image: -webkit-linear-gradient(#8a9196,#7a8288 60%,#788084) !important;
+    background-image: linear-gradient(#8a9196,#7a8288 60%,#788084 ) !important;
+    color: #ccc;
+}
+ul.wizard .chevron:before {
+    border-left: 10px solid #7C8386 !important;
+}
+ul.wizard li.text-primary {
+    color: #fff;
+}
+.close {
+    color: #fff;
+}
+.popover  {
+    -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
+    box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
+}
diff --git a/addons/website/static/src/css/bootswatch/spacelab.fix.css b/addons/website/static/src/css/bootswatch/spacelab.fix.css
new file mode 100644
index 00000000000..6d01e9a2485
--- /dev/null
+++ b/addons/website/static/src/css/bootswatch/spacelab.fix.css
@@ -0,0 +1,8 @@
+.carousel .carousel-caption.content,
+.carousel .carousel-caption.content h1,
+.carousel .carousel-caption.content h2,
+.carousel .carousel-caption.content h3,
+.carousel .carousel-caption.content h4,
+.carousel .carousel-caption.content h5 {
+    color: #ccc;
+}
\ No newline at end of file
diff --git a/addons/website/static/src/css/bootswatch/yeti.fix.css b/addons/website/static/src/css/bootswatch/yeti.fix.css
new file mode 100644
index 00000000000..3fd285c826e
--- /dev/null
+++ b/addons/website/static/src/css/bootswatch/yeti.fix.css
@@ -0,0 +1,6 @@
+#website-top-navbar a.btn-link {
+    color: #fff;
+}
+.popover .close {
+    color: #fff;
+}
\ No newline at end of file
diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 4fb4496e692..eb4c5b2851c 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -26,6 +26,7 @@
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
+  -ms-filter: "alpha(opacity=50)";
 }
 
 /* ---- OpenERP Style ---- {{{ */
@@ -93,6 +94,10 @@
   display: none;
 }
 
+.cke_editable .css_editable_mode_display {
+  display: block !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") !important;
 }
@@ -179,7 +184,7 @@ ul.oe_menu_editor .disclose {
   cursor: text !important;
 }
 
-.modal-dialog.select-image {
+.modal-dialog.select-media {
   width: 80%;
 }
 
@@ -211,7 +216,7 @@ ul.oe_menu_editor .disclose {
 
 .modal .font-icons-icons {
   font-size: 2em;
-  max-height: 6em;
+  max-height: 9em;
   overflow: auto;
 }
 .modal .font-icons-icons .font-icons-icon {
@@ -250,6 +255,30 @@ ul.oe_menu_editor .disclose {
 .existing-attachments .pager .disabled {
   display: none;
 }
+.existing-attachments .existing-attachment-cell {
+  position: relative;
+}
+.existing-attachments .existing-attachment-cell .img {
+  border: 1px solid #848490;
+}
+.existing-attachments .existing-attachment-cell .existing-attachment-remove {
+  position: absolute;
+  top: 0;
+  left: 15px;
+  cursor: pointer;
+  background: white;
+  padding: 2px;
+  border: 1px solid #848490;
+  border-top: none;
+  border-left: none;
+  -moz-border-radius-bottomright: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.existing-attachments .existing-attachment-cell.media_selected > i, .existing-attachments .existing-attachment-cell.media_selected > img {
+  border-width: 5px;
+  border-color: #00f8f8;
+}
 
 .cke_widget_wrapper {
   position: static !important;
@@ -275,17 +304,34 @@ ul.oe_menu_editor .disclose {
   background-color: #ffd9dd !important;
 }
 
-.hover-edition-button {
+.hover-edition {
+  display: inline-block;
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1001;
+}
+
+.preview-container {
+  text-align: center;
+  line-height: 100px;
+  height: 100px;
+}
+.preview-container > * {
+  max-height: 100px;
+  line-height: 100px;
+  margin: 0 auto;
+  display: inline-block;
 }
 
 .cke_editable .fa {
   cursor: pointer;
 }
 
+.img-responsive {
+  text-align: center;
+}
+
 /* ---- MOBILE PREVIEW ---- {{{ */
 .oe_mobile_preview.modal .modal-content {
   height: 660px;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 2e6513f7c1d..fb80fa47277 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -23,6 +23,7 @@
     background: transparent
     border: none
     +box-shadow(none)
+    -ms-filter: "alpha(opacity=50)"
 
 // }}}
  
@@ -76,6 +77,9 @@
 .cke_editable .css_editable_mode_hidden
     display: none
 
+.cke_editable .css_editable_mode_display
+    display: block !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') !important
 
@@ -149,7 +153,7 @@ ul.oe_menu_editor
     +user-select(auto)
     cursor: text !important
 
-.modal-dialog.select-image
+.modal-dialog.select-media
     width: 80%
 
 .modal .existing-attachments
@@ -178,7 +182,7 @@ ul.oe_menu_editor
 .modal
     .font-icons-icons
         font-size: 2em
-        max-height: 6em
+        max-height: 9em
         overflow: auto
 
         .font-icons-icon
@@ -210,9 +214,31 @@ ul.oe_menu_editor
         .font-icons-selected
             background-color: #ddd
 
+$attachment-border-color: #848490
+.existing-attachments
+    .pager .disabled
+        display: none
 
-.existing-attachments .pager .disabled
-    display: none
+    .existing-attachment-cell
+        position: relative
+        .img
+            border: 1px solid $attachment-border-color
+        .existing-attachment-remove
+            position: absolute
+            top: 0
+            left: 15px // padding-left on col-*
+
+            cursor: pointer
+            background: white
+            padding: 2px
+            border: 1px solid $attachment-border-color
+            border-top: none
+            border-left: none
+            +border-bottom-right-radius(8px)
+        &.media_selected
+            > i, > img 
+                border-width: 5px
+                border-color: rgb(0, 248, 248)
 
 // wrapper positioned relatively for drag&drop widget which is disabled below.
 // Breaks completely horribly crazy products listing page, so take it out.
@@ -240,17 +266,30 @@ ul.oe_menu_editor
     outline: 1px solid red !important
     background-color: #ffd9dd !important
 
-.hover-edition-button
+.hover-edition
+    display: inline-block
     position: absolute
     top: 0
     left: 0
-    // This z-index is due to .navbar of bootstrap
-    z-index: 1000
+    // This z-index is due to .navbar of bootstrap & jQuery-transfo
+    z-index: 1001
+.preview-container
+    text-align: center
+    line-height: 100px
+    height: 100px
+    > *
+        max-height: 100px
+        line-height: 100px
+        margin: 0 auto
+        display: inline-block
 
 // fontawesome
 .cke_editable .fa
     cursor: pointer
 
+.img-responsive
+    text-align: center
+
 // }}}
 
 /* ---- MOBILE PREVIEW ---- {{{ */
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index fe9c18c0081..cbfca8be131 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -80,10 +80,8 @@
   -moz-user-select: none;
   user-select: none;
   cursor: move;
-  pointer-events: none;
 }
 .oe_snippet .oe_snippet_thumbnail {
-  pointer-events: auto;
   text-align: center;
   height: 100%;
   background: transparent;
@@ -200,8 +198,10 @@
 
 .oe_overlay {
   display: none;
+  height: 0;
   position: absolute;
   background: transparent;
+  z-index: 1001;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -214,20 +214,12 @@
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  pointer-events: none;
 }
 .oe_overlay.oe_active {
   display: block;
-  border-style: dashed;
-  border-width: 1px;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  border-color: rgba(0, 0, 0, 0.3);
 }
 .oe_overlay .oe_handle {
   display: block !important;
-  pointer-events: auto;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -238,7 +230,18 @@
   height: 16px;
   margin: -2px;
 }
+.oe_overlay .oe_handle > div {
+  z-index: 1;
+  position: absolute;
+  border-style: dashed;
+  border-width: 1px;
+  border-color: #666666;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+}
 .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button {
+  z-index: 2;
   position: relative;
   top: 50%;
   left: 50%;
@@ -270,56 +273,68 @@
   -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
   box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 }
+.oe_overlay .oe_handle.e, .oe_overlay .oe_handle.w {
+  top: 4px;
+  height: 100%;
+}
 .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before {
   content: "\f0d9-\f0da";
   line-height: 16px;
 }
+.oe_overlay .oe_handle.e > div, .oe_overlay .oe_handle.w > div {
+  width: 0;
+  height: 100%;
+  top: 2px;
+  left: 8px;
+}
 .oe_overlay .oe_handle.e {
   left: auto;
-  top: 2px;
-  height: 100%;
   right: -6px;
   cursor: w-resize;
 }
 .oe_overlay .oe_handle.w {
-  top: 2px;
-  height: 100%;
   left: -6px;
   cursor: e-resize;
 }
+.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.n {
+  left: 2px;
+  width: 100%;
+}
 .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before {
-  z-index: 0;
   content: "\f07d";
   text-align: center;
   padding: 1px;
 }
+.oe_overlay .oe_handle.s > div, .oe_overlay .oe_handle.n > div {
+  width: 100%;
+  height: 0;
+  top: 7px;
+  left: 1px;
+}
 .oe_overlay .oe_handle.s {
   top: auto;
-  left: 2px;
-  width: 100%;
-  bottom: -6px;
   cursor: n-resize;
 }
 .oe_overlay .oe_handle.n {
-  left: 2px;
-  width: 100%;
-  top: -6px;
   cursor: s-resize;
 }
+.oe_overlay .oe_handle.n > div {
+  top: 5px;
+}
 .oe_overlay .oe_handle.size {
+  z-index: 3;
   top: auto;
-  left: 2px;
-  width: 100%;
+  left: 50%;
   bottom: -6px;
+  margin-left: -50px;
 }
 .oe_overlay .oe_handle.size .oe_handle_button {
-  z-index: 1;
-  content: "Resize";
-  width: 64px;
+  position: relative;
+  z-index: 3;
   text-align: center;
-  margin-left: -32px;
+  margin-left: -52px;
   margin-top: -10px;
-  cursor: row-resize;
+  left: 0px;
 }
 .oe_overlay .oe_handle.size .oe_handle_button:hover {
   background: rgba(30, 30, 30, 0.8);
@@ -328,25 +343,40 @@
   -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
   box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 }
-.oe_overlay .oe_handle.size div {
-  border-style: dashed;
-  border-width: 0 0 1px 0;
-  border-color: rgba(0, 0, 0, 0.5);
-  position: relative;
-  top: 8px;
+.oe_overlay .oe_handle.size .size {
+  position: absolute;
+  width: 64px;
+  cursor: row-resize;
+  top: 9px;
+  margin-left: 52px;
+  padding: 0 5px;
+}
+.oe_overlay .oe_handle.size .auto_size {
+  position: absolute;
+  width: 100px;
+  top: 9px;
+  cursor: pointer;
+}
+.oe_overlay .oe_handle.readonly {
+  cursor: auto !important;
+}
+.oe_overlay .oe_handle.readonly:before, .oe_overlay .oe_handle.readonly.size {
+  display: none !important;
 }
 .oe_overlay .icon.btn {
   display: inline-block;
 }
 .oe_overlay .oe_overlay_options {
   position: absolute;
-  width: 100%;
+  left: 50% !important;
   text-align: center;
-  top: -11px;
+  top: -20px;
   z-index: 1002;
 }
+.oe_overlay .oe_overlay_options > .btn-group {
+  left: -50%;
+}
 .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
-  pointer-events: auto;
   cursor: pointer;
 }
 .oe_overlay .oe_overlay_options .dropdown {
@@ -505,7 +535,6 @@
   box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59);
 }
 .oe_snippet_editor .oe_snippet > * {
-  pointer-events: none;
   margin-top: 16px;
   line-height: 1em;
   zoom: 0.6;
@@ -608,8 +637,3 @@
   height: 16px;
   display: inline-block;
 }
-
-[data-snippet-id] {
-  min-height: 10px;
-  min-width: 10px;
-}
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index a06bba01dba..40467897e26 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -64,9 +64,7 @@
     overflow: hidden
     +user-select(none)
     cursor: move
-    pointer-events: none
     .oe_snippet_thumbnail
-        pointer-events: auto
         text-align: center
         height: 100%
         background: transparent
@@ -150,22 +148,18 @@
 
 .oe_overlay
     display: none
+    height: 0
     position: absolute
     background: transparent
+    z-index: 1001
     //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
     +border-radius(3px)
     @include transition(opacity 100ms linear)
     +box-sizing(border-box)
-    pointer-events: none
     &.oe_active
         display: block
-        border-style: dashed
-        border-width: 1px
-        +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset)
-        border-color: rgba(0, 0, 0, 0.3)
     .oe_handle
         display: block !important
-        pointer-events: auto
         position: absolute
         top: 50%
         left: 50%
@@ -173,7 +167,15 @@
         width: 16px
         height: 16px
         margin: -2px
+        > div
+            z-index: 1
+            position: absolute
+            border-style: dashed
+            border-width: 1px
+            border-color: #666666
+            +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
         &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
+            z-index: 2
             position: relative
             top: 50%
             left: 50%
@@ -196,72 +198,88 @@
                 color: #fff
                 +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
         &.e, &.w
+            top: 4px
+            height: 100%
             &:before
                 content: "\f0d9-\f0da"
                 line-height: 16px
+            > div
+                width: 0
+                height: 100%
+                top: 2px
+                left: 8px
         &.e
             left: auto
-            top: 2px
-            height: 100%
             right: -6px
             cursor: w-resize
         &.w
-            top: 2px
-            height: 100%
             left: -6px
             cursor: e-resize
         &.s, &.n
+            left: 2px
+            width: 100%
             &:before
-                z-index: 0
                 content: "\f07d"
                 text-align: center
                 padding: 1px
+            > div
+                width: 100%
+                height: 0
+                top: 7px
+                left: 1px
         &.s
             top: auto
-            left: 2px
-            width: 100%
-            bottom: -6px
             cursor: n-resize
         &.n
-            left: 2px
-            width: 100%
-            top: -6px
             cursor: s-resize
+            > div
+                top: 5px
         &.size
+            z-index: 3
             top: auto
-            left: 2px
-            width: 100%
+            left: 50%
             bottom: -6px
+            margin-left: -50px
             .oe_handle_button
-                z-index: 1
-                content: "Resize"
-                width: 64px
+                position: relative
+                z-index: 3
                 text-align: center
-                margin-left: -32px
+                margin-left: -52px
                 margin-top: -10px
-                cursor: row-resize
+                left: 0px
                 &:hover
                     background: rgba(30, 30, 30, .8)
                     color: #fff
                     +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
-            div
-                border-style: dashed
-                border-width: 0 0 1px 0
-                border-color: rgba(0, 0, 0, 0.5)
-                position: relative
-                top: 8px
+            .size
+                position: absolute
+                width: 64px
+                cursor: row-resize
+                top: 9px
+                margin-left: 52px
+                padding: 0 5px
+            .auto_size
+                position: absolute
+                width: 100px
+                top: 9px
+                cursor: pointer
+        &.readonly
+            cursor: auto !important
+            &:before, &.size
+                display: none !important
 
     .icon.btn
         display: inline-block
 
     .oe_overlay_options
         position: absolute
-        width: 100%
+        left: 50% !important
         text-align: center
-        top: -11px
+        top: -20px
         z-index: 1002
+        > .btn-group
+            left: -50%
         .btn, a
-            pointer-events: auto
             cursor: pointer
         .dropdown
             display: inline-block
@@ -392,7 +410,6 @@
             border: 2px solid rgb(151, 137, 255)
             box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59)
         & > *
-            pointer-events: none
             margin-top: 16px
             line-height: 1em
             zoom: 0.6
@@ -483,10 +500,6 @@
             height: 16px
             display: inline-block
 
-[data-snippet-id] 
-    min-height: 10px
-    min-width: 10px
-
 
 
 
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index e47b7a41baa..9339b5e03b9 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -102,6 +103,10 @@ header a.navbar-brand img {
   max-height: 50px;
 }
 
+#wrapwrap p:empty:after {
+  content: "\2060";
+}
+
 /* ----- Snippets Styles ----- */
 .readable {
   font-size: 120%;
@@ -116,9 +121,10 @@ header a.navbar-brand img {
 }
 
 /* ----- BOOTSTRAP FIX ----- */
-.container .container {
+.container .container, .readable .container {
   padding-left: 0;
   padding-right: 0;
+  width: auto;
 }
 
 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
@@ -216,7 +222,6 @@ footer {
 /* -- Hack for removing double scrollbar from mobile preview -- */
 div#mobile-preview.modal {
   overflow: hidden;
-  overflow-y: hidden;
 }
 
 ul.nav-stacked > li > a {
@@ -236,7 +241,7 @@ ul.nav-stacked > li > a {
   display: none;
 }
 
-[data-publish='off'] {
+[data-publish='off'] > *:not(.css_options) {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
   opacity: 0.5;
 }
@@ -280,12 +285,12 @@ ul.nav-stacked > li > a {
   background-size: 100%;
 }
 
-[data-snippet-id], .colmd, .hr, .blockquote {
+.carousel, .parallax, .blockquote {
   overflow: hidden;
 }
 
 @media (max-width: 400px) {
-  [data-snippet-id]:not([data-snippet-id="carousel"]) {
+  section, .parallax, .row, .hr, .blockquote {
     height: auto !important;
   }
 }
@@ -368,42 +373,51 @@ ul.nav-stacked > li > a {
   position: absolute;
   margin-top: -8px;
 }
-.carousel .carousel-control.left span {
-  left: 10px;
+.carousel .carousel-control.left {
+  left: -10px;
+}
+.carousel .carousel-control.left * {
+  position: absolute;
+  top: 50%;
+  z-index: 5;
+  right: 50%;
+}
+.carousel .carousel-control.right {
+  right: -10px;
 }
-.carousel .carousel-control.right span {
-  right: 10px;
+.carousel .carousel-control.right * {
+  position: absolute;
+  top: 50%;
+  z-index: 5;
+  left: 50%;
 }
 
 .quotecarousel {
   padding-bottom: 16px;
 }
 
+.hr {
+  padding: 4px 0;
+}
+
 /* Parallax Theme */
-div.carousel[data-snippet-id="slider"] .carousel-indicators li {
+div.carousel .carousel-indicators li {
   border: 1px solid grey;
 }
-div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
+div.carousel .carousel-indicators .active {
   background-color: grey;
 }
 
 .parallax {
-  position: relative;
   background-size: cover;
+}
+.parallax > div {
+  position: relative;
   display: table;
   width: 100%;
-  min-height: 100px;
-}
-.parallax.oe_small {
   min-height: 200px;
 }
-.parallax.oe_medium {
-  min-height: 300px;
-}
-.parallax.oe_big {
-  min-height: 450px;
-}
-.parallax > div {
+.parallax > div > div {
   display: table-cell;
   vertical-align: middle;
   padding: 32px 0;
@@ -413,9 +427,6 @@ div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
 .oe_dark {
   background: #eff8f8;
   background: rgba(200, 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;
 }
 
 .oe_black {
@@ -529,3 +540,33 @@ span[data-oe-type="monetary"] {
   width: 400px;
   margin: 40px auto;
 }
+
+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%;
+}
+div.media_iframe_video div {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+
+/* 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;
+  }
+}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 3cdfe37a896..e8a7d870623 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -68,6 +68,12 @@ header
         img
             max-height: 50px
 
+// add {WORD JOINER} (equivalent to deprecated ZERO WIDTH NO-BREAK SPACE) at
+// the beginning of paragraphs so they don't "disappear" after saving when
+// used solely for spacing.
+#wrapwrap p:empty:after
+    content: '\2060'
+
 /* ----- Snippets Styles ----- */
 
 .readable
@@ -78,17 +84,16 @@ header
 
 /* ----- EDITOR ----- */
 
-
 .css_non_editable_mode_hidden
     display: none
 
-
 /* ----- BOOTSTRAP FIX ----- */
 
-.container
+.container, .readable
     .container
         padding-left: 0
         padding-right: 0
+        width: auto
 
 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
 
@@ -179,7 +184,6 @@ footer
 /* -- Hack for removing double scrollbar from mobile preview -- */
 div#mobile-preview.modal
     overflow: hidden
-    overflow-y: hidden
 
 ul.nav-stacked > li > a
     padding: 2px 15px
@@ -195,7 +199,7 @@ ul.nav-stacked > li > a
     .btn-success, .css_unpublish
         display: none
 
-[data-publish='off']
+[data-publish='off']>*:not(.css_options)
     +opacity(0.5)
 
 /* ---- END of PUBLISH ---- */
@@ -230,11 +234,11 @@ ul.nav-stacked > li > a
 .oe_img_bg
     background-size: 100%
 
-[data-snippet-id],.colmd,.hr,.blockquote
+.carousel, .parallax, .blockquote
     overflow: hidden
 
 @media (max-width: 400px)
-    [data-snippet-id]:not([data-snippet-id="carousel"])
+    section, .parallax, .row, .hr, .blockquote
         height: auto !important
 
 .carousel-inner
@@ -302,17 +306,30 @@ ul.nav-stacked > li > a
             top: 50%
             position: absolute
             margin-top: -8px
-        &.left span
-            left: 10px
-        &.right span
-            right: 10px
+        &.left
+            left: -10px
+            *
+                position: absolute
+                top: 50%
+                z-index: 5
+                right: 50%
+        &.right
+            right: -10px
+            *
+                position: absolute
+                top: 50%
+                z-index: 5
+                left: 50%
 
 .quotecarousel
     padding-bottom: 16px
 
+.hr
+    padding: 4px 0
+
 /* Parallax Theme */
 
-div.carousel[data-snippet-id="slider"]
+div.carousel
     .carousel-indicators
         li
             border: 1px solid grey
@@ -320,28 +337,22 @@ div.carousel[data-snippet-id="slider"]
             background-color: grey
 
 .parallax
-    position: relative
     background-size: cover
-    display: table
-    width: 100%
-    min-height: 100px
-    &.oe_small
-        min-height: 200px
-    &.oe_medium
-        min-height: 300px
-    &.oe_big
-        min-height: 450px
     > div
-        display: table-cell
-        vertical-align: middle
-        padding: 32px 0
+        position: relative
+        display: table
+        width: 100%
+        min-height: 200px
+        > div
+            display: table-cell
+            vertical-align: middle
+            padding: 32px 0
 
 /* Background */
 
 .oe_dark
     background: #eff8f8
     background: rgba(200, 200, 200, 0.14)
-    +box-shadow(0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset)
 
 .oe_black
     background-color: rgba(0, 0, 0, 0.9)
@@ -428,3 +439,34 @@ span[data-oe-type="monetary"]
 .oe_website_login_container
     width: 400px
     margin: 40px auto
+
+.oe_website_overflow_ellipsis
+    white-space:nowrap
+    overflow:hidden
+    text-overflow:ellipsis
+
+div.media_iframe_video
+    height: 0
+    margin: 0 auto
+    text-align: center
+    position: relative
+    overflow: hidden
+    padding-bottom: 66.5%
+    iframe
+        width: 100%
+        height: 100%
+    div
+        position: absolute
+        width: 100%
+        height: 100%
+        display: none
+
+/* 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