[IMP] website_sale: responsible design (css height)
[odoo/odoo.git] / addons / website / static / src / css / editor.css
index 451f014..a808b9b 100644 (file)
@@ -8,6 +8,19 @@
   background: transparent;
 }
 
+.navbar.navbar-inverse .cke_toolbar {
+  position: relative;
+  top: 1px;
+}
+.navbar.navbar-inverse .cke_combo_button {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+.navbar.navbar-inverse .cke_button {
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
 .navbar.navbar-inverse .cke_top {
   background: transparent;
   border: none;
   position: fixed;
   top: 0;
   right: 0;
-  z-index: 10;
   display: block;
   width: 100%;
   padding: 2px;
-  margin: 0px;
-  z-index: 10000;
+  margin: 0;
+  z-index: 20000;
   background-color: #414141;
   background: -webkit-linear-gradient(#646060, #262626);
   box-sizing: border-box;
   top: 2px;
 }
 
+/* ---- EDITOR BAR ---- */
+table.editorbar-panel {
+  cursor: pointer;
+  width: 100%;
+}
+table.editorbar-panel td {
+  border: 1px solid #aaaaaa;
+}
+table.editorbar-panel td.selected {
+  background-color: #b1c9d9;
+}
+
+.oe_translate_examples li {
+  margin: 10px;
+  padding: 4px;
+}
+
+.oe_translatable_text {
+  outline: 1px solid black;
+}
+
+.oe_translatable_field {
+  outline: 1px dashed black;
+}
+
+.oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty {
+  outline-color: red;
+}
+
+.oe_translatable_text.oe_dirty:empty {
+  padding: 0 10px;
+}
+
+.oe_translatable_todo {
+  background: #ffffb6;
+}
+
+/* ---- RTE ---- */
+.oe_editable .btn {
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  -o-user-select: auto;
+  user-select: auto;
+}
+
+.modal-dialog.select-image {
+  width: 80%;
+}
+
+.modal .existing-attachments .pager {
+  margin: 0;
+}
+
+.modal .image-preview {
+  margin-bottom: 0.5em;
+}
+
+.cke_widget_drag_handler_container {
+  display: none !important;
+}
+
 /* ---- SNIPPET EDITOR ---- */
-.oe_snippets {
+#oe_snippets {
   position: fixed;
   left: 0px;
   right: 0px;
-  bottom: 0px;
-  max-height: 280px;
-  min-height: 140px;
+  top: 50px;
   background: #282828;
   box-shadow: 0px 10px 10px -10px black inset;
+  z-index: 1010;
+  overflow: hidden;
+  height: 110px;
+}
+#oe_snippets:hover {
+  height: auto;
+}
+#oe_snippets .scroll {
+  white-space: nowrap;
   overflow-y: auto;
-  z-index: 100;
+}
+#oe_snippets .nav {
+  padding: 3px 15px;
+  width: 162px;
+  background: #444444;
+  position: fixed;
+  z-index: 1;
+  height: 108px;
+}
+#oe_snippets .nav > li {
+  display: block;
+  float: none;
+}
+#oe_snippets .nav > li > a {
+  padding: 2px 10px !important;
+  width: 100%;
+  display: block;
+}
+#oe_snippets .pill-content {
+  display: inline-block;
+  height: 110px;
+  white-space: nowrap;
+  padding-left: 166px;
+}
+#oe_snippets .pill-content > div {
+  display: inline-block;
+}
+#oe_snippets .pill-content > div label {
+  width: 44px;
+  height: 100%;
+  color: white;
+  padding-left: 10px;
+}
+#oe_snippets .pill-content > div label div {
+  width: 100px;
+  text-align: center;
+  -webkit-transform: translate(-39px, 44px) rotate(-90deg);
+  -moz-transform: translate(-39px, 44px) rotate(-90deg);
+  -o-transform: translate(-39px, 44px) rotate(-90deg);
+  transform: translate(-39px, 44px) rotate(-90deg);
+  -webkit-transform-origin: 50% 50%;
+  -moz-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
 }
 
 .oe_snippet {
   display: inline-block;
   vertical-align: top;
-  background: white;
-  width: 120px;
-  height: 120px;
+  width: 108px;
+  height: 108px;
   border-radius: 3px;
-  margin: 10px;
-  margin-right: 0px;
+  margin: 1px;
+  margin-top: 0px;
   position: relative;
-  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   -webkit-user-select: none;
   user-select: none;
   cursor: move;
+  pointer-events: none;
 }
-.oe_snippet .oe_snippet_thumbnail.oe_label {
+.oe_snippet .oe_snippet_thumbnail {
+  pointer-events: auto;
   text-align: center;
-  background: #747474;
-  background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
   height: 100%;
-  line-height: 120px;
+  background: transparent;
   color: white;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95);
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset;
-}
-.oe_snippet .oe_snippet_body {
-  display: none;
+  position: relative;
 }
-.oe_snippet > * {
-  pointer-events: none;
+.oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
+  line-height: 18px;
 }
-.oe_snippet > :not(.oe_snippet_body):not(.oe_snippet_thumbnail) {
+.oe_snippet > :not(.oe_snippet_thumbnail) {
   display: none !important;
 }
-.oe_snippet > *:first-child:not(.oe_snippet_thumbnail) {
-  display: block;
-  -webkit-transform-origin-x: 5px;
-  -webkit-transform-origin-y: 10px;
-  -webkit-transform: scale(0.095);
+
+#oe_snippets .oe_snippet_thumbnail {
+  background: #747474;
+  background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset;
 }
 
 /* ---- SNIPPETS DROP ZONES ---- */
 .oe_drop_zone.oe_insert {
   display: block;
-  height: 32px;
-  margin: -16px 0px;
+  height: 48px;
+  margin: 0px;
+  margin-top: -4px;
+  margin-bottom: -44px;
   -webkit-transition: margin 250ms linear;
+  width: 100%;
+  position: absolute;
+  z-index: 1000;
 }
-.oe_drop_zone.oe_insert:first-child:not(:last-child) {
-  margin-top: -8px;
-  margin-bottom: -24px;
-}
-.oe_drop_zone.oe_insert:last-child:not(:first-child) {
-  margin-top: -24px;
-  margin-bottom: -8px;
-}
-.oe_drop_zone.oe_insert:before {
+.oe_drop_zone.oe_insert:not(.oe_vertical):before {
   content: "";
   display: block;
   border-top: dashed 2px rgba(209, 178, 255, 0.72);
   position: relative;
-  top: 16px;
-}
-.oe_drop_zone.oe_insert:first-child:not(:last-child):before {
-  top: 8px;
-}
-.oe_drop_zone.oe_insert:last-child:not(:first-child):before {
-  top: 24px;
+  top: 0px;
 }
 .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;
+.oe_drop_zone.oe_insert.oe_vertical {
+  width: 48px;
+  float: left;
+  position: relative;
+  margin: 0px -24px !important;
+}
+.oe_drop_zone.oe_insert.oe_overlay {
   background: rgba(153, 0, 255, 0.17);
   border-radius: 3px;
 }
 
-.oe_drop_zone {
+.oe_drop_zone, .oe_drop_zone_style {
   background: rgba(153, 0, 255, 0.17);
   border-radius: 3px;
 }
-.oe_drop_zone.oe_hover {
+.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
   background: rgba(0, 255, 133, 0.22);
-  z-index: 99;
+  z-index: 1001;
+}
+
+.oe_drop_zone_style {
+  color: white;
+  height: 48px;
+  margin-bottom: 32px;
 }
 
 /* ---- SNIPPET MANIPULATOR ---- */
-.oe_snippet_manipulator {
-  display: block;
+.oe_overlay {
+  display: none;
   position: absolute;
   background: transparent;
   border-radius: 3px;
-  opacity: 0;
   transition: opacity 100ms linear;
   box-sizing: border-box;
   pointer-events: none;
 }
-.oe_snippet_manipulator .oe_handle {
-  display: none;
-}
-.oe_snippet_manipulator.oe_hover {
-  opacity: 1;
-  cursor: pointer;
-}
-.oe_snippet_manipulator.oe_selected, .oe_snippet_manipulator.oe_active {
-  opacity: 1;
-  background: transparent;
-  border: dashed 1px rgba(153, 0, 255, 0.5);
+.oe_overlay.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(153, 0, 255, 0.5);
 }
-.oe_snippet_manipulator.oe_selected > *, .oe_snippet_manipulator.oe_active > * {
+.oe_overlay.oe_active .oe_handle {
+  display: block !important;
   pointer-events: auto;
 }
-.oe_snippet_manipulator .oe_buttons {
-  display: none;
-  position: absolute;
-  right: 16px;
-  top: 16px;
-  background: #ad00ff;
+.oe_overlay.oe_active .oe_handle:before {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  display: block;
+  background: white;
+  border: solid 1px #9900ff;
+  border-radius: 8px;
+  width: 16px;
+  height: 16px;
+  margin: -8px;
+  padding-left: 1px;
+  font-size: 14px;
+  line-height: 14px;
+  color: #9900ff;
+  -webkit-transition: background 100ms linear;
+}
+.oe_overlay.oe_active .oe_handle:hover:before {
+  background: #9900ff;
   color: white;
-  padding: 0px 2px;
-  border-radius: 3px;
 }
-.oe_snippet_manipulator .oe_buttons .oe_icon {
+.oe_overlay.oe_active .oe_handle.e:before {
+  content: "⇨";
+}
+.oe_overlay.oe_active .oe_handle.s:before {
+  content: "⇩";
+}
+.oe_overlay.oe_active .oe_handle.w:before {
+  content: "⇦";
+}
+.oe_overlay.oe_active .oe_handle.n:before {
+  content: "⇧";
+}
+.oe_overlay .icon.btn {
   display: inline-block;
-  padding: 8px;
+}
+.oe_overlay .oe_overlay_options {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  top: -11px;
+  z-index: 1002;
+}
+.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
+  pointer-events: auto;
   cursor: pointer;
 }
-.oe_snippet_manipulator.oe_active {
-  z-index: 100000;
+.oe_overlay .oe_overlay_options .dropdown {
+  display: inline-block;
+}
+.oe_overlay .oe_overlay_options .dropdown-menu {
+  text-align: left;
+  min-width: 180px;
 }
-.oe_snippet_manipulator.oe_active .oe_handle, .oe_snippet_manipulator.oe_active .oe_buttons {
+.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input {
   display: block;
 }
 
   top: 50%;
   left: 50%;
   display: block;
-  background: white;
-  border: solid 1px #9900ff;
   box-sizing: border-box;
-  border-radius: 8px;
-  width: 16px;
-  height: 16px;
-  margin: -8px;
-  -webkit-transition: background 100ms linear;
-}
-.oe_handle:hover {
-  background: #9900ff;
+  width: 8px;
+  height: 8px;
+  margin: -4px;
 }
 
-.oe_handle.nw, .oe_handle.n, .oe_handle.ne {
+.oe_handle.n {
+  left: 2px;
+  width: 100%;
   top: 0px;
+  cursor: s-resize;
 }
 
-.oe_handle.ne, .oe_handle.e, .oe_handle.se {
+.oe_handle.e {
   left: auto;
+  top: 2px;
+  height: 100%;
   right: 0px;
+  cursor: w-resize;
 }
 
-.oe_handle.sw, .oe_handle.s, .oe_handle.se {
+.oe_handle.s {
   top: auto;
+  left: 2px;
+  width: 100%;
   bottom: 0px;
-}
-
-.oe_handle.nw, .oe_handle.w, .oe_handle.sw {
-  left: 0px;
-}
-
-.oe_handle.n {
   cursor: n-resize;
 }
 
-.oe_handle.ne {
-  cursor: ne-resize;
-}
-
-.oe_handle.nw {
-  cursor: nw-resize;
+.oe_handle.w {
+  top: 2px;
+  height: 100%;
+  left: 0px;
+  cursor: e-resize;
 }
 
-.oe_handle.s {
-  cursor: s-resize;
+.s-resize-important, .s-resize-important * {
+  cursor: s-resize !important;
 }
 
-.oe_handle.se {
-  cursor: se-resize;
+.n-resize-important, .n-resize-important * {
+  cursor: n-resize !important;
 }
 
-.oe_handle.sw {
-  cursor: sw-resize;
+.e-resize-important, .e-resize-important * {
+  cursor: e-resize !important;
 }
 
-.oe_handle.e {
-  cursor: e-resize;
+.w-resize-important, .w-resize-important * {
+  cursor: w-resize !important;
 }
 
-.oe_handle.w {
-  cursor: w-resize;
+.move-important, .move-important * {
+  cursor: move !important;
 }
 
 /* ---- MOBILE PREVIEW ---- */
 .oe_seo_configuration .oe_seo_suggestion {
   cursor: pointer;
 }
+.oe_seo_configuration .oe_seo_keyword {
+  padding: 0.2em 0.4em 0.2em 0.5em;
+  border-radius: 0.4em;
+}
+.oe_seo_configuration .keyword-in-title {
+  background-color: #5cb85c;
+  color: white;
+}
+.oe_seo_configuration .keyword-in-description {
+  background-color: #428bca;
+  color: white;
+}
+.oe_seo_configuration .keyword-in-body {
+  background-color: #5bc0de;
+  color: white;
+}
+
+/* ---- ACE EDITOR ---- */
+.oe_ace_view_editor {
+  transition: all 0.2s ease-in;
+  -webkit-transition: all 0.2s ease-in;
+  -ms-transition: all 0.2s ease-in;
+  -o-transition: all 0.2s ease-in;
+  -moz-transition: all 0.2s ease-in;
+  opacity: 0.3;
+  position: fixed;
+  top: 51px;
+  right: 0;
+  z-index: 1000;
+  height: 100%;
+}
+.oe_ace_view_editor .oe_ace_view_editor_title {
+  width: 100%;
+  padding-top: 4px;
+  padding-left: 4px;
+  height: 40px;
+  background: #2f3129;
+}
+.oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
+  width: 50%;
+  height: 32px;
+  font-size: 14px;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
+  line-height: normal;
+}
+.oe_ace_view_editor .oe_ace_view_editor_title .btn {
+  height: 32px;
+  padding: 0 4px 0 4px;
+  font-size: 14px;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
+  line-height: normal;
+}
+.oe_ace_view_editor .ace_editor {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  bottom: 51px;
+  left: 0;
+  width: 720px;
+}
+.oe_ace_view_editor:hover {
+  opacity: 1;
+}
+.oe_ace_view_editor.oe_ace_open {
+  width: 720px;
+}
+.oe_ace_view_editor.oe_ace_closed {
+  width: 0;
+  opacity: 0;
+}