popups.less

@import 'lib';

.install {
    position: relative;
}

.install-note .msg,
.popup .msg,
.app {
    background-repeat: no-repeat;
    min-height: 32px;
}

.mobile .install-note .msg, .mobile.app,
.firefox .install-note .msg, .firefox.app { background-image: url(../../img/app-icons/small/firefox.png); }
.thunderbird .install-note .msg, .thunderbird.app { background-image: url(../../img/app-icons/small/thunderbird.png); }
.sunbird .install-note .msg, .sunbird.app { background-image: url(../../img/app-icons/small/sunbird.png); }
.seamonkey .install-note .msg, .seamonkey.app { background-image: url(../../img/app-icons/small/seamonkey.png); }
.android .install-note .msg, .android.app { background-image: url(../../img/app-icons/small/android.png); }
.mz.app { background-image: url(../../img/app-icons/small/mozilla.png); }

.install-note .msg.m-unreviewed,
.install-note .msg.m-selfhosted,
.popup.warning .msg {
    background-image: url(../../img/zamboni/icons/alert-32x32.png);
}

.install-note .msg.m-platforms {
    background-image: url(../../img/zamboni/icons/no-32x32.png);
}

.install-note .msg.m-not-compatible li {
    list-style-type: disc;
}

.install-note .beta {
    display: none;
}

.fxbeta .install-note .beta {
    display: block;
}

.fxbeta .install-note .nobeta {
    display: none;
}

.install-note,
.popup,
.modal {
    position: absolute;
    left: -15px;
    line-height: 15px;
    margin-top: 5px;
    background: #fff;
    padding: 10px;
    border: 3px solid #2e5186;
    .border-radius(8px);
    .box-shadow(0 1px 3px rgba(0,0,0,0.35));
    z-index: 2001;
}
.modal {
    width: 300px;
}
.modal, .popup {
    padding: 1em;
    form {
        margin: 0;
    }
    h2, h3 {
        margin-top: 0;
        color: #2e5186;
    }
    h4 {
        margin-bottom: 4px;
    }
}

.popup {
    h3 {
        color: @dark-gray;
        font: italic 18px @serif-stack;
        margin-bottom: 1em;
    }
    fieldset {
        border-bottom: 1px solid #A4CFDE;
        margin-bottom: 1.5em;
        padding-bottom: 1em;
    }
    li {
        line-height: 1.5em;
    }
    ul:last-child {
        margin-bottom: 0;
    }
}
.modal-delete h3 {
    color: #6c1a1a;
}

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

.install .install-note {
    width: 300px;
    .msg:first-child {
        margin: 0;
    }
    ol, ul, p:first-child {
        margin: 0;
    }
    ol {
        list-style: decimal;
    }
    ul {
        list-style: none;
    }
    li {
        margin: 1em 0;
    }
}

.primary .install-note > p:first-child {
    margin-top: 0;
}

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

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

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

.modal-overlay {
    background-color: #fff;
    height: 100%;
    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 strong,
.popup strong {
    margin: 0;
    color: inherit;
    font-size: inherit;
}

.d2c-reasons-popup {
    display: none;
    ul {
        margin: 1em 0 0 20px;
        list-style: disc;
    }
    li {
        margin-left: 1em;
        margin-bottom: 1em;
    }
}
.d2c-reasons-help {
    background-color: @light-gray;
    .border-radius(10px);
    color: #fff;
    display: inline-block;
    line-height: 7px;
    padding: 4px;
    margin: 0 8px;
    position: relative;
    &:hover {
        background-color: @note-gray;
        text-decoration: none;
    }
    p, li {
        line-height: 1.3;
    }
}