MediaWiki:Centralnotice-template-B1617 1117 en6C dsk p1 lg refactor v2
<style> /* For IE9 */ @media screen {
#centralNotice {
display: block !important;
}
}
/* Hide when editing */ .action-edit #centralNotice, .ve-activated #centralNotice {
display: none !important;
}
/* Clearfix */
.frb .cf:before, .frb .cf:after {
content: ""; display: table;
}
.frb .cf:after { clear: both; } .ie7 .frb .cf { zoom: 1; }
/* Border-Box */
.frb *, .frb *:before, .frb *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* Banner wide settings */
.frb input, .frb button {
font-size: inherit; font-family: inherit;
}
.frb button {
cursor: pointer; outline: 0; text-align: center;
}
/* --- Main banner wrapper --- */
div#{{{banner}}} {
display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 110; background: transparent;
}
.frb {
border-bottom: 1px solid #c8ccd1; background-color: #fff; box-shadow: 0 1px 1px rgba(0,0,0,0.1); color: #222; font: 1em/1.2 "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif; font-weight: 500;
}
/* --- Window Styles --- */
.frb-window {
position: relative; width: 100%; padding: 0.5em 0 0.5em 0.5em;
}
body.rtl .frb-window {
padding: 0.5em 0.5em 0.5em 0;
}
/* --- Close button --- */
.frb-close {
display: inline-block;
position: absolute;
right: .6em;
top: .5em;
z-index: 999;
font-size: .8em;
text-transform: uppercase;
cursor: pointer;
opacity: .5;
background: url('//upload.wikimedia.org/wikipedia/donate/3/32/Close-thin.png') no-repeat right center / 9px 9px;
padding-right: 14px;
}
body.rtl .frb-close {
right: auto; left: .6em; background-position: right center; padding: 0 0 0 14px;
}
.frb-close:hover { opacity: 1; }
/* -------------- Message -------------- */
.frb-message {
display: table-cell;
width: auto;
vertical-align: top;
font-family: "Linux Libertine", Georgia, Times, serif;
font-size: 1.05em;
color: #000;
position: relative;
padding: .9em;
line-height: 1.4;
border-radius: 0.5em;
border: 8px solid #990000;
background-color: #020524;
background: #f8f9fa url('//upload.wikimedia.org/wikipedia/donate/9/99/RedInfoI.svg') no-repeat 5px 5px / 15px 15px;
}
.frb-highlight {
border-bottom: 3px solid #990000;
}
@media (min-width : 960px) {
.frb-message {
padding: .7em 1.3em;
font-size: 1.35em;
background-size: 20px 20px, auto;
}
}
@media (min-width : 1200px) {
.frb-message {
padding: .7em 1.5em;
background-position: 6px 28px;
}
}
@media (min-width : 1300px) {
.frb-message {
font-size: 1.4em;
background-position: 6px 28px;
}
html[lang="en"] .frb-message { font-size: 1.5em; }
}
@media (min-width : 1500px) {
.frb-message {
font-size: 1.5em;
background-position: 8px 30px;
}
html[lang="en"] .frb-message { font-size: 1.6em; }
}
@media (min-width : 1800px) {
.frb-message { height: 16.5em; }
}
.frb-message p {
margin: 0.25em 0;
}
/* -------------- Form -------------- */
.frb-form {
display: table-cell; position: relative; width: 30%; height: 100%; vertical-align: top; padding: 1.7em .75em .5em .75em; background: #fff;
}
.frb-form:before {
position: absolute; left: 0; top: 50%; content: " "; margin: 0; border: 10px solid transparent; border-left-color: #990000; pointer-events: none;
}
@media (min-width : 960px) {
.frb-form {
width: 25%;
padding-top: 2em;
}
}
.frb-form fieldset {
width: 100%; border: 0; margin: 0 auto; padding: 0 0 .5em 0;
}
.frb-form ul {
display: table; width: 100%; margin: 0 0 .5em 0; padding: 0; list-style: none;
}
.frb-form li {
display: table-cell; padding: 0 .25em; vertical-align: top;
}
.frb-form legend {
width: 100%; margin: 0; padding: 0 0 .5em 0; text-align: center; font-size: .9em;
}
/* Hide radio buttons */
.frb-form li input[type="radio"] {
position: absolute; overflow: hidden; height: 1px; width: 1px; clip: rect(0 0 0 0); border: 0; margin: -1px; padding: 0;
}
/* --- Common Button Styles --- */
.frb-btn {
width: 100%; display: block; background-color: #f8f9fa; color: #222222; font-size: .9em; 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; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out;
} .frb-btn:hover {
background-color: #fff; color: #444; border-color: #a2a9b1;
} .frb-btn:active {
background-color: #d9d9d9; color: #000; border-color: #7d8389;
} .frb-amounts .frb-btn:focus {
border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc;
} .frb-btn.checked {
background-color: #2a4b8d; color: #fff; border-color: #7d8389;
} .frb-btn.frb-link {
color: #3366cc;
} .frb-btn.frb-link:active {
color: #2a4b8d;
}
/* --- Frequency Buttons --- */
.frb-frequency li {
width: 50%;
}
/* --- Amount Buttons --- */
.frb-amounts legend {
display: block;
} .frb-amounts li {
width: 25%;
}
/* Chrome specific - need to be floated for height 100% to work */ @media screen and (-webkit-min-device-pixel-ratio:0) {
.frb-amounts li { float: left; }
.rtl .frb-amounts li { float: right; }
}
.frb-amounts .frb-btn {
height: 100%; font-size: 1.2em;
}
@media (max-width : 1100px) { .frb-amounts .frb-btn { font-size: .9em; } }
- --- Other Amount --- */
.frb-amt-other {
display: block; position: relative; padding: 0;
} .frb-amt-other input[type="text"] {
width: 100%; padding: 1.42em .5em; font-size: .7em;
} @media (min-width : 1100px) {
.frb-amt-other input[type="text"] {
font-size: .9em;
padding: 1.5em .5em;
}
} @media (min-width : 1200px) {
.frb-amt-other input[type="text"] {
font-size: 1em;
padding: 1.29em .5em;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.frb-amt-other input[type="text"] {
padding: 1.35em .5em;
}
} @media screen and (min-width : 1100px) and (-webkit-min-device-pixel-ratio:0) {
.frb-amt-other input[type="text"] {
padding: 1.45em .5em;
}
} @media screen and (min-width : 1200px) and (-webkit-min-device-pixel-ratio:0) {
.frb-amt-other input[type="text"] {
padding: 1.23em .5em;
}
} /* --- .frb-amt-other.other-entered input[type="text"] {
background-color: #2a4b8d; color: #fff; border-color: #7d8389;
}
.frb-amt-other input[type="text"]:hover{
background-color: #fff; color: #444; border-color: #a2a9b1;
}
.frb-amt-other input[type="text"]:focus {
border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc;
}
--- */
/* --- Payment method Buttons --- */
/* hide methods which aren't monthly capable when monthly option is selected */ .form-monthly .no-monthly {
display: none !important;
}
.frb-form .frb-submit {
padding-bottom: 0;
}
.frb-submit li {
width: 33.33%;
}
.frb-submit .frb-btn img {
display: block; margin: 0 auto; max-height: 1em; max-width: 90%;
}
/* If wide enough, put in a row. table-layout: fixed; makes them equal widths */
@media (max-width : 1100px) {
.frb-submit .frb-btn {
}
.frb-submit ul {
display: block;
}
.frb-submit li {
width: 100%;
margin-bottom: .5em;
display: block;
float: none;
}
}
@media (min-width : 1100px) {
.frb-submit .frb-btn {
min-height: 4.2em;
}
.frb-submit .frb-btn img {
max-height: 1.9em;
}
}
/* --- Secure Transaction Legend --- */
.frb-secure-transaction {
display: block; padding: .4em 1em; margin: 0 auto; color: #000; font-size: .85em; text-transform: uppercase; text-align: center; opacity: .7;
} .frb-secure-transaction img {
width: 1.2em; height: 1.2em; display: inline-block;
}
/* --- Footer / Small Print --- */ .frb-footer {
padding: 0 2em .5em 2em; font-size: .75em; color: #555; text-align: center; display: none; font-weight: normal;
}
.frb:hover .frb-footer { display: block; }
/* --- Maybe later --- */
.frb-ml {
height: 100%; font-size: .85em; position: relative; width: auto; padding: 0; margin-top: .5em;
}
@media (min-width: 960px) { .frb-ml { font-size: .9em; } } @media (min-width: 1200px) { .frb-ml { font-size: .95em; } }
.frb-ml-form {
display: none; position: absolute; width: 100%; padding: 1em; margin-top: .4em; text-align: center; background: white; border: 1px solid #888888; border-radius: 2px; box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.15); z-index: 10;
}
.frb-ml-form legend {
display: block;
}
.frb-ml-form:after, .frb-ml-form:before {
bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
.frb-ml-form:after {
border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 10px; margin-left: -10px;
}
.frb-ml-form:before {
border-color: rgba(136, 136, 136, 0); border-bottom-color: #888888; border-width: 11px; margin-left: -11px;
}
.frb-ml-form form {
margin-top: .5em;
}
.frb-ml-form input {
width: 100%; padding: 0.5em; margin: 0; border: 1px solid #9aa0a7; border-radius: 2px;
}
.frb-ml-form input:focus {
border-color: #3366cc;
}
.frb-ml-form input.error {
border-color: #ff0000;
}
.frb-ml-form button {
width: 100%; display: block; cursor: pointer; line-height: 1; background: #3366cc; color: white; border: 1px solid #3366cc; border: none; border-radius: 2px; padding: .5em; margin-top: .5em; transition: background 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
}
.frb-ml-form button:hover { background: #447ff5; }
.frb-ml-form button:active { background: #2a4b8d; }
.frb-ml-form #errorMessageContainerId {
color: #ff0000; padding-top: .25em;
}
.frb-ml-ty {
padding: 0 1em; text-align: center; cursor: default;
}
</style>
<script> var fundraisingBanner = {};
fundraisingBanner.addSpace = function() {
if ( $('#{{{banner}}}').is(':visible') ) {
/* Add space for the banner, and extra px if given below. called on load and window resize */
var extra = 16;
var bannerHeight = $('.frb-window').height();
$('#mw-panel').css('top', bannerHeight+160+extra);
$('#mw-head').css('top', bannerHeight+extra);
$('#mw-page-base').css('margin-top', bannerHeight+extra);
}
};
fundraisingBanner.show = function() {
$('body').prepend($('#centralNotice'));
$('#{{{banner}}}').css('display', 'block');
fundraisingBanner.addSpace();
/* Resize after delay so images have loaded. TODO: find better way to do this */
setTimeout(function (){ fundraisingBanner.addSpace(); }, 100);
setTimeout(function (){ fundraisingBanner.addSpace(); }, 500);
setTimeout(function (){ fundraisingBanner.addSpace(); }, 1000);
setTimeout(function (){ fundraisingBanner.addSpace(); }, 5000);
$(window).resize(function() {
fundraisingBanner.addSpace();
});
};
fundraisingBanner.hide = function() {
/* Hide the banner, and remove the extra space which was added for it */
/* Don't set a cookie: this is a large banner and only shown on first view anyway */
$('#{{{banner}}}').hide();
$('#mw-panel').css('top', '160px');
$('#mw-head').css('top', '0px');
$('#mw-page-base').css('margin-top', '0');
return false;
};
fundraisingBanner.postReminderForm = function() {
// Create the iframe for the form and use it as the form's target
var frameName = "remindFrame";
var $form = $(".frb-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() {
$(".frb-ml-form input[name=rml_country]").val(Geo.country);
$(".frb-ml-form input[name=rml_language]").val(mw.config.get('wgUserLanguage'));
$(".frb-ml-form input[name=rml_submitDate]").val(fundraisingBanner.getCurrentDate());
$(".frb-ml-form input[name=rml_segment]").val(Math.floor((Math.random() * 100) + 1));
$(".frb-ml-link").click(function() {
$('.frb-ml-form').toggle();
$('#control_EMAIL').focus();
});
$(".frb-ml-form button").bind("click", function() {
if ( mw.util.validateEmail( $(".frb-ml-form form input[name='Email']").val() ) ) {
fundraisingBanner.postReminderForm();
$(".frb-ml-form").hide();
$(".frb-ml-link").hide();
$(".frb-ml-ty").show();
fundraisingBanner.addSpace();
mw.centralNotice.hideBanner(); // Hide future banners for 7 days
return false;
} else {
$(".frb-ml-form form input[name='Email']").addClass("error");
$(".frb-ml-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() {
$('.frb-replace-country').text( fundraisingBanner.countryNames[Geo.country] );
fundraisingBanner.initReminderForm();
fundraisingBanner.show();
$(".frb-amounts .frb-btn").click(function() {
// Clear other amounts
$("#amount_other").removeClass("other-entered");
// Check only this button
$(".frb-amounts .frb-btn").removeClass("checked");
$(this).siblings("input").addClass("checked");
// Check only this label
$(".frb-amounts label").removeClass("checked");
$(this).addClass("checked");
// Clear "other" box and restore placeholder
$('.frb-amounts .frb-btn').val();
$('.frb-amounts .frb-btn').attr("placeholder", fundraisingBanner.amountOtherPlaceholder);
});
$(".frb-amt-other").click(function() {
$(".frb-amt-other").prop('checked', true);
$(".frb-amt-other .frb-btn").focus();
});
fundraisingBanner.amountOtherPlaceholder = $(".frb-amt-other .frb-btn").attr("placeholder");
// Remove the placeholder on focus
$("body").on("focus", ".frb-amt-other .frb-btn", function(){
// Uncheck predefined amounts
$(".frb-amounts input").removeClass("checked");
$(".frb-amounts label").removeClass("checked");
// Check this amount
// $('#input_amount').addClass('focused');
$(this).removeAttr("placeholder");
});
// Restore the placeholder if the value is empty. Add / remove class from parent li.
$("body").on("blur", ".frb-amt-other .frb-btn", function(){
//console.log("the value is: " + fundraisingBanner.amountOtherPlaceholder);
if($(this).val() === ""){
$(this).attr("placeholder", fundraisingBanner.amountOtherPlaceholder);
$(".frb-amt-other .frb-btn").removeClass("checked");
} else {
$(".frb-amt-other .frb-btn").addClass("checked");
}
});
}); </script>