// import crowi variable
@import 'utilities';

.crowi.main-container .main .content-main.on-edit { // {{{ Edit Form of Page
  padding: 0;

  position: fixed;
  z-index: 1050;
  background: #fff;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  .nav {
    margin-top: 8px;
    height: 40px;

    .dropdown-menu {
      z-index: 1060;
    }
  }

  .tab-content {
    top: 48px;
    bottom: 58px;
    position: absolute;
    z-index: 1051;
    left: 0;
    right: 0;
    margin-top: 4px;

    .alert-info.alert-moved,
    .alert-info.alert-unlinked {
      display: none;
    }

    // layout (height: 100%)
    .edit-form {
      height: 100%;
      > form {
        height: 100%;
        > #page-editor {
          height: 100%;

          .row, .col-md-6, .col-sm-12,
          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
          .page-editor-preview-body
          {
            height: 100%;
          }
        }
      }
    }
  }

  .page-form-setting {
    .extended-setting {
      label {
        margin-bottom: 0;
      }
    }
  }

  .page-editor-editor-container {
    padding-right: 0;
    border-right: 1px solid #ccc;

    // override CodeMirror styles
    .CodeMirror {
      pre {
        font-family: $font-family-monospace-not-strictly;
      }
      .cm-matchhighlight {
        background-color: cyan;
      }
      .CodeMirror-selection-highlight-scrollbar {
        background-color: darkcyan;
      }
    }

    // for Dropzone
    .dropzone {
      @mixin insertFontAwesome($code) {
        &:before {
          margin-right: 0.2em;
          font-family: FontAwesome;
          content: $code;
        }
      }

      // default layout and style
      .dropzone-overlay {
        // layout
        display: flex;
        justify-content: center;
        align-items: center;
        // style
        margin: 0 15px;
      }
      .dropzone-overlay-content {
        font-size: 2em;
        padding: 0.2em;
        border-radius: 5px;
      }

      // unuploadable or rejected
      &.dropzone-unuploadable, &.dropzone-rejected {
        .dropzone-overlay {
          background: rgba(200,200,200,0.8);
        }
        .dropzone-overlay-content {
          color: #444;
        }
      }
      // uploading
      &.dropzone-uploading {
        .dropzone-overlay {
          background: rgba(255,255,255,0.5);
        }
        .dropzone-overlay-content {
          padding: 0.3em;
          background: rgba(200,200,200,0.5);
          color: #444;
        }
      }

      // unuploadable
      &.dropzone-unuploadable {
        .dropzone-overlay-content {
          // insert content
          @include insertFontAwesome("\f06a ");  // fa-exclamation-circle
          &:after {
            content: "File uploading is disabled";
          }
        }
      }
      // uploadable
      &.dropzone-uploadable {
        // accepted
        &.dropzone-accepted:not(.dropzone-rejected) {
          .dropzone-overlay {
            border: 4px dashed #ccc;
          }
          .dropzone-overlay-content {
            // insert content
            @include insertFontAwesome("\f093");  // fa-upload
            &:after {
              content: "Drop here to upload";
            }
            // style
            color: #666;
            background: rgba(200,200,200,0.8);
          }
        }
        // file type mismatch
        &.dropzone-rejected:not(.dropzone-uploadablefile) .dropzone-overlay-content {
          // insert content
          @include insertFontAwesome("\f03e");  // fa-picture-o
          &:after {
            content: "Only an image file is allowed";
          }
        }
        // multiple files
        &.dropzone-accepted.dropzone-rejected .dropzone-overlay-content {
          // insert content
          @include insertFontAwesome("\f071");  // fa-fa-exclamation-triangle
          &:after {
            content: "Only 1 file is allowed";
          }
        }
      }
    } // end of.dropzone

    .btn-open-dropzone {
      font-size: small;
      text-align: right;
      padding-top: 3px;
      padding-bottom: 0;
      border: none;
      border-radius: 0;
      border-top: 1px dotted #ccc;
      background-color: transparent;

      &:active {
        box-shadow: none;
      }
    }
  }
  .page-editor-preview-container {
  }

  .page-editor-preview-body {
    padding-top: 18px;
    padding-right: 15px;
    overflow-y: scroll;
  }

  .form-group.form-submit-group {
    position: fixed;
    z-index: 1054;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 8px;
    min-height: 50px;
    background: rgba(255,255,255,.8);
    border-top: solid 1px #ccc;
    margin-bottom: 0;
  }

  #page-editor-options-selector {
    label {
      margin-right: 0.5em;
    }

    .btn-style-active-line, .btn-render-mathjax-in-realtime {
      &:hover:not(.active), &:focus:not(.active) {
        background-color: inherit;
      }
    }
  }

  @media (max-width: $screen-xs-max) { // {{{ less than smartphone size
    #page-editor-options-selector {
      display: none;
    }
  }
} // }}}

.crowi.main-container .main .page-list.content-main { // {{{ Edit Form of Page List

  .close-button {
    display: none;
  }
}
.crowi.main-container .main .page-list.content-main.on-edit { // {{{ Edit Form of Page List
  .close-button {
    display: block;
  }

  .page-list-container {
    display: none;
  }

  .portal-form-header {
    height: 16px;
    padding: 8px;
    border-bottom: solid 1px #ccc;
  }
} // }}}

@media (max-width: $screen-sm-max) { // {{{ less than tablet size

  .content-main.on-edit {
    .form-group.form-submit-group {
      select.form-control {
        display: inline-block;
        max-width: 50%;
      }
    }
  }

} // }}}

@media (max-width: $screen-xs-max) { // {{{ less than smartphone size
  #edit-form-submit {
    float: right;
  }
} // }}}

// overwrite .CodeMirror-hints
.CodeMirror-hints {
  // FIXME: required because .content-main.on-edit has 'z-index:1050'
  z-index: 1060 !important;

  max-height: 30em !important;

  .CodeMirror-hint.crowi-emoji-autocomplete {
    font-family: $font-family-monospace-not-strictly;
    line-height: 1.6em;

    .img-container {
      display: inline-block;
      width: 30px;
    }
  }
  // active line
  .CodeMirror-hint-active.crowi-emoji-autocomplete {
    .img-container {
      font-size: 15px;  // adjust to .wiki
      padding-top: 0.3em;
      padding-bottom: 0.3em;
    }
  }

}