4 files changed, 158 insertions, 25 deletions
diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index bd68855d6ed..8a20e94bec0 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,4 +1,3 @@
-@charset "utf-8";
 .oe_hidden {
   display: none !important;
 }
@@ -59,6 +58,7 @@
   display: none;
 }
 
+/* ---- SNIPPET EDITOR ---- */
 .oe_snippets {
   position: fixed;
   left: 0px;
@@ -69,6 +69,7 @@
   background: #282828;
   box-shadow: 0px 10px 10px -10px black inset;
   overflow-y: auto;
+  z-index: 100;
 }
 
 .oe_snippet {
@@ -80,12 +81,12 @@
   border-radius: 3px;
   margin: 10px;
   margin-right: 0px;
-  cursor: move;
   position: relative;
   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   -webkit-user-select: none;
   user-select: none;
+  cursor: move;
 }
 .oe_snippet .oe_snippet_thumbnail.oe_label {
   text-align: center;
@@ -109,43 +110,111 @@
   -webkit-transform: scale(0.095);
 }
 
-.oe_drop_zone {
+/* ---- SNIPPETS DROP ZONES ---- */
+.oe_drop_zone.oe_insert {
   display: block;
-  background: rgba(153, 0, 255, 0.17);
-  border-radius: 3px;
   height: 32px;
   margin: -16px 0px;
   -webkit-transition: margin 250ms linear;
 }
-.oe_drop_zone:first-child:not(:last-child) {
+.oe_drop_zone.oe_insert:first-child:not(:last-child) {
   margin-top: -8px;
   margin-bottom: -24px;
 }
-.oe_drop_zone:last-child:not(:first-child) {
+.oe_drop_zone.oe_insert:last-child:not(:first-child) {
   margin-top: -24px;
   margin-bottom: -8px;
 }
-.oe_drop_zone.oe_hover {
-  background: rgba(0, 255, 133, 0.22);
-  z-index: 100000;
-}
-.oe_drop_zone:before {
+.oe_drop_zone.oe_insert:before {
   content: "";
   display: block;
   border-top: dashed 2px rgba(209, 178, 255, 0.72);
   position: relative;
   top: 16px;
 }
-.oe_drop_zone:first-child:not(:last-child):before {
+.oe_drop_zone.oe_insert:first-child:not(:last-child):before {
   top: 8px;
 }
-.oe_drop_zone:last-child:not(:first-child):before {
+.oe_drop_zone.oe_insert:last-child:not(:first-child):before {
   top: 24px;
 }
-.oe_drop_zone.oe_hover:before {
+.oe_drop_zone.oe_insert.oe_hover:before {
   border-top: dashed 2px rgba(116, 255, 161, 0.72);
 }
 
+.oe_drop_zone.oe_overlay {
+  position: absolute;
+  background: rgba(153, 0, 255, 0.17);
+  border-radius: 3px;
+}
+
+.oe_drop_zone {
+  background: rgba(153, 0, 255, 0.17);
+  border-radius: 3px;
+}
+.oe_drop_zone.oe_hover {
+  background: rgba(0, 255, 133, 0.22);
+  z-index: 99;
+}
+
+/* ---- SNIPPET MANIPULATOR ---- */
+.oe_snippet_manipulator {
+  display: block;
+  position: absolute;
+  background: rgba(153, 0, 255, 0.1);
+  border-radius: 3px;
+  border: solid 1px rgba(153, 0, 255, 0.5);
+  opacity: 0;
+  transition: opacity 100ms linear;
+}
+.oe_snippet_manipulator > .oe_handle {
+  display: none;
+}
+.oe_snippet_manipulator:hover, .oe_snippet_manipulator.oe_hover {
+  opacity: 1;
+}
+.oe_snippet_manipulator:hover > .oe_handle, .oe_snippet_manipulator.oe_hover > .oe_handle {
+  display: block;
+}
+
+.oe_handle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  background: white;
+  border: solid 1px rgba(153, 0, 255, 0.5);
+  box-sizing: border-box;
+  border-radius: 2px;
+  width: 16px;
+  height: 16px;
+  margin: -8px;
+  cursor: move;
+  -webkit-transition: background 100ms linear;
+}
+.oe_handle:hover {
+  background: #9900ff;
+}
+
+.oe_handle.nw, .oe_handle.n, .oe_handle.ne {
+  top: 0px;
+}
+
+.oe_handle.ne, .oe_handle.e, .oe_handle.se {
+  left: auto;
+  right: 0px;
+}
+
+.oe_handle.sw, .oe_handle.s, .oe_handle.se {
+  top: auto;
+  bottom: 0px;
+}
+
+.oe_handle.nw, .oe_handle.w, .oe_handle.sw {
+  left: 0px;
+}
+
+/* ---- MOBILE PREVIEW ---- */
 .oe_stop_scrolling {
   height: 100%;
   overflow: hidden;
@@ -158,7 +227,6 @@
   border-radius: 10px;
   border-color: #1a1a1a;
   margin: auto;
-  position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 7ed368aca47..29621f95e4b 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -51,6 +51,8 @@
     z-index: 1
     display: none
 
+/* ---- SNIPPET EDITOR ---- */
+
 .oe_snippets
     position: fixed
     left: 0px
@@ -61,6 +63,7 @@
     background: rgb(40,40,40)
     box-shadow: 0px 10px 10px -10px black inset
     overflow-y: auto
+    z-index: 100
 
 .oe_snippet
     display: inline-block
@@ -71,12 +74,12 @@
     border-radius: 3px
     margin: 10px
     margin-right: 0px
-    cursor: move
     position: relative
     box-shadow: 0px 3px 10px rgba(0,0,0,0.2)
     overflow: hidden
     -webkit-user-select: none
     user-select: none
+    cursor: move
 
     .oe_snippet_thumbnail.oe_label
         text-align: center
@@ -99,10 +102,11 @@
         -webkit-transform: scale(0.095)
 
 
-.oe_drop_zone
+/* ---- SNIPPETS DROP ZONES ---- */
+
+
+.oe_drop_zone.oe_insert
     display: block
-    background: rgba(153, 0, 255, 0.17)
-    border-radius: 3px
     height: 32px
     margin: -16px 0px
     -webkit-transition: margin 250ms linear
@@ -112,9 +116,6 @@
     &:last-child:not(:first-child)
         margin-top: -24px
         margin-bottom: -8px
-    &.oe_hover
-        background: rgba(0, 255, 133, 0.22)
-        z-index: 100000
     &:before
         content: ""
         display: block
@@ -128,6 +129,65 @@
     &.oe_hover:before
         border-top: dashed 2px rgba(116, 255, 161, 0.72)
 
+.oe_drop_zone.oe_overlay
+    position: absolute
+    background: rgba(153, 0, 255, 0.17)
+    border-radius: 3px
+
+.oe_drop_zone
+    background: rgba(153, 0, 255, 0.17)
+    border-radius: 3px
+    &.oe_hover
+        background: rgba(0, 255, 133, 0.22)
+        z-index: 99
+
+/* ---- SNIPPET MANIPULATOR ---- */
+
+.oe_snippet_manipulator
+    display: block
+    position: absolute
+    background: rgba(153, 0, 255, 0.1)
+    border-radius: 3px
+    border: solid 1px rgba(153, 0, 255, 0.5)
+    opacity: 0
+    transition: opacity 100ms linear
+    & > .oe_handle
+        display: none
+    &:hover,&.oe_hover
+        opacity: 1
+        & > .oe_handle
+            display: block
+
+.oe_handle
+    position: absolute
+    top: 50%
+    left: 50%
+    display: block
+    background: rgba(255, 255, 255, 1)
+    border: solid 1px rgba(153, 0, 255, 0.5)
+    box-sizing: border-box
+    border-radius: 2px
+    width: 16px
+    height: 16px
+    margin: -8px
+    cursor: move
+    -webkit-transition: background 100ms linear
+    &:hover
+        background: rgb(153, 0, 255)
+
+.oe_handle.nw,.oe_handle.n,.oe_handle.ne
+    top: 0px
+.oe_handle.ne,.oe_handle.e,.oe_handle.se
+    left: auto
+    right: 0px
+.oe_handle.sw,.oe_handle.s,.oe_handle.se
+    top: auto
+    bottom: 0px
+.oe_handle.nw,.oe_handle.w,.oe_handle.sw
+    left: 0px
+
+/* ---- MOBILE PREVIEW ---- */
+
 .oe_stop_scrolling
     height: 100%
     overflow: hidden
@@ -142,7 +202,6 @@ $mobile_preview_close: #E00101
     border-radius: 10px
     border-color: $mobile_preview_border
     margin: auto
-    position: absolute
     top: 0
     left: 0
     bottom: 0
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index eea25bea19d..4567384975d 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,4 +1,3 @@
-@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -159,3 +158,7 @@ header.navbar-fixed-top {
   min-height: 300px;
   color: white;
 }
+
+.dark {
+  background: #eff8f8;
+}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 13037deb2d7..8b885c548d1 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -119,4 +119,7 @@ header.navbar-fixed-top
     min-height: 300px
     color: white
 
+.dark
+    background: rgb(239, 248, 248)
+