weseek__growi/resource/css/_form.scss

// 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-overlay {
      // layout
      display: flex;
      justify-content: center;
      align-items: center;
      // style
      font-size: 2em;
      margin: 0 15px;

      // > * {
      //   pointer-events: none;
      // }
    }
    .dropzone {
      // unuploadable or rejected
      &.dropzone-unuploadable, &.dropzone-rejected {
        .dropzone-overlay {
          background: rgba(0,0,0,0.5);
          color: #333;
        }
      }
      // uploadable
      &.dropzone-uploadable {
        &.dropzone-accepted .dropzone-overlay {
          color: #ccc;
          border: 4px dashed #ccc;
          // insert content
          &:before {
            content: "\f093";   // fa-upload
            font-family: FontAwesome;
            margin-right: 0.5em;
          }
          &:after {
            content: "Drop here to upload";
          }
        }
        // file type mismatch
        &.dropzone-rejected:not(.dropzone-uploadablefile) .dropzone-overlay {
          // insert content
          &:before {
            content: "\f03e";   // fa-upload
            font-family: FontAwesome;
            margin-right: 0.5em;
          }
          &:after {
            content: "Only Image files are allowed";
          }
        }
        // multiple files
        &.dropzone-rejected.dropzone-uploadablefile .dropzone-overlay {
          // insert content
          &:before {
            content: "\f071";   // fa-upload
            font-family: FontAwesome;
            margin-right: 0.5em;
          }
          &:after {
            content: "Only 1 file allowed";
          }
        }
      }
    } // end of.dropzone

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

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

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

}