MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad: Unterschied zwischen den Versionen

Aus Hurraki - Wörterbuch für Leichte Sprache
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
<!-- WMDE compiled banner, see https
+
<!-- Large mobile banner. Must be used with "Large banner limit and switch" mixin -->
 +
<style>
 +
/* Clearfix */
 +
.frb .cf:before,
 +
.frb .cf:after {
 +
  content: "";
 +
  display: table;
 +
}
 +
 
 +
.frb .cf:after { clear: both; }
 +
 
 +
/* Box-sizing */
 +
.frb,
 +
.frb *,
 +
.frb *:before,
 +
.frb *:after {
 +
    -moz-box-sizing: border-box;
 +
    -webkit-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
}
 +
 
 +
/* Common styles */
 +
.frb label,
 +
.frb button,
 +
.frb input {
 +
    font-family: inherit;
 +
    -webkit-transition: all .2s ease-in-out;
 +
    -moz-transition:    all .2s ease-in-out;
 +
    transition:        all .2s ease-in-out;
 +
}
 +
 
 +
/* Main banner
 +
------------------------------------ */
 +
 
 +
#frb {
 +
    position: absolute;
 +
    top: 0 !important;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
 +
}
 +
 
 +
#frb-mask {
 +
    position: absolute;
 +
    z-index: 1000;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    background-color: black;
 +
    opacity: 0.8;
 +
}
 +
 
 +
#frb-window {
 +
    position: relative;
 +
    top: 0;
 +
    left: 0;
 +
    right: auto;
 +
    width: 100%;
 +
    margin-top: 0;
 +
    color: #000;
 +
    background: #fff;
 +
}
 +
 
 +
@media (min-width: 768px) {
 +
    #frb-window {
 +
        margin-top: 20px;
 +
        left: 5%;
 +
        right: 5%;
 +
        width: 90%;
 +
    }
 +
}
 +
 
 +
/* --- Message --- */
 +
 
 +
.frb-message {
 +
    font-size: 20px;
 +
    line-height: 1.3;
 +
    border: 5px solid #990000;
 +
    border-bottom: 0;
 +
}
 +
 
 +
.frb-message-text {
 +
    padding: 20px;
 +
    font-weight: bold;
 +
}
 +
 
 +
@media (min-width: 768px) {
 +
    .frb-message {
 +
        font-size: 24px;
 +
        line-height: 1.4;
 +
    }
 +
    .frb-message-text {
 +
        padding: 48px 72px;
 +
    }
 +
}
 +
 
 +
@media (min-height: 1000px) {
 +
    .frb-message {
 +
        font-size: 24px;
 +
    }
 +
    .frb-message-text {
 +
        padding: 48px 72px;
 +
    }
 +
}
 +
 
 +
.frb-message-text p {
 +
    margin-bottom: 10px;
 +
}
 +
 
 +
.frb-message-text p:last-child {
 +
    margin-bottom: 0;
 +
}
 +
 
 +
 
 +
/* Call to action */
 +
.frb-cta {
 +
    text-align: center;
 +
    background: #990000;
 +
    color: #fff;
 +
    padding: 10px;
 +
    font-weight: 400;
 +
    font-size: 24px;
 +
    display: block;
 +
    margin: auto;
 +
    width: 100%;
 +
    position: relative;
 +
}
 +
 
 +
@media (min-height: 1000px) {
 +
    .frb-cta {
 +
        padding: 27px;
 +
    }
 +
}
 +
@media (min-width : 1100px) {
 +
    .frb-cta {
 +
        font-size: 33px;
 +
    }
 +
}
 +
 
 +
.frb-cta:after {
 +
    position: absolute;
 +
    left: 50%;
 +
    top: 100%;
 +
    height: 0;
 +
    width: 0;
 +
    margin-left: -

Version vom 10. September 2018, 16:26 Uhr

<style> /* Clearfix */ .frb .cf:before, .frb .cf:after {

  content: "";
  display: table;

}

.frb .cf:after { clear: both; }

/* Box-sizing */ .frb, .frb *, .frb *:before, .frb *:after {

   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

}

/* Common styles */ .frb label, .frb button, .frb input {

   font-family: inherit;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition:    all .2s ease-in-out;
   transition:         all .2s ease-in-out;

}

/* Main banner


*/
  1. frb {
   position: absolute;
   top: 0 !important;
   left: 0;
   width: 100%;
   height: 100%;
   font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;

}

  1. frb-mask {
   position: absolute;
   z-index: 1000;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: black;
   opacity: 0.8;

}

  1. frb-window {
   position: relative;
   top: 0;
   left: 0;
   right: auto;
   width: 100%;
   margin-top: 0;
   color: #000;
   background: #fff;

}

@media (min-width: 768px) {

   #frb-window {
       margin-top: 20px;
       left: 5%;
       right: 5%;
       width: 90%;
   }

}

/* --- Message --- */

.frb-message {

   font-size: 20px;
   line-height: 1.3;
   border: 5px solid #990000;
   border-bottom: 0;

}

.frb-message-text {

   padding: 20px;
   font-weight: bold;

}

@media (min-width: 768px) {

   .frb-message {
       font-size: 24px;
       line-height: 1.4;
   }
   .frb-message-text {
       padding: 48px 72px;
   }

}

@media (min-height: 1000px) {

   .frb-message {
       font-size: 24px;
   }
   .frb-message-text {
       padding: 48px 72px;
   }

}

.frb-message-text p {

   margin-bottom: 10px;

}

.frb-message-text p:last-child {

   margin-bottom: 0;

}


/* Call to action */ .frb-cta {

   text-align: center;
   background: #990000;
   color: #fff;
   padding: 10px;
   font-weight: 400;
   font-size: 24px;
   display: block;
   margin: auto;
   width: 100%;
   position: relative;

}

@media (min-height: 1000px) {

   .frb-cta {
       padding: 27px;
   }

} @media (min-width : 1100px) {

   .frb-cta {
       font-size: 33px;
   }

}

.frb-cta: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;

}


/* --- Form --- */

  1. frb-donation-form {
   position: relative;
   background: #fff;
   padding: 1.5em 1.5em 0em;
   clear: both;

}

@media (min-width: 768px) {

  #frb-donation-form {
       padding: 2em 2em 1em 2em;
   }

}

  1. frb-donation-form:before {
   position: absolute;
   left: 50%;
   top: 0;
   height: 0;
   width: 0;
   margin-left: -10px;
   content: " ";
   border: solid transparent;
   border-top-color: #990000;
   border-width: 10px;
   pointer-events: none;

}

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

  1. frb-donation-form legend {
   width: 100%;
   margin: 0 0 .5em;
   text-align: center;
   font-size: 16px;
   text-transform: uppercase;
   color: #222;

}

@media (min-width : 768px) { #frb-donation-form legend { font-size: 18px; } }

/* --- Amount buttons layout --- */ .frb-amounts ul li {

   display: block;
   width: 49%;
   clear: none;
   float: left;
   margin-bottom: 6px;
   margin-right: 2%;

}

body.rtl .frb-amounts ul li {

   float: right;
   margin-right: 0;
   margin-left: 2%;

}

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

/* Very small screen layout, 2 amount buttons per row */ @media (max-width: 374px) {

   body.ltr .frb-amounts ul li:nth-child(2n) {
       margin-right: 0;
   }
   body.rtl .frb-amounts ul li:nth-child(2n) {
       margin-left: 0;
   }

}

/* Larger screen layout, 4 amount buttons per row */ @media (min-width: 375px) {

   .frb-amounts ul li {
       width: 31.8333333%;
       margin-right: 1.5%;
   }
   body.rtl .frb-amounts ul li {
       margin-right: 0;
       margin-left: 1.5%;
   }
   body.ltr .frb-amounts ul li:nth-child(3n) {
       margin-right: 0;
   }
   body.rtl .frb-amounts ul li:nth-child(3n) {
       margin-left: 0;
   }

}

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

.frb-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;

}

.frb-amounts li label {

   display: block;
   width: 100%;
   padding: 24px;
   line-height: 40px;
   font-size: 1.1em;
   font-style: normal;
   font-weight: bold;
   text-align: center;
   background: #f8f9fa;
   border: 1px solid #9aa0a7;
   border-radius: 4px;
   color: #000;
   cursor: pointer;

}

.frb-amounts li label:active {

   background-color: #d9d9d9;

}


@media (min-width: 768px) {

  .frb-amounts li label {
     font-size: 28px;
  }

}

  1. frb-form input[type="radio"]:checked + .frb-btn, #frb-form .frb-btn.checked {
   background-color: #2a4b8d;
   color: #fff;
   border-color: #7d8389;

}

.frb-amounts li input[type="radio"]:checked + label, .frb-amounts li input[type="radio"].checked + label {

   background-color: #2a4b8d;
   color: #fff;
   border-color: #7d8389;

}

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

  1. frb-amt-other-input {
   margin: 0;
   padding: 0;
   background: transparent;
   border: none;
   width: 90%;
   color: #222222;
   text-align: center;
   direction: ltr;
   border-radius: 0;
   padding-left: 5%;

}


  1. frb-amt-other-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: #222222;

}

  1. frb-amt-other-input::-moz-placeholder { /* Firefox 19+ */
   color: #222222;

}

  1. frb-amt-other-input:-moz-placeholder { /* Firefox 18- */
   color: #222222;

}

  1. frb-amt-other-input:-ms-input-placeholder { /* IE 10+ */
   color: #222222;

}

/* Placeholder focus styles */ .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */

   color: #fff;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:focus:-moz-placeholder { /* Firefox 18- */

   color: #fff;
   opacity: 1 !important;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:focus::-moz-placeholder { /* Firefox 19+ */

   color: #fff;
   opacity: 1 !important;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:focus:-ms-input-placeholder { /* IE 10+ */

   color: #fff;

}

/* Placeholder checked styles */ .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */

   color: #fff;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:-moz-placeholder { /* Firefox 18- */

   color: #fff;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input::-moz-placeholder { /* Firefox 19+ */

   color: #fff;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:-ms-input-placeholder { /* IE 10+ */

   color: #fff;

}

  1. frb-amt-other-label {
   border: 1px solid #9aa0a7;
   color: #555;
   padding-left: 3px;

}

  1. frb-amt-other:checked + #frb-amt-other-label #frb-amt-other-input {
   color: #FFFFFF;

}


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


/* "Phone" layout, full width stacked */ @media (max-width: 767px) {

   .frb-submit li {
       width: 100%;
       margin-bottom: 6px;
   }
   #frb-window li.frb-submit {
       display: block;
       margin: 0;
   }

}

/* "Tablet" layout, next to each other */ @media (min-width: 768px) {

   .frb-submit ul {
       display: table;
       table-layout: fixed;
       width: 100%;
   }
   .frb-submit ul li {
       display: table-cell;
       padding: 0 10px;
       vertical-align: top;
   }

}


@media (min-width : 570px) {

   .frb-submit li {
       margin-bottom: 10px;
   }

}

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

.frb-submit .frb-btn {

   display: inline-block;
   width: 100%;
   padding: 0.8em 0.4em;
   font-size: 1.1em;
   line-height: 1;
   text-transform: uppercase;
   text-align: center;
   border: 1px solid #9aa0a7;
   border-radius: 4px;
   color: #36c;
   background-color: #f8f9fa;
   background-size: auto 50%;
   background-repeat: no-repeat;
   background-position: center center;
   cursor: pointer;

}

@media (min-width: 768px) {

   .frb-submit .frb-btn {
       min-height: 3.6em;
   }

}

.frb-submit .frb-btn:hover {

   background-color: #fff;

}

.frb-submit .frb-btn:active {

   background-color: #d9d9d9;
   color: #2a4b8d;

}

/* Payment logos */ .frb-submit .paymentmethod-pp {

   text-indent: -99999px;
   background-image: url('//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg');

}

/* --- Smallprint --- */

.frb-bankinfo {

   text-align: center;
   margin-top: 1em;
   font-size: .9em;

}

.frb-bankinfo span {

   white-space: nowrap;

}

.frb-footer {

   width: 100%;
   font-size: 75%;
   padding: 1em 20px;
   background: #e2e2e2;
   text-align: center;
   color: #3c3c3c;

}


/* --- Top bar --- */

.frb-topbar {

   background: #000;
   display: block;
   z-index: 999;
   color: #fff;
   font-size: 14px;
   text-transform: uppercase;
   text-align: right;
   width: 100%;

}

@media (min-width: 375px) {

   .frb-topbar {
       font-size: 16px;
   }

}

.frb-close, .frb-rml1-link {

   display: inline-block;
   padding: 8px;
   cursor: pointer;
   z-index: 999;
   vertical-align: middle;
   color: #ccc;

}

.frb-close:hover, .frb-rml1-link:hover {

   color: #fff;

}

/*Hover*/ .frb-close:hover .frb-close-x g {

   stroke: #fff;

}

.frb-rml1-link {

   width: 60%;
   border-right: 1px solid #666;

} body.rtl .frb-rml1-link {

   border-right: 0;
   border-left: 1px solid #666;

}

.frb-close {

   width: 38%;

}

.frb-close-x {

   height: 14px;
   width: 14px;
   margin-bottom: -2px;

}

@media screen and (min-width: 375px) {

   .frb-close-x {
       margin-bottom: -1px;
   }

}

.frb-close.bottom {

   text-align: center;
   color: white;
   display: inline-block;
   width: auto;
   margin: auto;
   z-index: 999;
   color: #fff;
   font-size: 13px;
   padding: 13px;
   text-transform: uppercase;
   cursor: pointer;

}

.frb-close.bottom:hover {

   color: #fff;

}

@media (min-width: 768px) {

   .frb-close.bottom {
       display: none;
   }

}


/* Bottom "reminder" banner styles


*/
  1. frb-nag {
   z-index: 100;
   position: fixed;
   left: 0;
   bottom: -100%;
   width: 100%;
   display: block;
   color: black;
   background-color: white;
   padding: 10px 20px;
   text-align: center;
   font-size: 15px;
   line-height: 1;
   font-weight: bold;
   border: 5px solid #990000;
   box-shadow: 0 0 10px rgba(0,0,0,.5);
   cursor: pointer;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition:    all .5s ease-in-out;
   transition:         all .5s ease-in-out;

}

  1. frb-nag:hover {
   text-decoration: none;

}

@media (min-width: 720px) {

   #frb-nag {
       font-size: 17px;
   }

}

  1. frb-nag.reveal {
   bottom: 0;

}

  1. frb-nag img {
   height: 17px;
   width: 17px;

}

  1. frb-nag .frb-btn {
   display: inline-block;
   font-size: 12px;
   padding: 3px 6px;

}

.frb-nag-message {

   vertical-align: middle;
   margin-bottom: 8px;
   line-height: 1.1;

} .frb-nag-message:hover {

   text-decoration: underline;

}

.frb-nag-close {

   display: block;
   border: 2px solid black;
   position: absolute;
   top: -20px;
   right: -5px;
   width: 35px;
   height: 35px;
   padding: 5px;
   background: white url('//upload.wikimedia.org/wikipedia/donate/8/84/Close-dark-trilogy.png') no-repeat center center;
   background-size: 50%;
   cursor: pointer;
   border-radius: 50%;
   box-shadow: 0 0 10px rgba(0,0,0,.3);
   -webkit-transition: all .25s ease-in-out;
   -moz-transition:    all .25s ease-in-out;
   transition:         all .25s ease-in-out;

} body.rtl .frb-nag-close {

   right: auto;
   left: -5px;

} .frb-nag-close:active {

   -moz-transform:    scale(1.05);
   -ms-transform:     scale(1.05);
   -webkit-transform: scale(1.05);
   transform:         scale(1.05);

}

  1. frb-nag .frb-nag-message2 {
   display: none;

}

/*!--- Focus styles ----*/

/*Outline reset*/ .frb-close:focus, .frb-rml1-link:focus, .frb-rml1-form input:focus, .frb-rml2-form input:focus, .frb-btn:focus, .frb-btn-submit:focus, .frb-frq-switch:focus,

  1. frb-amt-other-input:focus {
   outline: 0;

}

.frb-rml2-form input:focus, .frb-frq-switch.is-active, .frb-btn:focus, .frb-rml2-form input:focus, .frb-amounts input[type="radio"]:focus + label, .frb-amounts input[type="radio"]:focus + .frb-btn {

   border-color: #36c !important;
   box-shadow: inset 0 0 0 1px #36c;

}

/*Exception because of black background*/ .frb-rml1-form input:focus {

   box-shadow: inset 0 0 0 1px #FFFFFF, inset 0 0 0 1px #36c;

}

/*Focus styles*/ .frb-close:focus, .frb-rml1-link:focus {

   box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #36c;

}

.frb-btn-submit:focus, .frb-amounts input[type="radio"]:checked + label:focus, .frb-amounts input[type="radio"]:checked + .frb-btn:focus, .frb-amounts input[type="radio"]:checked:focus + label, .frb-amounts input[type="radio"]:checked:focus + .frb-btn, .frb-amt-other.is-focused .frb-btn {

   border-color: #36c;
   box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;

}

.frb-close:focus, .frb-rml1-link:focus {

   color: #fff;

}

.frb-close:focus .frb-close-x g {

   stroke: #fff;

}

</style>

<script> /* Allow overriding country */ if( mw.util.getParamValue("country") ) {

   Geo.country = mw.util.getParamValue("country");

}

MediaWiki:FR2014/Resources/alterImpressionData.js

var frb = frb || {};

frb.showLargeBanner = function() {

   $('#content_wrapper').prepend($('#frb'));
   $('#frb-window').css('top', $(window).scrollTop() + 20); // position banner where they have scrolled to
   $('#frb').show();

};

frb.validateForm = function() {

   var form = document.donationForm;
   var error = false;
   // Get amount selection
   var amount = $('input[name=amount]:checked').val();
   if( amount === 'Other' ) {
       amount = $('#frb-amt-other-input').val();
   }
   // Check amount is a real number
   error = ( amount == null || isNaN( amount ) || amount.value <= 0 );
   // Check amount is at least the minimum
   if ( amount < 1 || error ) {
       return false;
   } else if ( amount > 99999 ) {
       return false;
   }
   // make sure the right field form has the amount
   $('input[name=amount]:checked').val( amount );
   return !error;

};

$(document).ready(function() {

   var donationForm = document.donationForm;
   $( '.paymentmethod-cc' ).click( function() {
       if( frb.validateForm() ) {
           donationForm.action = '⧼Centralnotice-B16_WMCH_translations-creditcard-link⧽';
           $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', 'disabled' );
           donationForm.submit();
       } else {
           alert( "⧼Centralnotice-B16_WMCH_translations-amount-alert⧽" );
           return false;
       }
   });
   $( '.paymentmethod-pp' ).click( function() {
       if( frb.validateForm() ) {
           donationForm.action = 'https://www.paypal.com/cgi-bin/webscr';
           $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', false );
           donationForm.lc.value = mw.config.get('wgUserLanguage'); // set to correct language
           donationForm.submit();
       } else {
           alert( "⧼Centralnotice-B16_WMCH_translations-amount-alert⧽" );
           return false;
       }
   });
   $( '.paymentmethod-slip' ).click( function() {
       donationForm.action = '⧼Centralnotice-B16_WMCH_translations-paymentslip-link⧽';
       $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', 'disabled' );
       donationForm.submit();
   });
   // Reset "other box" if they click a different amount
   $('#amount1, #amount2, #amount3, #amount4, #amount5').click(function() {
       $('#frb-amt-other-input').val();
   });
   $('.frb-close').click(function() {
       // Don't set a hide cookie here, as we expect them to always close this
       $("#frb").hide();
   });
   /* Close large banner when clicked outside */
   $('#frb-mask').on('click.bannerHide', function(e) {
       if ($(e.target).closest("#frb-window").length === 0) {
           $("#frb").hide();
           $(document).unbind('click.bannerHide');
       }
   });
   /* Hide banner outside of main namespace (and Main Page, for sites where that isn't in main namespace) */
   if ( mw.config.get('wgNamespaceNumber') > 0 && !mw.config.get('wgIsMainPage') ) {
       mw.centralNotice.bannerData.hideResult = true;
       mw.centralNotice.bannerData.hideReason = 'namespace';
   }
   if (!mw.centralNotice.bannerData.hideResult) {
       frb.showLargeBanner();
   }

}); </script>