MediaWiki:Centralnotice-template-B1617 1205 en6C dsk p2 sm inart refactor
<style> /* For IE9 */ @media screen {
#centralNotice { display: block !important; }
}
/* Hide when editing */ .action-edit #centralNotice, .ve-activated #centralNotice {
display: none !important;
}
- centralNotice.collapsed .frbanner {
display: none;
}
/* Box-sizing */
- frbanner3 *,
- frbanner3 *:before,
- frbanner3 *:after,
- frbanner-nag {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* In-article banner styles
*/
- frbanner3 {
display: table; position: relative; text-align: justify; background: white; color: black; font-size: 1em; position: relative; margin-bottom: 2.25em; border: 5px solid #990000; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.frbanner3-message-container {
font-size: 1.15em; font-weight: bold; line-height: 1.4; padding: 0 0 .75em; display: block;
}
.frbanner3-message-padding {
padding: .75em; display: block;
}
/* --- Close Options --- */
- frbanner3-close-options {
text-align: center; background: #f2f2f2; padding: .2em .5em; display: block; z-index: 999; font-size: .8em; text-transform: uppercase;
}
/* --- Close button --- */
- frbanner3-close {
bottom: -2.5em; font-size: 0.8em; left: 0; position: absolute; text-align: center; width: 100%; text-transform: uppercase;
}
- frbanner3-close,
- frbanner3-remind {
display: inline-block; cursor: pointer; padding: 0.5em 1em; color: #8a8a8a;
}
- frbanner3-close {
z-index: 999;
}
- frbanner3-close:hover,
- frbanner3-remind:hover {
color: #000;
}
- frbanner3-close-x {
background: url('//upload.wikimedia.org/wikipedia/donate/3/32/Close-thin.png') no-repeat center center; width: 7px; height: 7px; display: inline-block; margin: .25em 0 0 .5em;
}
/* --- Form legends --- */
- frbanner3 legend {
width: 100%; margin: 0; text-align: center; color: #7c7c7c; font-weight: 500; padding: .5em 0 .2em 0;
}
.frbanner-submit legend {
display: none;
}
- frbanner3 ul { margin: 0; }
.frbanner-frequency ul {
margin-top: .75em !important;
}
- frbanner3 fieldset {
width: 100%; margin: 0 auto; padding: 0; border: none;
}
/* --- Common Button Styles --- */
.frbanner-btn, #amount_label_5 {
display: block; background-color: #f8f9fa; color: #222; border: 1px solid #9aa0a7; border-radius: 2px; padding: .5em .5em; margin: 0 auto; 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, #amount_label_5:hover {
background-color: #fff; color: #444; border-color: #a2a9b1;
} .frbanner-btn:active, #amount_label_5:active {
background-color: #d9d9d9; color: #000; border-color: #7d8389;
} .frbanner-btn:focus, #amount_label_5: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, .frbanner-amounts li label.checked {
background-color: #2a4b8d; color: #fff; border-color: #7d8389;
}
/* --- Buttons layout --- */
.frbanner-frequency ul, .frbanner-amounts ul, .frbanner-submit ul {
display: table; table-layout: fixed; width: 100%;
}
.frbanner-frequency ul li, .frbanner-amounts ul li, .frbanner-submit ul li {
display: table-cell; vertical-align: top; padding: 0 .5em 0 0;
}
/* --- Frequency buttons appearance --- */
.frbanner-frequency li {
display: table-cell; width: 50%; padding: 0 .4em 0 0; vertical-align: top;
}
body.rtl .frbanner-frequency li { padding: 0 0 0 .4em; }
.frbanner-frequency label {
display: block; width: 100%; font-size: 1.1em;
}
/* Hide radio buttons */ .frbanner-frequency li input[type="radio"], .frbanner-amounts li input[type="radio"] {
position: absolute; overflow: hidden; height: 1px; width: 1px; clip: rect(0 0 0 0); border: 0; margin: -1px; padding: 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;
}
@media (min-width: 768px) {
.frbanner-amounts li label { font-size: 1.1em; }
}
/* --- 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_5 {
white-space: nowrap;
}
- amount_label_5 {
background: #fff; border: 1px solid #aaa; color: #aaa; padding-left: .2em; padding-right: .2em; position: relative;
}
/* --- Payment method buttons appearance --- */
/* hide methods which aren't monthly capable when monthly option is selected */ .form-monthly .no-monthly {
display: none !important;
}
.frbanner-submit .frbanner-btn {
width: 100%; font-size: 1.15em !important; font-weight: 500; color: #3366cc;
}
.frbanner-submit .frbanner-btn:hover {
background-color: #fff; border-color: #859dcc;
}
.frbanner-submit .frbanner-btn:active {
background-color: #eff3fa; color: #2a4b8d; border-color: #2a4b8d; box-shadow: none
}
.frbanner-submit .frbanner-btn img {
display: block; margin: 0 auto; max-height: 1em; max-width: 100%;
}
.frbanner-continue {
margin-top: 1em;
}
/* --- Smallprint --- */
- frbanner3 #frbanner-smallprint {
width: 100%; font-size: 80%; margin-top: 2em; text-align: center; color: #3c3c3c;
}
/* --- Remind me by email --- */
.frbanner-email-reminder-link {
text-transform: uppercase; display: inline-block; cursor: pointer; color: #8a8a8a;
}
.frbanner-email-reminder-link:hover {
color: #000;
}
.frbanner-email-reminder {
display: none; position: absolute; cursor: default; padding: 1em; top: 2.9em; left: 50%; z-index: 10000; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 30em; background: #fff; border: 1px solid #aaa; border-radius: 2px; box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.15); text-transform: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.frbanner-email-reminder-form-anchor {
bottom: 100%; left: 50%; position: absolute;
}
.frbanner-email-reminder-form-anchor:before, .frbanner-email-reminder-form-anchor:after {
bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
.frbanner-email-reminder-form-anchor:before {
border-color: rgba(136, 136, 136, 0); border-bottom-color: #888888; border-width: 11px; margin-left: -11px;
}
.frbanner-email-reminder-form-anchor:after {
border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 10px; margin-left: -10px;
}
.frbanner-email-reminder * {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out;
}
.frbanner-email-reminder-anchor {
display: block; position: absolute; top: -10px; left: 50%; background-repeat: no-repeat;
}
.frbanner-email-reminder-anchor:before, .frbanner-email-reminder-anchor:after {
content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; border-top: 0;
}
.frbanner-email-reminder-anchor:before {
bottom: -10px; left: -9px; border-bottom-color: #888888; border-width: 10px
}
.frbanner-email-reminder-anchor:after {
bottom: -10px; left: -8px; border-bottom-color: #ffffff; border-width: 9px;
} .frbanner-email-reminder-form form {
display: table; width: 100%; text-align: center; font-weight: 500;
}
.frbanner-email-reminder-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-reminder-form input:focus {
outline: 0; border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc;
} .frbanner-email-reminder-form input.error {
border-color: #ff0000; box-shadow: inset 0 0 0 0.1em #ff0000;
}
.frbanner-email-reminder-form button, .frbanner-continue button {
width: 100%; display: block; margin-top: .5em; padding: .5em; color: #fff; background-color: #3366cc; border-color: #3366cc; cursor: pointer; border: 0; border-radius: 2px; font-size: 1em;
} .frbanner-email-reminder-form button:hover, .frbanner-continue button:hover {
background-color: #447ff5; border-color: #447ff5;
} .frbanner-email-reminder-form button:active, .frbanner-continue button:hover {
background-color: #2a4b8d; border-color: #2a4b8d; box-shadow: none;
}
.frbanner-email-reminder-form #errorMessageContainerId {
color: #CC0000; text-transform: none;
} .frbanner-email-reminder-done {
text-transform: none; font-size: 1.1em;
}
.frbanner-email-reminder-form .smallprint {
text-transform: none; margin-top: .5em; font-size: .8em; color: #555; line-height: 1.4;
}
/* --- "Nag" --- */
- frbanner-nag {
display: none; position: fixed; z-index: 999; top: 0; left: 0; color: black; background-color: white; padding: 5px; width: 100%; text-align: center; font-size: 17px; font-weight: bold; border: 5px solid #990000; box-shadow: 0 0 10px rgba(0,0,0,.5);
}
- frbanner-nag:hover {
text-decoration: none;
}
- frbanner-nag img {
margin-right: .4em; height: 20px; width: 20px;
}
.frbanner-nag-link {
vertical-align: middle; line-height: 26px;
} .frbanner-nag-link:hover {
text-decoration: underline;
}
- frbanner-nag button {
display: inline-block; margin: 0 0 0 1em; border-radius: 2px; background-color: #f8f9fa; border: 1px solid #9aa0a7; color: #3366cc; font-size: .8em; padding: .25em .5em; cursor: pointer; vertical-align: middle; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out;
}
- frbanner-nag button:hover {
background-color: #fff; color: #444; border-color: #a2a9b1;
}
.frbanner-nag-close {
display: block; position: absolute; top: 0; right: 5px; width: 15px; height: 15px; background: url('//upload.wikimedia.org/wikipedia/donate/8/84/Close-dark-trilogy.png') no-repeat center center; background-size: contain; cursor: pointer; opacity: 0.8; margin: 10px 6px; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out;
} .frbanner-nag-close:hover {
opacity: 1;
}
/* --- Footer / Small Print --- */ .frbanner-legal {
margin-top: 1em; font-size: .8em; line-height: 1.4; color: #555;
}
.recurring-details {
display: none;
} </style>
<script> var fundraisingBanner = {};
fundraisingBanner.paymentMethod = ; fundraisingBanner.paymentSubMethod = ;
fundraisingBanner.setPaymentMethod = function(method, submethod) {
fundraisingBanner.paymentMethod = method || 'cc'; // Default to credit card fundraisingBanner.paymentSubMethod = submethod || ;
$('.frbanner-submit').fadeOut('fast', function() { if ( fundraisingBanner.paymentMethod === 'cc' || fundraisingBanner.paymentMethod === 'paypal' ) { $('.frbanner-frequency, .recurring-details').show(); } $('.frbanner-step2').fadeIn('fast') });
};
fundraisingBanner.postReminderForm = function() {
// Create the iframe for the form and use it as the form's target var frameName = "remindFrame"; var $form = $(".frbanner-email-reminder-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.initReminderForm = function() {
$(".frbanner-email-reminder-form input[name=rml_country]").val(Geo.country); $(".frbanner-email-reminder-form input[name=rml_language]").val(mw.config.get('wgUserLanguage')); $(".frbanner-email-reminder-form input[name=rml_submitDate]").val(fundraisingBanner.getCurrentDate()); $(".frbanner-email-reminder-form input[name=rml_segment]").val(Math.floor((Math.random() * 100) + 1));
$(".frbanner-email-reminder-link").click(function() { $('.frbanner-email-reminder').toggle(); $('#control_EMAIL').focus(); });
$(".frbanner-email-reminder-form button").bind("click", function() { if ( mw.util.validateEmail( $(".frbanner-email-reminder-form form input[name='Email']").val() ) ) { fundraisingBanner.postReminderForm(); $(".frbanner-email-reminder-form form").hide(); $(".frbanner-email-reminder-done").show(); $(".frbanner-email-reminder").delay(2000).fadeOut(1500); mw.centralNotice.hideBanner(); // Hide future banners for 7 days return false; } else { $(".frbanner-email-reminder-form form input[name='Email']").addClass("error"); $(".frbanner-email-reminder-form #errorMessageContainerId").show(); $('#control_EMAIL').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.initReminderForm();
// Place frbanner3 in article: before first paragraph, or at top var $inArticleBanner = $('#frbanner3'); var $firstPara = $('#mw-content-text > p:first-of-type').first();
if ( $firstPara.length > 0 ) { $firstPara.before( $inArticleBanner ); } else { $('#mw-content-text').prepend( $inArticleBanner ); }
$inArticleBanner.show();
$(".frbanner-frequency label").click(function() { $(".frbanner-frequency label").removeClass("checked"); $(this).addClass("checked"); });
/* --- Code for sticky "nag" banner --- */ var nagHoverTimeout;
$(window).scroll(function() { var nagRevealPosition = $('#frbanner3').offset().top + $('#frbanner3').outerHeight();
if ( $(window).scrollTop() <= nagRevealPosition ) { $('#frbanner-nag').finish(); $('#frbanner-nag').hide(); } else { setTimeout(function(){ if ( !$('.frbanner' ).hasClass('nag-reveal') && $(window).scrollTop() > nagRevealPosition ) { $('#frbanner-nag').slideDown(); } }, 1500); } });
$('.frbanner-nag-close').click(function(e) { $('#frbanner-nag').remove(); e.stopPropagation(); e.preventDefault(); }); /* --- End code for sticky "nag" banner */
$("#frbanner3-close").click(function(e) { $("#frbanner3").hide(); mw.centralNotice.hideBanner(); e.stopPropagation(); });
}); </script>