MediaWiki:Centralnotice-template-B1617 1117 en6C mob p1 lg refactor
<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,
- frbanner-email-reminder1 input,
- frbanner-email-reminder1 button,
- frbanner-email-reminder2 input,
- frbanner-email-reminder2 button {
-webkit-transition: all .2s ease-in-out; -moz-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: black; opacity: 0.8;
}
- frbanner-window {
position: relative; top: 0; left: 0; right: auto; width: 100%; margin-top: 0; font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif; text-align: center;
}
@media (min-width: 768px) {
#frbanner-window { margin-top: 20px; left: 5%; right: 5%; width: 90%; }
}
/* --- Message --- */
.frbanner-message {
font-size: 1.25em; line-height: 1.3; color: black; background: white; border: 5px solid #990000; border-bottom: 0; text-align: left;
}
.frbanner-message-text {
max-width: 100%; padding: 1em; font-weight: bold;
}
@media (min-width: 768px) {
.frbanner-message { font-size: 1.4em; line-height: 1.4; } .frbanner-message-text { padding: 1.5em 3em; }
}
@media (min-height: 1000px) {
.frbanner-message { font-size: 1.5em; } .frbanner-message-text { padding: 2em 3em; }
}
.frbanner-message-text p { margin-bottom: .5em; } .frbanner-message-text p:last-child { margin-bottom: 0; }
.frbanner-highlight {
background: #fff000; color: black; padding: 0 0.2em;
}
.frbanner-highlight span { position: relative; } /* prevent background from overlapping text */
.frbanner-call-to-action {
text-align: center; background: #990000; color: #fff; padding: .4em; font-weight: 400; font-size: 1.2em; display: block; margin: auto; width: 100%; position: relative;
}
.frbanner-call-to-action:after {
position: absolute; left: 50%; top: 100%; height: 0; width: 0; margin-left: -10px; content: " "; border: solid transparent; border-top-color: #990000; border-width: 10px; pointer-events: none;
}
@media (min-width: 360px) { .frbanner-call-to-action { font-size: 1.15em; } } @media (min-height: 1000px) { .frbanner-call-to-action { padding: 1em; } } @media (min-width : 1100px) { .frbanner-call-to-action { font-size: 1.4em; } }
/* --- Padding for Form area --- */
.frbanner-bottom {
background: #fff; padding: 1.5em 1.5em .5em;
}
@media (min-width: 768px) {
.frbanner-bottom { padding: 2em 2em .5em; }
}
@media (min-height: 1000px) {
.frbanner-bottom { padding: 3em 3em .5em; }
}
/* --- Form --- */
- frbanner-form {
position: relative; background: white; padding-bottom: 0em; clear: both;
}
@media (min-width: 768px) {
#frbanner-form { padding-bottom: 1em; }
}
@media (min-height: 1000px) {
#frbanner-form { padding-bottom: 1em; }
}
/* --- Form legends --- */
- frbanner-form legend {
display: block; width: 100%; margin: 0; padding: 0 0 .5em 0; text-align: center; font-size: 1em;
}
@media (min-width : 768px) { #frbanner-form legend { font-size: 1.1em; } }
/* --- Common Button Styles --- */
.frbanner-btn {
display: block; background-color: #f8f9fa; color: #222; border: 1px solid #9aa0a7; border-radius: 2px; padding: 1em .5em; outline: 0; text-align: center; line-height: 1; cursor: pointer; font-family: inherit; font-weight: 500; transition: background 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
} .frbanner-btn:hover {
background-color: #fff; color: #444; border-color: #a2a9b1;
} .frbanner-btn:active {
background-color: #d9d9d9; color: #000; border-color: #7d8389;
} .frbanner-btn:focus {
border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc;
} .frbanner-btn.checked {
background-color: #2a4b8d; color: #fff; border-color: #7d8389;
}
.frbanner-amounts li label:active, .frbanner-amounts li input[type="radio"]:checked + label, .frbanner-amounts li input.checked[type="radio"] + label {
background-color: #2a4b8d; color: #fff; border-color: #7d8389;
}
/* --- Amount buttons layout --- */
.frbanner-frequency, .frbanner-amounts { margin-bottom: 1em; }
.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: 374px) {
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: 375px) {
.frbanner-frequency, .frbanner-amounts { padding: 0 .25em; }
.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; }
}
/* --- Frequency Slider --- */
fieldset.frbanner-frequency {
padding-bottom: 0.35em; text-align: center;
}
.frbanner-frequency ul {
margin: auto; width: 180px;
}
.frbanner-frequency li {
display: table-cell;
}
body.rtl .frbanner-frequency li {
padding: 0 0 0 0.75em;
}
fieldset.frbanner-frequency span {
color: #000; font-size: 14px; font-weight; bold; margin-top: 9.5px; padding: 0 .5em; position: absolute; z-index: 999; pointer-events: none;
}
fieldset.frbanner-frequency span.frq-once {
left: .5em;
}
fieldset.frbanner-frequency span.frq-monthly {
right: .5em;
}
.frq-active {
color: #20529c !important; font-weight: bold;
}
.frequency_monthly {
position: relative; display: inline-block; vertical-align: middle; width: 180px; height: 36px;
}
.frequency_monthly input {display:none;}
.frequency-slider {
position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: 30px; border: 1px solid #dadada; background-color: #f8fdff; -webkit-transition: .4s; transition: .4s;
}
.frequency-slider:before {
position: absolute; content: ""; height: 28px; width: 88px; left: 3px; top: 3px; bottom: 4px; border-radius: 30px; background-color: #b3d0fc; -webkit-transition: .4s; transition: .4s;
}
input:focus + .frequency-slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .frequency-slider:before {
-webkit-transform: translateX(88px); -ms-transform: translateX(88px); transform: translateX(88px); width: 84px;
}
.frequency-slider span {
display: inline-block; width: 100%; vertical-align: middle; color: white; font-size: .9em; text-align: center; text-transform: uppercase;
}
.form-monthly .no-monthly {
display: none !important;
}
/* --- 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 {
width: 100%; min-height: 76px; font-size: 1.5em; font-style: normal; font-weight: bold;
}
@media (min-width: 768px) {
.frbanner-amounts li label { min-height: 88px; font-size: 1.75em; }
}
.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 --- */
.frbanner-submit legend { display: none; }
/* "Phone" layout, full width stacked */
@media (max-width: 374px) {
.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: 375px) {
.frbanner-submit ul { display: table; table-layout: fixed; width: 100%; } .frbanner-submit ul li { display: table-cell; padding: 0 .25em; vertical-align: top; }
}
@media (min-width : 570px) {
.frbanner-submit li { margin-bottom: 10px; }
}
.frbanner-submit .frbanner-btn, .frbanner-email-reminder1-link.frbanner-btn, .frbanner-email-reminder2-link.frbanner-btn {
color: #3366cc;
}
.frbanner-submit .frbanner-btn:hover, .frbanner-email-reminder1-link.frbanner-btn:hover, .frbanner-email-reminder2-link.frbanner-btn:hover {
background-color: #fff; border-color: #859dcc;
}
.frbanner-submit .frbanner-btn:active, .frbanner-email-reminder1-link.frbanner-btn:active, .frbanner-email-reminder2-link.frbanner-btn:active {
background-color: #eff3fa; color: #2a4b8d; border-color: #2a4b8d; box-shadow: none
}
- frbanner-window button, #frbanner-rml {
width: 100%; height: 100%; font-size: .85em; float: none; font-family: inherit;
}
/* --- Payment method buttons appearance --- */
- frbanner-window button {
width: 100%; height: 50px; background-size: auto 50%; background-repeat: no-repeat; background-position: center center;
}
.frbanner-email-reminder2-form button {
min-height: 50px;
}
@media (min-width: 375px) {
#frbanner-window button { height: 90px; font-size: 1.3em; background-size: 70% auto; }
.frbanner-email-reminder2-form button { min-height: 60px; }
}
@media (min-width: 1000px) {
#frbanner-window button { background-size: auto 50%; }
}
/* 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-footer {
width: 100%; font-size: 75%; padding: 1em 20px; background: white; text-align: center; color: #3c3c3c;
}
- frbanner-window .recurring-details {
display: none;
}
/* --- Close Options --- */
- frbanner-close-options {
background: #000; display: block; z-index: 999; color: #fff; font-size: .8em; padding: .5em; text-transform: uppercase; text-align: center; width: 100%;
}
@media (min-width: 360px) { #frbanner-close-options { font-size: 1em; } } @media (min-width: 740px) { #frbanner-close-options { font-size: 1.1em; } }
.frbanner-close, .frbanner-email-reminder1-link {
display: inline-block; cursor: pointer; z-index: 999; vertical-align: middle; color: #ccc;
}
.frbanner-close:hover, .frbanner-email-reminder1-link:hover {
color: #fff;
}
.frbanner-email-reminder1-link {
width: 60%; border-right: 1px solid #666;
} body.rtl .frbanner-email-reminder1-link {
border-right: 0; border-left: 1px solid #666;
}
.frbanner-close {
width: 38%;
}
.frbanner-close-x {
background: url('//upload.wikimedia.org/wikipedia/donate/8/84/Close-thin-white.png') no-repeat center center; width: 9px; height: 9px; float: right; display: block; margin: .25em 0 0 .25em;
} body.rtl .frbanner-close-x {
float: left; margin: .25em .25em 0 0;
}
.frbanner-close.bottom {
text-align: center; color: white; display: inline-block; width: auto; margin: auto; z-index: 999; color: #fff; font-size: .8em; padding: 1em; text-transform: uppercase; cursor: pointer;
}
.frbanner-close.bottom:hover {
color: #fff;
}
@media (min-width: 768px) {
.frbanner-close.bottom { display: none; }
}
/* --- Remind me by email CLOSE OPTION --- */
- frbanner-email-reminder1 form {
display: block; margin: 1em;
}
.frbanner-email-reminder-caption {
text-align: left; margin: .5em 1em;
}
- frbanner-email-reminder1 input {
direction: ltr; background: #ffffff; width: 100%; display: block; border: 1px solid #aaa; margin: 0 auto; padding: .5em .5em; cursor: pointer; font-size: 16px; color: #000; border-radius: 4px;
}
- frbanner-email-reminder1 input.error {
background-color: #FFC7C7;
}
- frbanner-email-reminder1 button {
background: #367fb4; color: #fff; text-transform: uppercase; width: 100%; display: block; border: 0; margin: 0.45em 0 0 0; padding: .5em; font-size: 1.1em; border-radius: 4px; -webkit-appearance: none; height: auto; line-height: normal; box-shadow: none;
}
- frbanner-email-reminder1 button:hover,
- frbanner-email-reminder1 button:active {
background: #0f4b76; box-shadow: none;
}
- frbanner-email-reminder1 #errorMessageContainerId {
text-align: center; text-transform: none; color: #ff0000;
}
.frbanner-email-reminder1-done {
text-align: center; text-transform: none; padding: 1em;
}
/* --- Remind me by email BUTTON --- */
- frbanner-rml {
position: relative; width: auto; padding: .5em 0;
}
@media (min-width: 768px) {
#frbanner-rml { padding: .5em .25em; }
}
.frbanner-email-reminder2-link {
display: block; cursor: pointer; line-height: 1; padding: 1em; text-align: center;
}
@media (min-width: 375px) {
#frbanner-rml { margin: .3em .3em 0; }
}
.frbanner-email-reminder2-form {
display: none; position: absolute; width: 100%; padding: 1em; background: #fff; border: 1px solid #aaa; border-radius: 2px; box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.15); margin-top: 9px; z-index: 10;
}
.frbanner-email-reminder2-form-anchor {
display: block; position: absolute; top: -10px; left: 50%; background-repeat: no-repeat;
}
.frbanner-email-reminder2-form-anchor:before, .frbanner-email-reminder2-form-anchor:after {
content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-top: 0;
}
.frbanner-email-reminder2-form-anchor:before {
bottom: -10px; left: -9px; border-bottom-color: #888888; border-width: 10px
}
.frbanner-email-reminder2-form-anchor:after {
bottom: -10px; left: -8px; border-bottom-color: #ffffff; border-width: 9px;
}
.frbanner-email-reminder2-form form {
margin-top: .5em;
}
.frbanner-email-reminder2-form input {
direction: ltr; background: #fff; width: 100%; display: block; padding: 0.5em; margin: 0; font-size: inherit; font-family: inherit; color: #000; border: 1px solid #9aa0a7; border-radius: 2px;
} .frbanner-email-reminder2-form input:focus {
outline: 0; border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc;
} .frbanner-email-reminder2-form input.error {
border-color: #ff0000; box-shadow: inset 0 0 0 0.1em #ff0000;
}
.frbanner-email-reminder2-form .frbanner-btn {
margin-top: .5em; padding: .5em; color: #fff; background-color: #3366cc; border-color: #3366cc; height: auto !important;
} .frbanner-email-reminder2-form .frbanner-btn:hover {
background-color: #447ff5; border-color: #447ff5;
} .frbanner-email-reminder2-form .frbanner-btn:active {
background-color: #2a4b8d; border-color: #2a4b8d; box-shadow: none;
} .frbanner-email-reminder2-form .frbanner-btn:focus {
border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc, inset 0 0 0 2px #ffffff;
}
.frbanner-email-reminder2-form #errorMessageContainerId {
color: #ff0000; padding-top: .25em;
} .frbanner-email-reminder2-done {
padding: 1em; text-align: center; cursor: default;
} </style>
<script> var fundraisingBanner = fundraisingBanner || {};
fundraisingBanner.showLargeBanner = function() {
$('#content_wrapper').prepend($('#frbanner')); $('#frbanner-window').css('top', $(window).scrollTop() ); // position banner where they have scrolled to $('#frbanner').show();
};
fundraisingBanner.postReminder1Form = function() {
// Create the iframe for the form and use it as the form's target var frameName = "remind1Frame"; var $form = $(".frbanner-email-reminder1-form form"); if ($("iframe[name=" + frameName + "]").length == 0) { var $iframe = $('<iframe style="display: none;" name="' + frameName + '"></iframe>'); $form.attr("target", $iframe.attr("name")); $form.after($iframe); } $form[0].submit();
};
fundraisingBanner.postReminder2Form = function() {
// Create the iframe for the form and use it as the form's target var frameName = "remind2Frame"; var $form = $(".frbanner-email-reminder2-form form"); if ($("iframe[name=" + frameName + "]").length == 0) { var $iframe = $('<iframe style="display: none;" name="' + frameName + '"></iframe>'); $form.attr("target", $iframe.attr("name")); $form.after($iframe); } $form[0].submit();
};
fundraisingBanner.getCurrentDate = function() {
var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; //January is 0! var yyyy = today.getFullYear();
if(dd<10) { dd='0'+dd; } if(mm<10) { mm='0'+mm; }
today = mm+'/'+dd+'/'+yyyy; return today;
};
fundraisingBanner.initReminder1Form = function() {
$(".frbanner-email-reminder1-form input[name=rml_country]").val(Geo.country); $(".frbanner-email-reminder1-form input[name=rml_language]").val(mw.config.get('wgUserLanguage')); $(".frbanner-email-reminder1-form input[name=rml_submitDate]").val(fundraisingBanner.getCurrentDate()); $(".frbanner-email-reminder1-form input[name=rml_segment]").val(Math.floor((Math.random() * 100) + 1));
$(".frbanner-email-reminder1-link").click(function() { $(".frbanner-email-reminder1-form").slideToggle(); $('#frbanner-email-reminder1').toggleClass('frbanner-email-reminder-active'); $('#control_EMAIL1').focus(); });
$(".frbanner-email-reminder1-form button").bind("click", function() { if ( mw.util.validateEmail( $(".frbanner-email-reminder1-form form input[name='Email']").val() ) ) { fundraisingBanner.postReminder1Form(); $(".frbanner-email-reminder1-form form").hide(); $(".frbanner-email-reminder-caption").hide(); $("#frbanner-rml").hide(); $(".frbanner-email-reminder1-done").show(); mw.centralNotice.internal.hide.setHideWithCloseButtonCookies(); // Hide future banners for 7 days return false; } else { $(".frbanner-email-reminder1-form form input[name='Email']").addClass("error"); $(".frbanner-email-reminder1-form #errorMessageContainerId").show(); $('#control_EMAIL1').focus(); return false; } });
};
fundraisingBanner.initReminder2Form = function() {
$(".frbanner-email-reminder2-form input[name=rml_country]").val(Geo.country); $(".frbanner-email-reminder2-form input[name=rml_language]").val(mw.config.get('wgUserLanguage')); $(".frbanner-email-reminder2-form input[name=rml_submitDate]").val(fundraisingBanner.getCurrentDate()); $(".frbanner-email-reminder2-form input[name=rml_segment]").val(Math.floor((Math.random() * 100) + 1));
$(".frbanner-email-reminder2-link").click(function() { $(".frbanner-email-reminder2-form").slideToggle(); $('#frbanner-email-reminder2').toggleClass('frbanner-email-reminder2-active'); $('#control_EMAIL2').focus(); });
$(".frbanner-email-reminder2-form button").bind("click", function() { if ( mw.util.validateEmail( $(".frbanner-email-reminder2-form form input[name='Email']").val() ) ) { fundraisingBanner.postReminder2Form(); $(".frbanner-email-reminder2-form").hide(); $(".frbanner-email-reminder2-link").hide(); $(".frbanner-email-reminder1-link").css( "visibility", "hidden" ); $(".frbanner-email-reminder1-form").hide(); $(".frbanner-email-reminder2-done").show(); mw.centralNotice.internal.hide.setHideWithCloseButtonCookies(); // Hide future banners for 7 days return false; } else { $(".frbanner-email-reminder2-form form input[name='Email']").addClass("error"); $(".frbanner-email-reminder2-form #errorMessageContainerId").show(); $('#control_EMAIL2').focus(); return false; } });
};
fundraisingBanner.countryNames = {
'US' : 'the U.S.', 'CA' : 'Canada', 'GB' : 'the UK', 'IE' : 'Ireland', 'AU' : 'Australia', 'NZ' : 'New Zealand', 'IT' : 'Italy', 'FR' : 'France'
};
$(document).ready(function() {
$('.frbanner-replace-country').text( fundraisingBanner.countryNames[Geo.country] );
fundraisingBanner.showLargeBanner();
$('.recurring-details').show(); fundraisingBanner.initReminder1Form(); fundraisingBanner.initReminder2Form();
$(".frbanner-close").click(function() { // Don't set a hide cookie here, as we expect them to always close this $("#frbanner").hide(); });
/* Close large 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'); } });
}); </script>