Misago/static/cranefly/css/cranefly/editor.less

// Editor style
// -------------------------

.editor {
  background-color: @editorBackground;
  border: 1px solid darken(@editorBackground, 10%);
  border-radius: @baseBorderRadius;
  margin-bottom: @baseLineHeight;

  .editor-error {
    padding: @editorPadding;
    padding-bottom: 0px;
    margin-bottom: @editorPadding * -1;

    .help-block {
      color: @red;
      font-weight: bold;
    }
  }

  .editor-input {
    padding: @editorPadding;

    &>div {
      margin-right: 22px;
      position: relative;

      textarea {
        border: none;
        box-shadow: none;
        margin: @editorPadding * -1;
        padding: @editorPadding;
        padding-right: 32px;
        width: 100%;

        font-family: @monoFontFamily;
      }

      .editor-zen-on {
        display: none;
        position: absolute;
        top: -4px;
        right: -26px;
        padding-left: 8px;

        a {
          border-radius: 4px;
          display: block;
          .opacity(50);
          padding: 2px 0px;
          padding-bottom: 3px;
          width: 29px;

          color: @textColor;
          font-size: 24px;
          text-align: center;

          &:hover, &:active {
            box-shadow: 0px 0px 3px @grayLight;

            text-decoration: none;
          }
        }
      }
    }
  }

  .editor-upload {
    border-top: 1px solid darken(@editorBackground, 10%);
    overflow: auto;
    padding: @editorPadding;
  }

  .editor-attachments {
    margin: 0px;

    li {
      border-top: 1px solid darken(@editorBackground, 6%);
      overflow: auto;
      padding: @editorPadding;

      .attachment-image {
        float: left;

        i {
          display: block;
          height: 40px;
          width: 40px;

          color: @grayLight;
          font-size: 42px;
          text-align: center;
        }

        img {
          background-size: cover;
          border-radius: 3px;
          height: 40px;
          width: 40px;
        }
      }

      .attachment-body {
        margin-left: 52px;

        h4 {
          margin: 0px;
          padding: 0px;

          font-size: @baseFontSize;

          .attachment-removed-message {
            color: @red;
          }
        }

        .attachment-details {
          color: @grayLight;
          font-size: @fontSizeSmall;

          a:link, a:visited {
            color: @gray;
          }

          a:hover, a:active {
            color: @grayDarker;
          }
        }
      }

      .attachment-actions {
        float: right;
        margin-top: 3px;

        .btn {
          margin-left: 8px;

          &.btn-insert {
            color: lighten(@linkColor, 20%);

            &:hover, &:active {
              color: @linkColor;
            }
          }

          &.btn-remove {
            color: lighten(@red, 20%);

            &:hover, &:active {
              color: @red;
            }
          }
        }
      }

      &.attachment-removed {
        .opacity(70);
      }
    }
  }

  .editor-actions {
    border-top: 1px solid darken(@editorBackground, 10%);
    overflow: auto;
    padding: @editorPadding;

    &>.btn {
      margin-left: @baseFontSize;
    }

    .editor-tools {
      margin: 0px;
      margin-right: @editorPadding;

      li {
        float: left;
        margin-right: @editorPadding;

        .btn {
          display: block;
          padding-left: 0px;
          padding-right: 0px;
          width: 28px;

          text-align: center;

          i {
            margin: 0px;
          }
        }
      }
    }

    .editor-help {
      line-height: @baseLineHeight + @editorPadding;
    }
  }
}

.form-container {
  .editor {
    border-color: darken(@editorBackground, 20%);

    .editor-actions {
      border-top-color: darken(@editorBackground, 20%);
    }
  }
}

.zen-overlay {
  display: none;
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;

  &>div {
    background: darken(@white, 3%);
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: @zindexZenWriting;

    .container {
      height: 100%;
      position: relative;

      textarea {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        display: block;
        margin: 0 auto;
        margin-top: 2%;
        padding: 0px @fontSizeLarge;
        resize: none;
        width: 90%;
        height: 91%;

        color: @gray;
        font-family: @monoFontFamily;
        font-size: @baseFontSize * 1.5;
        line-height: @baseLineHeight * 1.5;
      }

      .overlay-options {
        background-color: @grayDarker;
        border-radius: 6px;
        position: absolute;
        top: 4%;
        right: @fontSizeLarge - 26px;

        ul {
          margin: 0px;
          padding: 4px;
          list-style: none;

          li {
            margin: 4px;
            padding: 0px;

            a {
              border-radius: 3px;
              display: block;
              padding: 6px 0px;
              width: 32px;

              color: @grayLight;
              font-size: @fontSizeLarge;
              text-align: center;

              &:hover {
                color: @white;
                text-decoration: none;
              }

              &:active {
                background-color: @grayLighter;

                color: @textColor;
              }
            }

            hr {
              border-color: @grayDark;
              border-bottom: none;
              margin: 0px;
            }
          }
        }
      }
    }
  }
}