芝麻web文件管理V1.00

编辑当前文件:/home/pulsehostuk9/www/cloud.pulsehost.co.uk/modules/MailWebclient/styles/common/html-editor.less

.html_editor {
  .box-sizing;

height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

.disable_mask {
    background: #cccccc;
    cursor: default;
    height: 100%;
    opacity: 0.2;
    position: absolute;
    width: 100%;
    z-index: 100;
    left: 0;
    top: 0;
  }

.html_source_container {
    border: 0;
    height: 100%;
    width: 100%;
    background: white;

.cm-editor {
      height: 100%;
    }
  }

.workarea {
    .box-sizing;

border: none;
    height: 100%;
    width: 100%;

.scroll-inner {
      background: #ffffff;
    }

.crea-content-editable {
      .inactive& {
        opacity: 0.2;
      }

.box-sizing;

cursor: text;
      height: 100% !important;
      outline: 0px;
      padding: 20px 24px;
      width: 100% !important;
      word-wrap: break-word;

a {
        cursor: text;
      }

p {
        margin: 0;
      }

img {
        cursor: pointer;
      }
    }

li {
      margin-bottom: 0.6em;
    }
  }

.uploader_mask {
    .box-sizing;

background: #fffdd6;
    color: #d3b910;
    font-size: 18pt;
    height: 100%;
    left: 0px;
    opacity: 0;
    padding: 11px;
    position: absolute;
    text-align: center;
    top: 0px;
    visibility: hidden;
    width: 100%;

.transition(ease 250ms opacity 0s);

.inner {
      .box-sizing;

border: 3px dashed #e2da36;
      border-radius: 5px;
      height: 100%;
    }

&.active,
    &.editorDragOver {
      opacity: 0.5;
      visibility: visible;
    }
  }

.toolbar {
    .user-select(none);

background: #fdfdfd;
    border: none;
    cursor: default;
    padding: 0px 4px;
    position: relative;

.content {
      padding: 0px;

.separator {
        border-left: 1px solid #dddddd;
        border-right: 1px solid #ffffff;
        display: inline-block;
        height: 32px;
        margin: 0px 4px;
        vertical-align: middle;

.inactive&,
        .inactive&:hover,
        .plaintext_mode&,
        .plaintext_mode&:hover,
        .edit_source_mode&,
        .edit_source_mode&:hover {
          opacity: 0.4;
        }
      }

.button {
        background: #dddddd;
        border: 1px solid #cccccc;
        border-radius: 3px;
        display: inline-block;
        cursor: pointer;
        font-size: 11pt;
        padding: 4px 6px;

&:hover {
          background: #e3e3e3;
        }
      }

.item {
        background: none;
        border: 1px solid transparent;
        box-shadow: none;
        cursor: pointer;
        display: inline-block;
        height: 16px;
        line-height: 16px;
        margin: 4px 1px !important;
        outline: 0px;
        padding: 4px;
        vertical-align: middle;

.item:hover {
          background: #eeeeee;
          border: 1px solid #cccccc;
          box-shadow: 0px 0px 3px #eeeeee, inset 1px 1px 0px #ffffff;
        }

.inactive&,
        .inactive&:hover {
          background: none;
          cursor: default;
          opacity: 0.2;
          pointer-events: none;
        }

.plaintext_mode&,
        .plaintext_mode&:hover,
        .edit_source_mode&,
        .edit_source_mode&:hover {
          background: none;
          cursor: default;
          opacity: 0.2;
          pointer-events: none;
        }

&.select {
          padding: 0px 0px;

&:hover {
            background: none;
          }

.input {
            font-size: 10pt;
            margin-top: -2px;
            max-width: 200px;
            padding: 0px !important;
            width: auto;
          }
        }

// .icon {
        // 	background-image: url("../../images/sprites.png");
        // 	background-repeat: no-repeat;
        // 	display: inline-block;
        // 	height: 16px;
        // 	vertical-align: middle;
        // 	width: 16px;
        // }

.icon {
          .init-icon-font();
          width: 16px;
          height: 16px;
          font-size: 16px;
          line-height: 16px;

&:before {
            color: #595959;
            vertical-align: top;
          }
        }

&.link .icon:before {
          content: '\e930';
          // background-position: 0px -320px;
        }

&.unlink .icon:before {
          content: '\e930';
          // background-position: -40px -320px;
        }

&.image .icon:before {
          content: '\e933';
          // background-position: -440px -320px;
        }

&.slist .icon:before {
          content: '\e931';
          // background-position: -40px -320px;
        }

&.uslist .icon:before {
          content: '\e932';
          // background-position: -80px -320px;
        }

&.hline .icon:before {
          background-position: -640px -320px;
          width: 18px;
        }

&.bold .icon:before {
          content: '\e92b';
          // background-position: -200px -320px;
        }

&.italic .icon:before {
          content: '\e92c';
          // background-position: -120px -320px;
        }

&.underline .icon:before {
          content: '\e92d';
          // background-position: -160px -320px;
        }
        &.strike_through .icon:before {
          content: '\e92e';
          // background-position: -520px -320px;
        }

&.aleft .icon {
          background-position: -320px -320px;
        }

&.acenter .icon {
          background-position: -360px -320px;
        }

&.aright .icon {
          background-position: -400px -320px;
        }

&.ajustify .icon {
          background-position: -440px -320px;
        }

&.color .icon:before {
          content: '\e92f';
          // background-position: -400px -320px;
        }

// &.background .icon {
        // 	background-position: -40px -320px;
        // }

&.clear .icon:before {
          content: '\e934';
          // background-position: -480px -320px;
        }

&.undo .icon:before {
          content: '\e929';
          // background-position: -560px -320px;
        }

&.redo .icon:before {
          content: '\e92a';
          // background-position: -600px -320px;
        }

&.template {
          .icon:before {
            content: '\e90e';
          }
          .dropdown_content {
            padding: 0px;
            min-width: fit-content;
            .scroll-inner {
              width: max-content !important;
              div {
                border-top: 1px solid #cbc8c0;
                padding: 10px;
                &:hover {
                  background: #e0e0e0;
                }
              }
            }
          }
        }

&.source_code {
          .edit_source_mode& {
            pointer-events: all;
            opacity: 1;
            cursor: pointer;
          }

.icon:before {
            content: '\e935';
          }

&.show_preview {
            .icon:before {
              content: '\e936';
            }
          }
        }
      }

.dropdown {
        color: #000000;
        bottom: -4px;

.inactive& {
          left: -10000px;
        }

&.color {
          white-space: nowrap;
        }

.dropdown_content {
          background: #eeeeee;
          border: 1px solid #cccccc;
          border-top: 1px solid #fafafa;
          border-radius: 0px 0px 3px 3px;
          padding: 4px;

.input {
            font-size: 11pt;
            margin: 0px;
            padding: 3px 5px 2px;
            vertical-align: top;
            width: auto;
          }
        }
      }

.color_table {
        display: inline-block;
        margin-right: 6px;
        vertical-align: bottom;

&:last-child {
          margin-right: 0px;
        }

.title {
          display: inline-block;
          margin: 2px 0px 4px;
          padding: 0px;
        }

.row {
          display: block;
          font-size: 0px;
          margin: 0px !important;
          white-space: nowrap;
        }

.color-item {
          cursor: pointer;
          display: inline-block;
          height: 16px;
          margin: 2px;
          vertical-align: bottom;
          width: 16px;

&:hover {
            box-shadow: 0px 0px 2px #aaaaaa;
            height: 18px;
            margin: 1px;
            width: 18px;
          }
        }
      }
    }
  }
}