odoo_source/addons/website/static/src/css/editor.css

/* ---- SummerNote Minimal Reset ---- {{{ */
.note-popover .popover {
  position: fixed !important;
  top: -9px !important;
  right: auto !important;
  left: 300px !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
  z-index: 1040;
}
.note-popover .popover-content {
  padding: 0 !important;
  margin: 0 0 0 6px !important;
}
.note-popover .popover-content > div {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.note-popover .popover-content > a {
  border-radius: 3px;
  background-color: #fff;
  border-color: #ccc;
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1.5;
}
.note-popover .popover-content .note-para .dropdown-menu {
  min-width: 148px !important;
  padding: 5px 0 5px 5px !important;
}
.note-popover .popover-content .note-ul .dropdown-menu {
  min-width: 150px !important;
  padding: 5px 0 5px 5px !important;
}
.note-popover .popover-content .note-ul .dropdown-menu .note-li {
  margin-right: 5px;
}
.note-popover .popover-content > span {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 3px;
  background-color: white;
  border-color: #cccccc;
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1.5;
}
.note-popover .popover-content .colorpicker {
  margin: 0;
}
.note-popover .popover-content .colorpicker td > * {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: 1px solid #fff;
}
.note-popover .popover .popover-content .dropdown-menu a {
  display: block;
}
.note-popover .arrow {
  display: none;
}

.o_editable:not(:empty):not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover, .o_editable[data-oe-type]:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover {
  /* to do change into primary color in less */
  -moz-box-shadow: #3071a9 0 0 5px 2px inset;
  -webkit-box-shadow: #3071a9 0 0 5px 2px inset;
  box-shadow: #3071a9 0 0 5px 2px inset;
}
.o_editable:focus, .o_editable[data-oe-type] {
  min-height: 0.8em;
  min-width: 8px;
}
.o_editable.o_is_inline_editable {
  display: inline-block;
}

.editor_enable [data-oe-readonly]:hover {
  cursor: default;
}
/* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
.o_editable[placeholder]:empty:not(:focus):before {
    content: attr(placeholder);
    opacity: 0.3;
}
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Prevent firefox handler. */
.o_editable .btn {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/* ---- OpenERP Style ---- {{{ */
.oe_website_editorbar {
  position: fixed;
  top: 0;
  right: 0;
  display: block;
  width: 100%;
  padding: 2px;
  margin: 0;
  z-index: 20000;
  background: #414141, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY0NjA2MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI2MjYyNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: #414141, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646060), color-stop(100%, #262626));
  background: #414141, -moz-linear-gradient(#646060, #262626);
  background: #414141, -webkit-linear-gradient(#646060, #262626);
  background: #414141, linear-gradient(#646060, #262626);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.oe_website_editorbar li {
  display: inline;
  color: #eee;
}
.oe_website_editorbar li:hover {
  background: rgba(0, 0, 0, 0.2);
  text-shadow: black 0px 0px 3px;
  color: white;
}

.oe_website_editorbar .oe_rte_toolbar div.dropdown {
  display: inline-block;
}
.oe_website_editorbar .oe_rte_toolbar div.dropdown li {
  display: list-item;
}
.oe_website_editorbar .oe_rte_toolbar button {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
}
.oe_website_editorbar .oe_rte_toolbar button.oe_button_list {
  padding-right: 3px;
}
.oe_website_editorbar .oe_rte_toolbar button.oe_button_list:after {
  content: "";
  padding-left: 6px;
}

.oe_editable:focus {
  outline: none !important;
}

.css_editable_display {
  display: block !important;
}

.css_editable_hidden {
  display: none !important;
}

.editor_enable .css_editable_mode_hidden {
  display: none;
}

.editor_enable .css_non_editable_mode_hidden {
  display: block !important;
}

.o_editable .media_iframe_video .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;
}
.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" !important;
}

.o_editable.oe_structure.oe_empty > p:empty:only-child, .o_editable[data-oe-type=html] > p:empty:only-child {
  color: #aaa;
}
.o_editable.oe_structure.oe_empty:empty, .o_editable[data-oe-type=html]:empty, .o_editable.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, .o_editable[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child, .o_editable.oe_structure.oe_empty > p:empty:only-child, .o_editable[data-oe-type=html] > p:empty:only-child {
  background-image: none !important;
}
.o_editable.oe_structure.oe_empty:empty:before, .o_editable[data-oe-type=html]:empty:before, .o_editable.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, .o_editable[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before, .o_editable.oe_structure.oe_empty > p:empty:only-child:before, .o_editable[data-oe-type=html] > p:empty:only-child:before {
  content: "Write your text here" !important;
}
.o_editable.oe_structure.oe_empty:empty:focus:before, .o_editable[data-oe-type=html]:empty:focus:before, .o_editable.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:focus:before, .o_editable[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:focus:before, .o_editable.oe_structure.oe_empty > p:empty:only-child:focus:before, .o_editable[data-oe-type=html] > p:empty:only-child:focus:before {
  display: none;
}

#oe_snippets ~ #wrapwrap .oe_structure.oe_empty:empty, #oe_snippets ~ #wrapwrap [data-oe-type=html]:empty, #oe_snippets ~ #wrapwrap .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, #oe_snippets ~ #wrapwrap [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
  background-image: url("/website/static/src/img/drag_here.png") !important;
}
#oe_snippets ~ #wrapwrap .oe_structure.oe_empty:empty:before, #oe_snippets ~ #wrapwrap [data-oe-type=html]:empty:before, #oe_snippets ~ #wrapwrap .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, #oe_snippets ~ #wrapwrap [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before {
  content: "Drag Building Blocks Here" !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: none;
  background-repeat: no-repeat;
  background-position: center;
  height: 220px !important;
}

[data-oe-type=html].oe_no_empty:empty:before {
  content: "" !important;
}

[data-oe-type=html].oe_no_empty:empty {
  background-image: none !important;
  height: 16px !important;
}

#website-top-edit {
  width: 100%;
}
#website-top-edit > ul > li {
  margin: 0;
}

#website-top-navbar {
  min-height: 34px;
  height: 34px;
}
#website-top-navbar form {
  margin: 0;
}
#website-top-navbar form button, #website-top-navbar form a {
  padding: 4px 8px 4px 8px;
  margin-top: 2px;
  font-size: 13px;
}

/* ---- EDITOR BAR ---- {{{ */
table.editorbar-panel {
  cursor: pointer;
  width: 100%;
}
table.editorbar-panel td {
  border: 1px solid #aaa;
}
table.editorbar-panel td.selected {
  background-color: #b1c9d9;
}

.link-style .dropdown > .btn {
  min-width: 160px;
}
.link-style .link-style {
  display: none;
}
.link-style li {
  text-align: center;
}
.link-style li label {
  width: 100px;
  margin: 0 5px;
}
.link-style .col-sm-2 > * {
  line-height: 2em;
}

/* ---- TRANSLATIONS ---- {{{ */
.oe_translate_or {
  color: white;
  padding: 0 0 0 1em;
}

.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;
}
.oe_translatable_todo:hover {
  background: inherit;
  cursor: text;
}

/* ---- MENU ---- {{{ */
div.oe_menu_buttons {
  top: -8px;
  right: -8px;
}

ul.oe_menu_editor .fa-home {
  display: none;
}
ul.oe_menu_editor > li:first-child > div > span > .fa-home {
  display: block;
}
ul.oe_menu_editor .oe_menu_placeholder {
  outline: 1px dashed #4183C4;
}
ul.oe_menu_editor ul {
  list-style: none;
}
ul.oe_menu_editor li div {
  cursor: move;
}
ul.oe_menu_editor .disclose {
  cursor: pointer;
  width: 10px;
  display: none;
}

/* ---- RTE ---- {{{ */
.oe_editable .btn, .btn.oe_editable {
  -moz-user-select: auto;
  -ms-user-select: auto;
  -webkit-user-select: auto;
  user-select: auto;
  cursor: text !important;
}

.modal-dialog.select-media {
  width: 80%;
}

.modal .existing-attachments .pager {
  margin: 0;
}

.modal .image-preview {
  margin-bottom: 0.5em;
}

.modal-footer {
  text-align: left;
}

.modal.nosave .wait {
  display: inline-block !important;
  visibility: visible !important;
}
.modal.nosave .modal-body .filepicker, .modal.nosave .modal-body .image-preview {
  display: none;
}
.modal.nosave .modal-body .wait {
  width: 100%;
}
.modal.nosave .modal-footer .save {
  display: none;
}

.modal .font-icons-icons {
  font-size: 2em;
  max-height: 9em;
  overflow: auto;
}
.modal .font-icons-icons .font-icons-icon {
  display: inline-block;
  width: 2em;
  padding: 0.25em;
  text-align: center;
  cursor: pointer;
}
.modal .font-icons {
  position: relative;
  display: block;
}
.modal .font-icons:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 2em;
}
.modal #icon-search {
  padding-left: 2.5em;
}
.modal .font-icons-selected {
  background-color: #ddd;
}

.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;
}

.oe_carlos_danger {
  outline: 1px solid red !important;
  background-color: #ffd9dd !important;
}

.hover-edition {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  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;
}

.note-editable .fa {
  cursor: pointer;
}

.img-responsive {
  text-align: center;
}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  min-height: 24px;
}

/* ---- MOBILE PREVIEW ---- {{{ */
.oe_mobile_preview.modal .modal-content {
  height: 660px;
  background-color: #000000;
  border: 2px solid #1C1F1F;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 330px;
}
.oe_mobile_preview.modal .modal-content .modal-header {
  background-color: #000000;
  border-bottom: 0;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}
.oe_mobile_preview.modal .modal-content .modal-header .modal-title {
  color: #1C1F1F;
}
.oe_mobile_preview.modal .modal-content .modal-header .close {
  color: lightgrey;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.oe_mobile_preview.modal .modal-content .modal-header .close:hover {
  color: #E00101;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.oe_mobile_preview.modal .modal-content .modal-body {
  background-color: #000000;
  max-height: 600px;
  padding: 0;
  margin: 0;
}
.oe_mobile_preview.modal .modal-content .modal-body .oe_mobile_viewport {
  width: 320px;
  height: 568px;
  padding: 5px;
  border: none;
}
.oe_mobile_preview.modal .modal-content .modal-footer {
  background-color: #000000;
}

/* ---- SEO TOOLS ---- {{{ */
.oe_seo_configuration .modal-dialog {
  width: 80%;
}
.oe_seo_configuration .oe_remove {
  color: #E00101;
}
.oe_seo_configuration .oe_seo_suggestion {
  cursor: pointer;
}
.oe_seo_configuration .oe_seo_keyword {
  padding: 0.2em 0.4em 0.2em 0.5em;
  -moz-border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  border-radius: 0.4em;
}
.oe_seo_configuration li.oe_seo_preview_g {
  line-height: 1.2;
  list-style: none;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  font-size: small;
  font-family: arial, sans-serif;
}
.oe_seo_configuration li.oe_seo_preview_g h3 {
  font-size: medium;
}
.oe_seo_configuration li.oe_seo_preview_g .r {
  margin: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  white-space: nowrap;
}
.oe_seo_configuration li.oe_seo_preview_g .r a {
  color: #1e0fbe;
  text-decoration: underline;
  text-transform: none;
}
.oe_seo_configuration li.oe_seo_preview_g .r a em {
  font-style: normal !important;
}
.oe_seo_configuration li.oe_seo_preview_g .s {
  color: #444;
  max-width: 42em;
}
.oe_seo_configuration li.oe_seo_preview_g .kv, .oe_seo_configuration li.oe_seo_preview_g .slp {
  display: block;
  margin-bottom: 1px;
}
.oe_seo_configuration li.oe_seo_preview_g .f {
  color: #666;
  margin-bottom: 1px;
}
.oe_seo_configuration li.oe_seo_preview_g .f cite {
  color: #006621;
  font-style: normal;
  font-size: 14px;
}
.oe_seo_configuration li.oe_seo_preview_g .st {
  line-height: 1.24;
}

/* ---- ACE EDITOR ---- {{{ */
.oe_ace_view_editor {
  position: fixed;
  right: 0;
  z-index: 1001;
  height: 100%;
  background: #2F3129;
  color: white;
}
.oe_ace_view_editor .oe_ace_view_editor_title {
  width: 100%;
  padding-top: 0;
  padding-left: 0;
  height: 30px;
}
.oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
  width: 50%;
  height: 30px;
  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: 30px;
  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: 50px;
  right: 0;
  left: 0;
}
.oe_ace_view_editor .ace_editor .ace_gutter {
  cursor: ew-resize;
}
.oe_ace_view_editor #ace-view-id {
  padding: 0 1em;
}
.oe_ace_view_editor.oe_ace_open {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=97);
  opacity: 0.97;
}
.oe_ace_view_editor.oe_ace_closed {
  z-index: -1000;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

.oe_include_bundles {
  font-weight: normal;
  padding: 0 8px;
}

/* ---- CUSTOMIZE THEME ---- {{{ */
#theme_error {
  background: #ffc;
}

#theme_customize_modal {
  overflow: visible;
  z-index: 1020;
  background: transparent;
  display: block;
}
#theme_customize_modal .modal-dialog {
  top: 75px;
  width: auto;
  margin: 0;
  position: absolute;
  right: 10px;
  font-family: "Lato-Regular";
  font-weight: normal;
  text-transform: capitalize;
  letter-spacing: normal;
}
#theme_customize_modal .modal-h5 {
  color: #ffffff;
  font-family: "Lato-Regular";
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  font-size: 14px;
  color: white;
  padding: 4px 0 4px 4px;
  background-color: #bdc3c7;
}
#theme_customize_modal table {
  width: 100%;
  margin-bottom: 8px;
}
#theme_customize_modal label {
  display: block;
  text-align: center;
}
#theme_customize_modal label > div, #theme_customize_modal label > img {
  border: 1px solid #fff;
  line-height: 30px;
  font-size: 0.9em;
  margin: 2px 4px;
}
#theme_customize_modal label.checked > div, #theme_customize_modal label.checked > img {
  box-shadow: 2px 2px 3px #888;
  border: 1px solid #666;
}
#theme_customize_modal label img {
  width: 60px;
  height: 35px;
  margin: 2px;
  border: 1px solid rgba(136, 136, 136, 0.5);
}
#theme_customize_modal label input {
  display: none;
}
#theme_customize_modal .loading_backdrop {
  display: none;
}
#theme_customize_modal.loading .loading_backdrop {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
  position: absolute;
  z-index: 1;
}

/* ---- force the browse to re-compute the stylesheets ---- */
body.theme_customize_css_loading {
  magin-top: 1px;
}
body.theme_customize_css_loading #wrapwrap {
  magin-top: -1px;
}