MediaWiki:Centralnotice-template-B1617 1117 en6C dsk p1 lg refactor v3
<style> /* For IE9 */ @media screen {
#centralNotice {
display: block !important;
}
}
/* Hide when editing */ .action-edit #centralNotice, .ve-activated #centralNotice {
display: none !important;
}
/* 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-main {
position: relative; width: 100%; padding: 8px 0 8px 8px;
}
body.rtl .frb-main {
padding: 8px 8px 8px 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 {
position: relative;
display: table-cell;
width: auto;
vertical-align: top;
border: 8px solid #990000;
border-radius: 12px;
padding: 10px 25px;
background-color: #f8f9fa;
background-image: url('//upload.wikimedia.org/wikipedia/donate/9/99/RedInfoI.svg');
background-repeat: no-repeat;
background-position: 5px 5px;
background-size: 15px 15px;
color: #000;
font-family: "Linux Libertine", Georgia, Times, serif;
font-size: 1.05em;
line-height: 1.4;
}
.frb-message p {
margin: 0.25em 0;
}
.frb-highlight {
border-bottom: 3px solid #990000;
}
@media (min-width: 960px) {
.frb-message {
padding: 10px 30px;
background-size: 20px 20px;
font-size: 1.25em;
}
}
@media (min-width: 1100px) {
.frb-message {
font-size: 1.35em;
}
}
@media (min-width: 1200px) {
.frb-message {
padding: 15px 30px;
background-position: 5px 24px;
}
}
@media (min-width: 1300px) {
.frb-message {
background-position: 5px 28px;
font-size: 1.4em;
}
html[lang="en"] .frb-message { font-size: 1.5em; }
}
@media (min-width: 1500px) {
.frb-message {
font-size: 1.5em;
}
html[lang="en"] .frb-message { font-size: 1.6em; }
}
/* -------------- Form -------------- */
.frb-form {
display: table-cell; position: relative; width: 25%; min-width: 300px; 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 {
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-methods {
padding-bottom: 0;
}
.frb-methods ul {
display: table; table-layout: fixed;
}
.frb-methods ul li {
display: table-cell; vertical-align: top;
}
.frb-methods .frb-btn {
min-height: 4.2em;
}
.frb-methods .frb-btn img {
display: block; margin: 0 auto; max-height: 2em; max-width: 90%;
}
/* --- 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-rml {
height: 100%; font-size: .85em; position: relative; width: auto; padding: 0; margin-top: .5em;
}
@media (min-width: 960px) { .frb-rml { font-size: .9em; } } @media (min-width: 1200px) { .frb-rml { font-size: .95em; } }
.frb-rml-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-rml-form legend {
display: block;
}
.frb-rml-form:after, .frb-rml-form:before {
bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
.frb-rml-form:after {
border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 10px; margin-left: -10px;
}
.frb-rml-form:before {
border-color: rgba(136, 136, 136, 0); border-bottom-color: #888888; border-width: 11px; margin-left: -11px;
}
.frb-rml-form input {
width: 100%; padding: 0.5em; margin: 0; border: 1px solid #9aa0a7; border-radius: 2px; color: #000;
}
.frb-rml-form input:focus {
outline: 0; border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc;
}
.frb-rml-form input.error {
border-color: #ff0000; box-shadow: inset 0 0 0 0.1em #ff0000;
}
.frb-rml-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-rml-form button:hover {
background: #447ff5;
}
.frb-rml-form button:active {
background: #2a4b8d;
}
.frb-rml-form .frb-rml-error {
color: #ff0000; padding-top: .25em;
}
.frb-rml-ty {
padding: 0 1em; text-align: center; cursor: default;
} </style>
<script> var 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-main').height();
$('#mw-panel').css('top', bannerHeight+160+extra);
$('#mw-head').css('top', bannerHeight+extra);
$('#mw-page-base').css('margin-top', bannerHeight+extra);
}
},
show: function() {
$('body').prepend($('#centralNotice'));
$('#{{{banner}}}').css('display', 'block');
fundraisingBanner.addSpace();
$(window).resize(function() {
fundraisingBanner.addSpace();
});
},
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.rml = {
post: function() {
/* Create the iframe for the form and use it as the form's target */
var frameName = 'remindFrame';
var $form = $('#frb-rml-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();
},
getCurrentDate: function() {
/* Get current date in correct format for Silverpop */
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;
}
return mm+'/'+dd+'/'+yyyy; },
init: function() {
/* Prep the reminder form */
var form = document.getElementById('frb-rml-form');
form.rml_country.value = Geo.country;
form.rml_language.value = mw.config.get('wgUserLanguage');
form.rml_submitDate.value = fundraisingBanner.rml.getCurrentDate();
form.rml_segment.value = Math.floor((Math.random() * 100) + 1);
$('.frb-rml-link').click(function() {
$('.frb-rml-form').toggle();
$('#frb-rml-email').focus();
});
$('#frb-rml-submit').click(function() {
if ( mw.util.validateEmail( form.Email.value ) ) {
fundraisingBanner.rml.post();
$('.frb-rml-form, .frb-rml-link').hide();
$('.frb-rml-ty').show();
fundraisingBanner.addSpace();
mw.centralNotice.hideBanner(); // Hide future banners for 7 days
return false;
} else {
$('#frb-rml-email').addClass('error').focus();
$('.frb-rml-error').show();
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.rml.init(); 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>