MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad

Aus Hurraki - Wörterbuch für Leichte Sprache
Wechseln zu: Navigation, Suche

<a href="https://itunes.apple.com/de/artist/christian-wolf/id903688769/"></a> <a href="#" title="Schließen" onclick="mw.centralNotice.hideBanner();return false;">Schließen</a>



MediaWiki:CentralNotice/Resources/BannerShowHideCountDate.js

<style> /* Clearfix */

  1. frbanner .cf:before,
  2. frbanner .cf:after {
  content: "";
  display: table; }
  1. frbanner .cf:after { clear: both; }

.ie7 #frbanner .cf { zoom: 1; }


/* Border-Box */

  1. frbanner *,
  2. frbanner *:before,
  3. frbanner *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   }


/* Transitions */

  1. frbanner * {
   -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;
   }
  1. frbanner {
   top: 0 !important;
   width: 100%;
   }

/* frbanner-window Styles


*/
  1. frbanner-window {
   background: #fff;
   width: 90%;
   top: 20px !important;
   left: 5% !important;
   -moz-box-shadow:    0 0 10px rgba(90,97,98,.25);
   -webkit-box-shadow: 0 0 10px rgba(90,97,98,.25);
   box-shadow:         0 0 10px rgba(90,97,98,.25);
   position: absolute;
   }
   @media (min-width : 330px)                                { #frbanner-window { width: 90%; left: 5% !important; }}
   @media (min-width : 370px)                                { #frbanner-window { width: 92%; left: 4% !important;  }}
   @media (min-width : 570px) and (orientation : landscape)  { #frbanner-window { width: 94%; left: 3% !important; }}
   @media (min-width : 640px) and (orientation : landscape)  { #frbanner-window { width: 94%; left: 3% !important; }}
   @media (min-width : 650px) and (orientation : portrait)   { #frbanner-window { width: 60%; left: 20% !important; top: 40px !important;}}
   @media (min-width : 650px) and (orientation : landscape)  { #frbanner-window { width: 80%; left: 10% !important; top: 100px !important;}}
  1. frbanner-close {
   background: url('//upload.wikimedia.org/wikipedia/donate/c/cf/Close-trilogy.png') no-repeat center center;
   width: 20px;
   height: 21px;
   display: block;
   cursor: pointer;
   position: absolute;
   right: 10px;
   top: 10px;
   opacity: .6;
   text-indent: -99999px;
   z-index: 999;
   }
   @media (min-width : 370px) { #frbanner-close { width: 15px; height: 16px; background-size: 75%; right: 5px; top: 5px; } }
   @media (min-width : 570px) { #frbanner-close { width: 20px; height: 21px; background-size: 100%; right: 10px; top: 10px;} }


  1. frbanner-close:active {
   opacity: 1;
   }


/* --- Branding --- */

.frbanner-logo {

   width: 60%;
   margin: 0 20% 10px;
   text-align: center;
   }
   @media (min-width : 650px) { .frbanner-logo { margin-bottom: 20px; }}

.frbanner-logo img {

   width: 110px;
   opacity: .4;
   }
   @media (min-width : 330px) { .frbanner-logo img { width: 132px; }}
   @media (min-width : 370px) { .frbanner-logo img { width: 110px; }}
   @media (min-width : 490px) { .frbanner-logo img { width: 132px; }}


/* --- Message --- */

  1. frbanner-window .frbanner-message {
   text-align: left;
   padding: 15px;
   font: .8em/1.1em "Helvetica Neue Light",Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 200;
   color: #3c3c3c;
   }
   @media (min-width : 330px)                                { #frbanner-window .frbanner-message { padding: 20px; font-size: .95em; } }
   @media (min-width : 370px) and (orientation : landscape)  { #frbanner-window .frbanner-message { padding: 15px; width: 63%; float: left; font-size: .75em; line-height: 1.2em; } }
   @media (min-width : 570px) and (orientation : landscape)  { #frbanner-window .frbanner-message { padding: 20px; width: 65%; float: left; font-size: .9em; } }
   @media (min-width : 650px) and (orientation : portrait)   { #frbanner-window .frbanner-message { padding: 30px; font-size: 1.15em; line-height: 1.3em; } }
   @media (min-width : 650px) and (orientation : landscape)  { #frbanner-window .frbanner-message { padding: 30px; width: 66%; float: left; font-size: 1.2em; line-height: 1.3em; } }


  1. frbanner-window .frbanner-message p { margin-bottom: .5em; }
  1. frbanner-window .frbanner-message p:last-child { margin-bottom: 0; }
  1. frbanner-window .frbanner-message strong {
   font-family: "Helvetica Neue Bold",Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 600;
   }
  1. frbanner-window .frbanner-message .highlight { background: #fff000; font-weight: bold; }
  2. frbanner-window .frbanner-message .highlight span { position: relative; } /* prevent background from overlapping text */


/* --- Form --- */

  1. frbanner-form {
   background: #e2e2e2;
   padding: 10px 15px 10px;
   position: relative;
   }
   @media (min-width : 330px)                                { #frbanner-form { padding: 15px 20px 10px; } }
   @media (min-width : 370px) and (orientation : landscape)  { #frbanner-form { padding: 20px 15px 15px; width: 37%; float: right; height: 250px;  }}
   @media (min-width : 570px) and (orientation : landscape)  { #frbanner-form { padding: 30px 20px 20px; width: 35%; float: right; height: 290px; }}
   @media (min-width : 650px) and (orientation : portrait)   { #frbanner-form { padding: 30px; } }
   @media (min-width : 650px) and (orientation : landscape)  { #frbanner-form { padding: 30px; width: 34%; float: left; height: 435px; } }


  1. frbanner-form:before {
   height: 0;
   width: 0;
   margin-left: -10px;
   content: " ";
   position: absolute;
   left: 50%;
   top: 0;
   border-color: rgba(255, 255, 255, 0);
   border: solid transparent;
   pointer-events: none;
   border-top-color: white;
   border-width: 10px;
   }
   @media (min-width : 370px) and (orientation : landscape) {
       #frbanner-form:before  {
           border-left-color: white;
           left: 0;
           top: 50%;
           margin: 0;
           border-color: rgba(255, 255, 255, 0);
           border: solid transparent;
           pointer-events: none;
           border-left-color: white;
           border-width: 10px;
           }}

.frbanner-amounts, .frbanner-submit {

   width: 100%;
   overflow: auto;
   zoom: 1;
   margin: 0 auto;
   padding: 0;
   }

.frbanner-amounts { margin-bottom: 10px; }

   @media (min-width : 370px)  { .frbanner-amounts { margin-bottom: 12px; }}
   @media (min-width : 570px)  { .frbanner-amounts { margin-bottom: 15px; }}
   @media (min-width : 650px)  { .frbanner-amounts { margin-bottom: 30px;} }

.frbanner-amounts li, .frbanner-submit li {

   display: block;
   width: 32%;
   float: left;
   clear: none;
   margin: 0 2% 6px 0;
   }
   @media (min-width : 370px) and (orientation : landscape) { .frbanner-amounts li, .frbanner-submit li  { width: 48%; margin-right: 4%;} }
   @media (min-width : 650px)  {  .frbanner-amounts li, .frbanner-submit li { margin-bottom: 10px; } }


.frbanner-amounts li:last-child, .frbanner-submit li:last-child { margin-right: 0; }

   @media (orientation : portrait)   { .frbanner-amounts li#amount_total_3, .frbanner-amounts li#amount_total_6  { margin-right: 0; }}
   @media (orientation : landscape)  { .frbanner-amounts li#amount_total_2, .frbanner-amounts li#amount_total_4  { margin-right: 0; }}


.frbanner-submit li, .frbanner-amounts li#amount_total_5, .frbanner-amounts li#amount_total_6 {

   margin-bottom: 0;
   }
   @media (orientation : portrait)   { .frbanner-amounts li#amount_total_4  { margin-bottom: 0; }}
   @media (min-width : 650px)        { .frbanner-submit .pm-credit-card { margin-bottom: 10px; } }

.frbanner-submit li { width: 48%; margin-right: 4%;}

/* Stack in landscape */ @media (orientation : landscape) {

   .frbanner-submit .pm-credit-card,
   .frbanner-submit .pm-paypal { 
       margin-bottom: 6px; margin-right: 0; width: 100%;
   }

}

li.subhead {

   width: 100%;
   margin: 0;
   text-align: center;
   font-size: 11px;
   text-transform: uppercase;
   color: #7c7c7c;
   }
   @media (min-width : 330px) { li.subhead { font-size: 12px; }}
   @media (min-width : 370px) { li.subhead { font-size: 11px; }}
   @media (min-width : 570px) { li.subhead { font-size: 12px; }}
   @media (min-width : 650px) { li.subhead { font-size: 15px; margin-bottom: 5px; } }

.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 {

   display: block;
   width: 100%;
   height: 32px;
   padding: 5px;
   font: 1.2em/22px "Helvetica Neue Roman", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 300;
   text-align: center;
   background: #367fb4;
   border:none;
   -moz-border-radius:    4px;
   -webkit-border-radius: 4px;
   border-radius:         4px;
   color: #fff;
   cursor: pointer;
   outline: 0;
   backface-visibility: hidden;
   }
   @media (min-width : 330px) { .frbanner-amounts li label { height: 40px; font-size: 1.3em; line-height: 30px; }}
   @media (min-width : 370px) { .frbanner-amounts li label { height: 28px; font-size: 1em; line-height: 18px; }}
   @media (min-width : 570px) { .frbanner-amounts li label { height: 28px; font-size: 1em; line-height: 18px; }}
   @media (min-width : 650px) { .frbanner-amounts li label { height: 50px; font-size: 1.4em; line-height: 40px; }}

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

   background: #0f4b76;
   }
  1. frbanner-window li.frbanner-submit {
   display: block;
   margin:0;
   }

/*-- Payment method buttons --*/

  1. frbanner-window button {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 80%;
   background-color: #e7e7e7;
   border: none;
   width: 100%;
   height: 40px;
   padding: 5px;
   line-height: 1;
   font-size: .9em;
   text-transform: uppercase;
   color: #367fb4;
   cursor: pointer;
   -moz-border-radius:    4px;
   -webkit-border-radius: 4px;
   border-radius:         4px;
   -moz-box-shadow: 0 0 2px rgba(0,0,0,.2), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
   -webkit-box-shadow: 0 0 2px rgba(0,0,0,.2), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
   box-shadow: 0 0 2px rgba(0,0,0,.2), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
   }
   @media (min-width : 330px) { #frbanner-window button { height: 50px; font-size: 1em; line-height: 1; }}
   @media (min-width : 370px) { #frbanner-window button { height: 30px; font-size: 1em; line-height: 1; }}
   @media (min-width : 570px) { #frbanner-window button { height: 40px; font-size: 1em; line-height: 30px; }}
   @media (min-width : 650px) { #frbanner-window button { height: 60px; font-size: 1.1em; line-height: 1; background-size: 60%; }}
  1. frbanner-window button:active {
   background-color: #f9f9f9;
   -moz-box-shadow:    0 0 2px rgba(0,0,0,.2), inset 1px 1px 3px rgba(0,0,0,.3), inset 0 0 7px #fff;
   -webkit-box-shadow: 0 0 2px rgba(0,0,0,.2), inset 1px 1px 3px rgba(0,0,0,.3), inset 0 0 7px #fff;
   box-shadow:         0 0 2px rgba(0,0,0,.2), inset 1px 1px 3px rgba(0,0,0,.3), inset 0 0 7px #fff;
   }
  1. frbanner-window .pm-paypal button,
  2. frbanner-window .pm-amazon button {
   text-indent: -99999px;
   }
  1. frbanner-window .pm-ideal button { text-transform: none; }
  1. frbanner-window .pm-paypal button { background-image: url('//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg'); }
  2. frbanner-window .pm-amazon button { background-image: url('//upload.wikimedia.org/wikipedia/donate/e/e4/Amazon-color.svg'); }

/* -- Smallprint -- */

  1. frbanner-window #frbanner-smallprint {
   width: 100%;
   font-size: 75%;
   padding: 5px 20px;
   background: #e2e2e2;

}

/* -- Bottom banner -- */

  1. frbanner2 {
 width: 100%;
 position: fixed;
 left: 0;
 bottom: 0;
 cursor: pointer; 
 text-align: center;
 z-index: 100;

}

  1. frbanner2 * {
 -webkit-transition: all .3s ease-in-out;
 -moz-transition:    all .3s ease-in-out;
 -o-transition:      all .3s ease-in-out;
 -ms-transition:     all .3s ease-in-out;
 transition:         all .3s ease-in-out; }
 
  1. frbanner2 .frbanner2-tab {
 background: #ffcc00;
 width: 180px;
 margin: 0 auto;
 padding: .3em .8em 0 .8em;
 display: block;
 position: relative;
 top: .3em;
 -moz-border-radius:    4px 4px 0 0;
 -webkit-border-radius: 4px 4px 0 0;
 border-radius:         4px 4px 0 0;
 font-size: .9em;
 color: #1c1c1c;
 font-weight: bold;
 cursor: pointer; }
  1. frbanner2:hover .frbanner2-tab { background: #ffdd00; }
  2. frbanner2 .frbanner2-tab img {
 float: left;
 margin: .25em .15em 0 0; }
  1. frbanner2 p {
 background: #ffcc00;
 padding: .7em;
 margin: 0;
 font-size: .8em;
 line-height: 1.1;
 color: #1c1c1c;
 text-align: center; }
  1. frbanner2:hover p { background: #ffdd00; }
  1. frbanner2-close {
   background: url('//upload.wikimedia.org/wikipedia/donate/c/cf/Close-trilogy.png') no-repeat center center;
   width: 1em;
   height: 1em;
   background-size: contain;
   float: right;
   display: block;
   cursor: pointer;
   text-indent: -99999px;
   z-index: 999;
   margin-left: 0.5em;

} </style>


MediaWiki:FR2013/Resources/Country2Currency.js MediaWiki:FR2013/Resources/MobileBanner.js

<script> $(document).ready(function() {

   $("#frbanner-close").click(function() {
       $("#frbanner").hide();
   });
   $("#frbanner2").click(function() {
       window.scrollTo(0,0);
       $("#frbanner").show();
       $("#frbanner2").slideToggle();
   });
   $("#frbanner2-close").click(function() {
       mw.centralNotice.hideBanner();
   });
   if (!mw.centralNotice.bannerData.hideResult) {
       // Show the correct sub-banner
       if (mw.centralNotice.bannerData.cookieCount === 1) {
           $('#frbanner').show();
       } else if (mw.centralNotice.bannerData.cookieCount > 1) {
           $('#frbanner2').show();
       }
   }

}); </script>