View source for MediaWiki:Centralnotice-template-B1516 1001 en6C mob p2 sm cntrl

<style>
/* Clearfix */
#frbanner .cf:before,
#frbanner .cf:after {
   content: "";
   display: table;
}

#frbanner .cf:after { clear: both; }

/* Box-sizing */
#frbanner *,
#frbanner *:before,
#frbanner *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Transitions */
#frbanner-form label,
#frbanner-form button,
#frbanner2:hover p,
#frbanner2:hover .frbanner2-tab {
    -webkit-transition: all .2s ease-in-out;
    transition:         all .2s ease-in-out;
}

/* Main banner
------------------------------------ */

#frbanner {
    position: absolute;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100%;
}

#frbanner-mask {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
}

#frbanner-window {
    position: relative;
    top: 20px;
    left: 5%;
    right: 5%;
    width: 90%;
    background: #fff;
    box-shadow: 0 0 10px rgba(90,97,98,.25);
    font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
}

#frbanner-close {
    position: absolute;
    z-index: 999;
    top: 10px;
    right: 10px;
    display: block;
    width: 20px;
    height: 21px;
    background: url('//upload.wikimedia.org/wikipedia/donate/c/cf/Close-trilogy.png') no-repeat center center;
    opacity: .6;
    text-indent: -99999px;
    cursor: pointer;
}
body.rtl #frbanner-close {
    right: auto;
    left: 10px;
}

#frbanner-close:active,
#frbanner-close:hover {
    opacity: 1;
}


/* --- Message --- */

#frbanner-window .frbanner-message {
    padding: 15px;
    font-size: 1em;
    line-height: 1.25em;
    color: #3c3c3c;
}

@media (min-width : 768px) {
    #frbanner-window .frbanner-message {
        padding: 30px;
        font-size: 1.15em;
        line-height: 1.3em;
    }
}

#frbanner-window .frbanner-message p { margin-bottom: .5em; }

#frbanner-window .frbanner-message p:last-child { margin-bottom: 0; }

#frbanner-window .frbanner-main-message {
    font-weight: bold;
    padding-top: 40px;
}

.frbanner-highlight { background: #fff000; font-weight: bold; }
.frbanner-highlight span { position: relative; }  /* prevent background from overlapping text */


/* --- Form --- */

#frbanner-form {
    position: relative;
    background: #e2e2e2;
    padding: 15px;
}

@media (min-width : 768px) { #frbanner-form { padding: 30px 20px; } }

#frbanner-form:before {
    position: absolute;
    left: 50%;
    top: 0;
    height: 0;
    width: 0;
    margin-left: -10px;
    content: " ";
    border: solid transparent;
    border-top-color: white;
    border-width: 10px;
    pointer-events: none;
}

.frbanner-amounts,
.frbanner-submit {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* --- Form legends --- */

#frbanner-form legend {
    width: 100%;
    margin: 1em 0 .5em;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    color: #7c7c7c;
}

@media (min-width : 768px) { #frbanner-form legend { font-size: 14px; margin-bottom: 5px; } }

/* --- Amount buttons layout --- */

.frbanner-amounts { margin-bottom: 10px; }

    @media (min-width : 570px)  { .frbanner-amounts { margin-bottom: 15px; }}
    @media (min-width : 768px)  { .frbanner-amounts { margin-bottom: 30px; }}

.frbanner-amounts li {
    display: block;
    width: 49%;
    clear: none;
    float: left;
    margin-bottom: 6px;
    margin-right: 2%;
}

body.rtl .frbanner-amounts li {
    float: right;
    margin-right: 0;
    margin-left: 2%;
}

@media (min-width : 570px) { .frbanner-amounts li { margin-bottom: 10px; } }

/* "Phone" layout, 2 amount buttons per row */
@media (max-width: 767px) {

    body.ltr .frbanner-amounts #amount_total_2,
    body.ltr .frbanner-amounts #amount_total_4,
    body.ltr .frbanner-amounts #amount_total_6 {
        margin-right: 0;
    }

    body.rtl .frbanner-amounts #amount_total_2,
    body.rtl .frbanner-amounts #amount_total_4,
    body.rtl .frbanner-amounts #amount_total_6 {
        margin-left: 0;
    }

}

/* "Tablet" layout, 3 amount buttons per row */
@media (min-width: 768px) {

    .frbanner-amounts {
        padding: 0 10px;
    }

    .frbanner-amounts li {
        width: 32%;
    }

    body.ltr .frbanner-amounts #amount_total_3,
    body.ltr .frbanner-amounts #amount_total_6 {
        margin-right: 0;
    }

    body.rtl .frbanner-amounts #amount_total_3,
    body.rtl .frbanner-amounts #amount_total_6 {
        margin-left: 0;
    }

}

/* --- Amount buttons appearance --- */

.frbanner-amounts li input[type="radio"] {
    /* Based on http://jqueryui.com/button/#radio */
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.frbanner-amounts li label {
    display: block;
    width: 100%;
    height: 50px;
    padding: 5px;
    line-height: 40px;
    font-size: 1.1em;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    background: #367fb4;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

@media (min-width: 768px) {
    .frbanner-amounts li label {
        font-size: 1.4em;
    }
}

.frbanner-amounts li label:active ,
.frbanner-amounts li input[type="radio"]:checked + label,
.frbanner-amounts li input[type="radio"].checked + label {
    background: #0f4b76;
}

/* --- Other amount --- */

#input_amount_other_box {
    padding: 0;
    margin: 0;
    background: #fff;
    border: none;
    width: 90%;
    font-size: 0.8em;
    text-align: center;
    direction: ltr;
}
.frbanner-amounts li input[type="radio"]:checked + label #input_amount_other_box {
    background: #fff;
}
#amount_total_6 {
    white-space: nowrap;
}
#amount_label_6 {
    background: #fff;
    border: 1px solid #aaa;
    color: #aaa;
    padding-left: 0.2em;
}


/* --- Payment method buttons layout --- */


/* "Phone" layout, full width stacked */
@media (max-width: 767px) {
    .frbanner-submit li {
        width: 100%;
        margin-bottom: 6px;
    }

    #frbanner-window li.frbanner-submit {
        display: block;
        margin: 0;
    }
}

/* "Tablet" layout, next to each other */
@media (min-width: 768px) {
    .frbanner-submit ul {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    .frbanner-submit ul li {
        display: table-cell;
        padding: 0 10px;
        vertical-align: top;
    }
}


@media (min-width : 570px) {
    .frbanner-submit li {
        margin-bottom: 10px;
    }
}

/* --- Payment method buttons appearance --- */

#frbanner-window button {
    width: 100%;
    height: 50px;
    padding: 5px;
    font-size: 1.1em;
    line-height: 1;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    box-shadow: 0 0 2px rgba(0,0,0,.2), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
    color: #367fb4;
    background-color: #e7e7e7;
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

@media (min-width: 768px) {
    #frbanner-window button {
        height: 60px;
        font-size: 1.3em;
    }
}

#frbanner-window button:active {
    background-color: #f9f9f9;
    box-shadow: 0 0 2px rgba(0,0,0,.2), inset 1px 1px 3px rgba(0,0,0,.3), inset 0 0 7px #fff;
}

/* Payment logos */
#frbanner-window .paymentmethod-pp button {
    text-indent: -99999px;
    background-image: url('//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg');
}
#frbanner-window .paymentmethod-amazon button {
    text-indent: -99999px;
    background-image: url('//upload.wikimedia.org/wikipedia/donate/e/e4/Amazon-color.svg');
}
#frbanner-window .paymentmethod-bpay button {
    text-indent: -99999px;
    background-image: url('//upload.wikimedia.org/wikipedia/donate/e/e3/BPAY_Landscape_MONO.gif');
}


/* --- Smallprint --- */

#frbanner-window #frbanner-smallprint {
    width: 100%;
    font-size: 75%;
    padding: 1em 20px;
    background: #e2e2e2;
    text-align: center;
}

#frbanner-window .recurring-details {
    display: none;
}


/* Bottom "reminder" banner styles
------------------------------------ */

#frbanner2 {
    z-index: 100;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

#frbanner2 .frbanner2-tab {
    position: relative;
    top: .3em;
    display: block;
    width: 180px;
    margin: 0 auto;
    padding: .3em .8em 0 .8em;
    -moz-border-radius:    4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius:         4px 4px 0 0;
    background: #ffcc00;
    color: #1c1c1c;
    font-size: .9em;
    font-weight: bold;
    text-decoration: underline;
}

#frbanner2 p {
    padding: .7em .4em;
    margin: 0;
    background: #ffcc00;
    color: #1c1c1c;
    font-size: .8em;
    line-height: 1.1;
}
#frbanner2:hover p,
#frbanner2:hover .frbanner2-tab {
    background: #ffdd00;
}

/* "Tablet" size */
@media (min-width: 768px) {
    #frbanner2 .frbanner2-tab {
        width: 300px;
        font-size: 1.35em;
    }
    #frbanner2 p {
        font-size: 1.15em;
        line-height: 1.2;
    }
    
}

#frbanner2-close {
    z-index: 999;
    float: right;
    display: block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    background: url('//upload.wikimedia.org/wikipedia/donate/c/cf/Close-trilogy.png') no-repeat center center;
    background-size: contain;
    text-indent: -99999px;
    opacity: 0.8;
    cursor: pointer;
}
body.rtl #frbanner2-close {
    float: left;
}
#frbanner2-close:active,
#frbanner2-close:hover {
    opacity: 1;
}
</style>

<div id="frbanner" style="display: none;"><!-- the "full screen" banner -->

    <div id="frbanner-mask"></div>

    <div id="frbanner-window" style="z-index: 1001;">

        <div id="frbanner-close"></div>

        <div id="modal-signup" class="cf">

            <div class="frbanner-message frbanner-main-message">

                <p>{{int:Centralnotice-FR2015_translations-greeting-WP-readers}}</p>
                <p>
                {{int:Centralnotice-FR2015_translations-right-to-it}}
                {{int:Centralnotice-FR2015_translations-independence}}
                {{int:Centralnotice-FR2015_translations-survive}}
                {{int:Centralnotice-FR2015_translations-tiny}}
                <span class="frbanner-highlight"><span>{{int:Centralnotice-FR2015_translations-if-everyone}}</span></span>
                {{int:Centralnotice-FR2015_translations-non-profit}}
                {{int:Centralnotice-FR2015_translations-special}}
                {{int:Centralnotice-FR2015_translations-useful}}
                </p>
                <p><i>{{int:Centralnotice-FR2015_translations-thank-you}}</i></p>

            </div><!--frbanner-message-->


            <form id="frbanner-form" method="post" name="paypalcontribution">
                <input type="hidden" name="utm_medium" value="sitenotice">
                <input type="hidden" name="utm_campaign" value="{{{campaign}}}">
                <input type="hidden" name="utm_source" value="{{{banner}}}">
                <input type="hidden" name="language" value="">
                <input type="hidden" name="country" value="">
                <input type="hidden" name="currency_code" id="input_currency_code" value="">
                <input type="hidden" name="utm_key" value="">
                <input type="hidden" name="payment_method" value="">

                <fieldset class="frbanner-amounts cf">

                    <legend>{{int:Centralnotice-FR2015_translations-select-amount}}</legend>

                    <ul>

                        <li class="amount-btn" id="amount_total_1">
                            <input name="amount" type="radio" id="amount1" value="3">
                            <label id="amount_label_1" for="amount1">$3</label>
                        </li>

                        <li class="amount-btn" id="amount_total_2">
                            <input name="amount" type="radio" id="amount2" value="15">
                            <label id="amount_label_2" for="amount2">$15</label>
                        </li>

                        <li class="amount-btn" id="amount_total_3">
                            <input name="amount" type="radio" id="amount3" value="20">
                            <label id="amount_label_3" for="amount3">$20</label>
                        </li>

                        <li class="amount-btn" id="amount_total_4">
                            <input name="amount" type="radio" id="amount4" value="50">
                            <label id="amount_label_4" for="amount4">$50</label>
                        </li>

                        <li class="amount-btn" id="amount_total_5">
                            <input name="amount" type="radio" id="amount5" value="100">
                            <label id="amount_label_5" for="amount5">$100</label>
                        </li>

                        <li id="amount_total_6">
                            <input name="amount" type="radio" id="amountother">
                            <label id="amount_label_6" onclick="$('#amountother').prop('checked', true);">
                            <input type="number" min="0" name="amountGiven" id="input_amount_other_box" placeholder="{{int:Centralnotice-FR2015_translations-other}}" autocomplete="off" onfocus="$('#amountother').prop('checked', true);">
                            </label>
                        </li>

                    </ul>

                </fieldset>

                <fieldset class="frbanner-submit cf">

                    <legend>{{int:Centralnotice-FR2015_translations-select-payment-method}}</legend>

                    <ul>
                        <li class="paymentmethod-ideal no-monthly" style="display: none;">
                            <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('rtbt', 'rtbt_ideal'); return false;">
                                iDEAL
                            </button>
                        </li>

                        <li class="paymentmethod-cc">
                            <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('cc'); return false;">
                                {{int:Centralnotice-FR2015_translations-pm-creditcard}}
                            </button>
                        </li>

                        <li class="paymentmethod-cc-wp no-monthly" style="display: none;">
                            <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('cc-wp'); return false;">
                                {{int:Centralnotice-FR2015_translations-pm-creditcard}}
                            </button>
                        </li>

                        <li class="paymentmethod-sofort no-monthly" style="display: none;">
                            <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('rtbt', 'rtbt_sofortuberweisung'); return false;">
                                {{int:Centralnotice-FR2015_translations-pm-onlinebanktransfer}}
                            </button>
                        </li>

                        <li class="paymentmethod-bt no-monthly" style="display: none;">
                            <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('bt'); return false;">
                                {{int:Centralnotice-FR2015_translations-pm-banktransfer}}
                            </button>
                        </li>

                        <li class="paymentmethod-pp">
                            <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('paypal'); return false;">
                                {{int:Centralnotice-FR2015_translations-pm-paypal}}
                            </button>
                        </li>

                        <li class="paymentmethod-amazon no-monthly" style="display: none;">
                            <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('amazon'); return false;">
                                {{int:Centralnotice-FR2015_translations-pm-amazon}}
                            </button>
                        </li>

                        <li class="paymentmethod-bpay no-monthly" style="display: none;">
                            <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('obt', 'bpay'); return false;">
                                BPay
                            </button>
                        </li>

                        <li class="paymentmethod-enets no-monthly" style="display: none;">
                            <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('rtbt', 'rtbt_enets'); return false;">
                                eNETS
                            </button>
                        </li>

                        <li class="paymentmethod-pp-usd" style="display: none;">
                            <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('paypal', undefined, true); return false;">
                                {{int:Centralnotice-FR2015_translations-pm-paypal}} (USD)
                            </button>
                        </li>

                    </ul>

                </fieldset>

            </form>

            <div class="frbanner-message frbanner-footer" id="frbanner-smallprint">
                {{MediaWiki:FR2015/Resources/BannerSmallPrint}}
            </div>

        </div><!--modal-signup-->

    </div><!--frbanner-window-->

</div><!--frbanner-->

<div id="frbanner2" style="display: none;"><!-- the small banner -->
    <div class="frbanner2-tab">
        {{int:Centralnotice-FR2015_translations-donate-now}}
    </div>
    <p>
        <span id="frbanner2-close"></span>
        <span class="frbanner2-message">
        {{int:Centralnotice-FR2015_translations-right-to-it}}
        {{int:Centralnotice-FR2015_translations-survive}}
        {{int:Centralnotice-FR2015_translations-over-in-an-hour}}
        </span>
    </p>
</div><!--frbanner2-->

{{MediaWiki:FR2013/Resources/Country2Currency.js}}
{{MediaWiki:FR2013/Resources/CurrencyLocalize.js}}
{{MediaWiki:FR2013/Resources/CurrencyMinimums.js}}
{{MediaWiki:FR2014/Resources/AmountData.js}}
<!-- Insert any amount overrides for testing here -->
{{MediaWiki:FR2014/Resources/AmountFunctions.js}}
{{MediaWiki:FR2013/Resources/MobileBanner.js}}

<script>
$(document).ready(function() {

    // Reset "other box" if they click a different amount
    $('#amount1, #amount2, #amount3, #amount4, #amount5').click(function() {
        $('#input_amount_other_box').val('');
    });

    $("#frbanner-close").click(function() {
        // Close only the full-screen
        $("#frbanner").hide();
    });

    /* Close fullscreen banner when clicked outside */
    $('#frbanner-mask').on('click.bannerHide', function(e) {
        if ($(e.target).closest("#frbanner-window").length === 0) {
            $("#frbanner").hide();
            $(document).unbind('click.bannerHide');
        }
    });

    $("#frbanner2-close").click(function(e) {
        // Close the reminder, and set a hide cookie
        mw.centralNotice.hideBanner();
        e.stopPropagation();
    });

    $("#frbanner2").click(function() {
        window.scrollTo(0,0);
        $("#frbanner").show();
        $("#frbanner2").slideToggle();
    });

});

{{MediaWiki:FR2014/Resources/MobileLocalize.js}}
{{MediaWiki:FR2014/Resources/MobileLogicAB-NonRandom.js}}

</script>