editor.css

/*
  PublicLab.Editor(https://github.com/publiclab/PublicLab.Editor/) uses bootstrap version 3.4 
  and plots2 uses bootstrap version 4. Due to class inconsistency between both of the version of
  bootstrap, css customization of some classes have been introduced to make editor compatible with 
  both the versions of bootstrap. This include blockquote, code, pre, .btn-default, .btn-xs.  
*/

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f5f5f5;
  border-radius: 4px;
}

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  /* Account for some code outputs that place code tags in pre tags */
  code {
    padding: 0px;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
  }

/* Adding the bug-btn stylings below, but they can be removed once the next 
version of the editor is released. */

.bug-btn {
  color: #f1f1f1;
  font-size: 1em;
  padding: 0.7em;
  border: none;
  margin-left: 3%;
  border-radius: 2%;
  background: linear-gradient(to right, #424242, #616161);
}

.bug-btn:hover {
  background: linear-gradient(to right, #242323, #838282);
  color: #f1f1f1;
  text-decoration: none;
}

.bug-btn-wrapper {
  margin: 3rem 0 3rem 0;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.comment-preview {
  margin:0;
  margin-bottom:10px;
  background:white;
}

.moderation-notice {
  font-style: italic;
  color: #888;
  padding-left: 8px;
}

.side-dropzone, .profile-dropzone {
  border:4px dashed #ccc;
  color: #aaa;
  font-size:16px;
  padding:20%;
  padding-bottom:30%;
  text-align:center;
  margin-bottom:10px;
  -webkit-border-radius: 8px;
  -moz-border-radius:    8px;
  border-radius:         8px;
}

.side-dropzone.hover, .profile-dropzone.hover {
  background:#ddd;
  color:#bbb;
  border-color:#bbb;
}

.side-dropzone, .profile-dropzone {
  color:#ccc;
}

.side-dropzone .fileinput-button, .profile-dropzone .fileinput-button {
  text-decoration:underline;
}

@media (max-width: 480px) {
  .side-dropzone, .profile-dropzone { padding:0; margin-bottom:10px;}
  .side-dropzone p, .profile-dropzone p { padding:15px; }
}

@media (max-width: 768px) {
  .side-dropzone, .profile-dropzone { padding:0; margin-bottom:10px;}
  .side-dropzone p, .profile-dropzone p {
    padding:20px 20px 30px;
  }
}

@media (max-width: 992px) {
    .side-dropzone, .profile-dropzone { margin-bottom: 10px;}
}

@media (max-width: 480px) {
  .dropzone textarea {
    height:300px;
  }
}

#leadImage {
  margin-bottom:10px;
}

.dropzone textarea {
  border-bottom:none;
  margin-bottom:0;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius:    4px 4px 0 0;
  border-radius:         4px 4px 0 0;
  resize: vertical;
}

.imagebar {
  color: #aaa;
  border:1px solid #bbb;
  border-top:none;
  background:#f8f8f8;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius:    0 0 4px 4px;
  border-radius:         0 0 4px 4px;
}

@media (max-width: 768px) {
  .imagebar {
    width:100%;
  }
}

.imagebar p {
  border-top:2px dotted #ddd;
  padding:8px 12px 0px;
}

.dropzone.hover .imagebar {
  background:#eee;
}

.dropzone.hover textarea {
  background:#f8f8f8
}

.imagebar .progress-bar-container {
  margin: 10px;
  width: 30%;
  background-color: #aaa;
}

#side-progress {
  margin:3px 10px 10px;
  width:30%;
}