addons-server/media/css/devreg/devhub-popups.less

@import 'lib';

.tooltip.ajax-loading {
    .background-size(auto 12px);
}

.widgets .widget.ajax-loading,
.widgets .widget:hover.ajax-loading,
input.ui-autocomplete-loading,
.modal.ajax-loading,
.modal-actions.ajax-loading,
.tooltip.ajax-loading,
.tooltip:hover.ajax-loading {
   background-image: url(../../img/zamboni/loading-white.gif);
   background-position: 0 100%;
   background-repeat: no-repeat;
}
.modal.ajax-loading {
    background-position: 50% 50%;
}
input.ui-autocomplete-loading,
.modal-actions.ajax-loading {
    background-position: 100% 50%;
}

#modals {
    display: none;
}

.popup,
.modal {
    background: #fff;
    border: 3px solid #2e5186;
    .border-radius(8px);
    .box-shadow(0 1px 3px rgba(0,0,0,0.35));
    line-height: 1.3em;
    margin-top: 5px;
    padding: 10px;
    position: absolute;
    left: -15px;
    z-index: 2001; /* because of devhub title */
    ul, p {
        margin: 1em 0 0;
        &:first-child {
            margin-top: 0;
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
    p.listing-footer, footer.listing-footer {
        margin: 1em -10px -10px -10px;
    }
}

.modal {
    margin-top: 10%;
    form {
        margin: 0;
    }
    h2, h3 {
        color: @blue;
        margin: 0;
        + p {
            margin-top: 10px;
        }
    }
    h2 {
        font: bold 18px @open-stack;
    }
    h3 {
        font: bold 14px @open-stack;
    }
}

.modal-delete h3 {
    color: #6c1a1a;
}

.popup .msg {
    background-repeat: no-repeat;
    min-height: 32px;
}

/* append the left class if the bubble is to the far right */
.install-note.left,
.popup.left {
    left: -160px;
}

.popup.warning {
    border-color: #c90;
}

.popup.error,
.modal-delete {
    border-color: #6c1a1a;
    color: #333;
}

.modal-overlay {
    background-color: #fff;
    height: 100%;
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
}


/* http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html */
/* Creates the larger triangle. */
.install-note:before,
.popup:before {
    content: "\00a0";
    display: block; /* reduce the damage in FF3.0 */
    position: absolute;
    width: 0;
    height: 0;
    left: 50px;
    top: -20px; /* value = - border-top-width - border-bottom-width */
    border: 10px solid transparent;
    border-bottom-color: #2e5186;
    pointer-events: none;
}

.unreviewed .install-note:before,
.popup.warning:before {
    border-bottom-color: #c90;
}

.popup.error:before {
    border-bottom-color: #6c1a1a;
}

/* creates the smaller triangle */
.install-note:after,
.popup:after {
    content: "\00a0";
    display: block; /* reduce the damage in FF3.0 */
    position: absolute;
    left: 55px;
    width: 0;
    height: 0;
    top: -10px; /* value = - border-top-width - border-bottom-width */
    border: 5px solid transparent;
    border-bottom-color: #fff;
    pointer-events: none;
}

.install-note.left:before,
.popup.left:before {
    right: 71px; /* controls horizontal position */
    left: auto;
}

.install-note.left:after,
.popup.left:after {
    right: 76px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    left: auto;
}

.install .install-note > *,
.popup.warning > * {
    margin-bottom: 1em;
    padding-left: 50px;
}

.install .install-note strong,
.popup strong {
    margin: 0;
    color: inherit;
    font-size: inherit;
}

.site-balloon, .site-tip, .modal {
    > .close {
        background: url(../../img/impala/banner-close.png) no-repeat;
        .border-radius(4px);
        cursor: pointer;
        height: 25px;
        margin: 0;
        overflow: hidden;
        position: absolute;
        top: 10px;
        right: 10px;
        text-indent: -1000em;
        width: 25px;
        &:hover {
            background-color: #c40000;
            background-position: -25px 0;
        }
    }
}
.site-balloon, .site-tip {
    > .close {
        margin: auto;
        top: 0;
        bottom: 0;
    }
}

.html-rtl {
    .site-balloon, .site-tip, #lightbox, .modal {
        > .close {
            right: auto;
            left: 10px;
        }
    }
}