/* Styles for the new article, article edit, article translation, and page move
   templates. */

@import 'includes/vars.styl';
@import 'includes/mixins.styl';

/* Space needed to account for the absolutely-positioned #page-buttons element. */
$space-for-buttons = 40px;

/* Space around the <summary> element. Store these to align other elements with <summary>. */
$summary-margin = 0 ($grid-spacing / 2) ($grid-spacing / 2);
$summary-padding = 5px;

#new-document, #edit-document, #translate-document, .move-page {
    .page-buttons {
        bidi-value(text-align, right, left);
        float: none;
        padding: 0;
        margin-bottom: -10px;

        li {
            margin-bottom: 10px;
        }

        a, button {
            border: 0;
            display: inline-block;
            vendorize(box-shadow, 1px 1px 0 rgba(0,0,0,.25));
        }
    }
    iframe#save-and-edit-target {
        offscreen();
    }
}

#new-document, #edit-document, #translate-document {
    .editing {
        position: relative;
    }

    h1 {
        letter-spacing: normal;
        line-height: 40px;
        margin-bottom: ($grid-spacing);

        .action {
            set-larger-font-size();
            display: block;
            line-height: 20px;
        }

        em {
            color: #333;
            font-style: normal;
            margin-left: -3px;
            text-transform: none;
        }
    }

    h2 {
        margin-bottom: $grid-spacing;
        text-transform: none;
    }

    summary h2 {
        display: inline-block;
        margin-bottom: 0;
    }

    h2 {$selector-icon}, h3 {$selector-icon} {
        @extend $right-icons;
    }

    .title {
        h1 {
            color: #888;
            bidi-value(float, left, right);
        }
    }

    #page-attachments-new-table {
        textarea {
            height: 40px;
        }
    }

    summary {
        clearfix();
        set-font-size(20px);
        cursor: pointer;
        margin: $summary-margin;
        padding: $summary-padding;
    }

    .page-buttons {
        z-index: 1; /* Move above the .title and .metadata classes to be clickable. */
    }
}

#new-document, #edit-document {
    ul.metadata {
        display: none;
        float: none;
        margin-top: ($grid-spacing / 2);
        margin-bottom: ($grid-spacing / 2);
        width: auto;

        .new & {
            display: block;
        }

        li {
            .metadataDisplay {
                display: inline-block;
                padding: 8px 0 0 3px;
            }

            &.metadata-choose-parent {
                display: none;
                set-font-size($small-bump-font-size);
            }

            input, input#id_title {
                float: left;
                margin: 2px 0px;
                padding: 6px 8px;
                width: 70%;
            }

            select {
                float: left;
                margin: 5px 0;
            }

            label, legend {
                color: #888;
                display: block;
                float: left;
                font-weight: bold;
                line-height: 2.5;
                padding-right: 5px;
                text-align: right;
                width: auto;
            }
        }
    }

    .metadata .duration-container {
        display: inline-block;
        float: left;
        margin-left: 5px;

        input {
            display: inline-block;
            width: 50px;
        }

        div {
            display: inline-block;
            margin-right: 5px;
        }

        label {
            float: right;
            margin-left: 5px;
        }
    }

    #ace_content {
        height: 500px;
        position: relative;
        width: 100%;

        .ace_warning, .ace_error {
            background-image: none;
        }
    }
}

#edit-document {
    #article-head {
        position: relative;
    }


    h1{
        margin-top: 0;
    }

    .first-contrib-welcome {
        background: $light-background-color;
        border: 5px solid $header-background-color;
        padding: 15px 15px 10px;
        margin-bottom: 20px;

        h2 {
            margin: 0 0 10px;
            font: bold 18px/1.5 'Open Sans', sans-serif;
        }

        p {
            margin-bottom: 8px;
        }
    }

    .save-state {
        set-smaller-font-size();
        clear: both;
        color: #888;
        margin: 0;
    }
}

#translate-document, .move-page {
    .description {
        li {
            clearfix();
            clear: both;
            margin: 0 0 7px;
        }

        dl {
            margin: 0;
        }

        dt {
            display: inline-block;
            font-style: normal;
            font-weight: bold;
            margin-right: 10px;
        }

        dd {
            display: inline-block;
        }
    }
}

#translate-document {

    .description {
        margin: $summary-margin;
        padding: $summary-padding;
    }

    .approved, .localized {
            width: 50%;
            bidi-value(float, left, right);
    }

    .approved {
        header{
            height: auto;
            padding-right: 25px;
            padding-bottom: 0;
        }
    }

    .translate-rendered {
        overflow-x: hidden;

        pre {
            white-space: normal;
        }
    }

    .change-locale {
        margin-top: ($grid-spacing * -1);
        margin-bottom: ($grid-spacing / 2);
        bidi-value(clear, left, right);
        bidi-value(float, left, right);
        set-font-size($smaller-font-size);
    }

    header .page-buttons {
        clear: both;
        margin-bottom: 0;
    }


    #page-comment .icon-comment-alt {
        display: none;
    }

    .translate-only {

        .localized, .approved {
            width: 100%;
            float: none;
        }

        .boxed, .doc-mode-btn {
            display: none;
        }

        .translate-buttons {
            margin-top: 0;
            margin-left: 10px;
            display: inline-block;
        }

        .approved header {
            padding-right: 0;
        }

        .approved-title {
            display: inline-block;
            float: left;
        }

    }

}


.move-page {
    dl {
        width: auto;
    }

    dt {
        width: 120px;
    }

    input[type=text] {
        width: 400px;
    }

    #page-buttons {
        right: auto;
        top: auto;
        text-align: left;
        float: none;
        margin: $grid-spacing 0;
        position: relative;
    }

    .warning {
        color: #fff;
    }
}

.translate-source {
    textarea {
        width: 100%;
        vendorize(box-sizing, border-box);
        border: 0;
        /* Same formatting as CKEditor source view */
        font-family: 'Courier New', Monospace;
        font-size: small;
        white-space: pre;
    }
}

.translate-buttons {
    margin-top: 19px; /* Margin to level buttons with CKEditor top */
    text-align: right;

    button {
        margin-bottom: 10px; /* Margin when buttons are stacked */
    }
}
/* CKEditor adjustments, many marked as !important to override CKEditor's issues */
.ui-autocomplete {
    z-index: 100001 !important; /* Ugly, but have to do this for the autocomplete component to display on top of the CKEditor dialog */
    max-height: 200px;
    overflow: auto;
}
.cke_skin_kuma .cke_rcombo .cke_text {
    width: 130px !important;
}
.cke_skin_kuma .cke_rcombopanel {
    height: 280px !important;
}

/* Fixes CKEditor autogrow + maximize issues */
.cke_maximized_editor #content-fields header {
    position: fixed !important;
    top: -200px !important;
}
.cke_maximized_editor div.cke_toolbox {
    position: relative !important;
    top: auto !important;
    width: auto !important;
}
