static/css/devhub/forms.less

@import '../impala/lib';

.devhub-form {
    position: relative;

    table {
        margin: 0;
        width: 100%;

        th, td {
            border-top: 1px dotted #add0dc;
            padding: 8px 0;
        }
        tr:first-child {
            td, th {
                border-top: medium none;
            }
        }
        tr.version-disabled {
            opacity: 0.5;
        }
        td {
            max-width: 547px;
        }
        th {
            color: #888;
            font-size: 11px;
            padding: 8px 20px 8px 0;
            vertical-align: top;
            width: 130px;
            &.version-delete {
                text-align: right;
                width: 35px;
            }
        }
        ul {
            margin: 0;
        }
        table td {
            border-top-width: 0;
        }
        .screenshot.thumbnail {
            width: 100px;
            height: 75px;
        }
        .note {
            color: @note-gray;
            display: block;
        }
    }
    table, tbody {
        border-top: medium none;
        border-bottom: medium none;
    }
}

.html-rtl .devhub-form table th {
    padding: 8px 0 8px 20px;
}

.devhub-form .tip,
.addon-submission-process .tip {
    margin-left: 3px;
}

.devhub-form .item {
    .border-radius(8px);
    background: #fff;
    border: 1px solid @border-blue;
    clear: both;
    margin: 0 0 1em;
    position: relative;
    + h3 {
        margin-top: 1.5em;
    }
}

.devhub-form .listing-footer {
    .border-radius(0 0 8px 8px);
    border-top: 1px solid @border-blue;
    padding: 9px;
}

.devhub-form .item_wrapper {
    padding: 5px 13px;
}

.devhub-form .tip,
.addon-submission-process .tip,
ul.errorlist li span.tip,
a.remove,
span.remove {
    .border-radius(20px);
    background-color: #ddd;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    height: 18px;
    line-height: 1.3em;
    margin-top: 0;
    text-align: center;
    text-decoration: none;
    width: 18px;
}
.devhub-form .tip,
.addon-submission-process .tip {
    vertical-align: top;
}
a.remove {
    cursor: pointer;
    line-height: 16px;
    float: right;
    margin-top: 2px;
}
span.remove {
    background-color: #eee;
}

.devhub-form .author:hover .remove,
.devhub-form tr:hover .tip,
.devhub-form tr:hover > td > a.remove,
.addon-submission-process #icon_preview:hover .tip,
.compat-versions tr:hover a.remove,
#existing_locales li:hover a.remove,

.devhub-form tr:hover .tip:hover,
.addon-submission-process tr:hover .tip:hover {
    cursor: help;
}

.addon-submit-distribute * label span.helptext{
    font-weight: normal;
}

p.addon-submit-distribute span.helptext{
    font-weight: normal;
    display: block;
}

p.addon-submit-distribute {
    font-weight: bold;
}

#submit-describe {
    padding-top: 10px;
    width: 680px;

    #addon-categories-edit #id_category {
        column-count: 2;

        >*>label {
            font-weight: normal;
        }
    }
    #cc-chooser {
        h3 {
            font-size: 1em;
            line-height: 1.4em;
            font-weight: normal;
        }
        li label {
            font-weight: normal;
        }
    }
    #license-list {
        display: none;
        li label {
            font-weight: normal;
        }
    }

    #theme-license {
        background-color: darken(#FCFDFE, 10%);
        border-radius: 5px;
        padding: 1em;
        width: 400px;

        p {
            margin: 0;

            &.license {
                font-size: 12px;
                font-weight: bold;
                height: auto;
                margin: .5em 0;
                padding-left: 20px;
                width: auto;
            }
        }
        p.select-license {
            margin-bottom: 1em;
        }
    }
}

#submit-describe #addon-categories-edit label+* {
    column-count: 2;

    >*>label {
        font-weight: normal;
    }
}

span.tip:hover,
a.remove:hover {
    background-color: #2A4364 !important;
}

.devhub-form .empty {
    color: @note-gray;
    font-style: italic;
}

.add-button,
.action-button {
    background: #fefefe url(../../img/developers/add.png) no-repeat 10px 50%;
    border: 1px solid #ccc;
    .border-radius(10px);
    padding: 3px 15px 3px 35px;
    white-space: nowrap;
}

.html-rtl {
    .add-button,
    .action-button {
        background-position: 95% 50%;
        padding: 3px 35px 3px 15px;
    }
}

.undo {
    float: right;
}
.html-rtl .undo {
    float: left;
}

#issue-refund {
    font-size: 14px;
}

/* Tooltips: A half-baked tooltip implementation */
.pretty-tooltip {
    background-color: #888;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    padding: 5px 8px;
    position: relative;

    a {
        color: #eee;
        text-decoration: underline;
    }
    &.tl:before {
        border-bottom: 6px solid #888;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        bottom: 0;
        content: " ";
        display: block;
        height: 0;
        left: 10px;
        position: absolute;
        top: -6px;
        width: 0;
    }
}

.html-rtl .pretty-tooltip {
    &.tl:before {
        left: auto;
        right: 10px;
    }
}

.full-width {
    box-sizing: border-box;
    display: block;
    width: 100%;
}