MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad
<a href="https://itunes.apple.com/de/artist/christian-wolf/id903688769/"><img src="//hurraki.de/w/images/7/74/Leichte_Sprache_App_Apple_banner.jpg" title="Leichte Sprache App für iPhone und iPad" style="border: none; float: middle; width: 800px; height: 221px; margin-right: .8em; vertical-align: middle;" /></a>
<a href="#" title="Schließen" onclick="mw.centralNotice.hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="Schließen" /></a>
MediaWiki:CentralNotice/Resources/BannerShowHideCountDate.js
<style> /* Clearfix */
- frbanner .cf:before,
- frbanner .cf:after {
content: ""; display: table; }
- frbanner .cf:after { clear: both; }
.ie7 #frbanner .cf { zoom: 1; }
/* Border-Box */
- frbanner *,
- frbanner *:before,
- frbanner *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* Transitions */
- 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; }
- frbanner {
top: 0 !important; width: 100%; }
/* frbanner-window Styles
*/
- 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;}}
- 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;} }
- 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 --- */
- 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; } }
- frbanner-window .frbanner-message p { margin-bottom: .5em; }
- frbanner-window .frbanner-message p:last-child { margin-bottom: 0; }
- frbanner-window .frbanner-message strong {
font-family: "Helvetica Neue Bold",Arial, Helvetica, sans-serif; font-style: normal; font-weight: 600; }
- frbanner-window .frbanner-message .highlight { background: #fff000; font-weight: bold; }
- frbanner-window .frbanner-message .highlight span { position: relative; } /* prevent background from overlapping text */
/* --- Form --- */
- 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; } }
- 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; }
- frbanner-window li.frbanner-submit {
display: block; margin:0; }
/*-- Payment method buttons --*/
- 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%; }}
- 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; }
- frbanner-window .pm-paypal button,
- frbanner-window .pm-amazon button {
text-indent: -99999px; }
- frbanner-window .pm-ideal button { text-transform: none; }
- frbanner-window .pm-paypal button { background-image: url('//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg'); }
- frbanner-window .pm-amazon button { background-image: url('//upload.wikimedia.org/wikipedia/donate/e/e4/Amazon-color.svg'); }
/* -- Smallprint -- */
- frbanner-window #frbanner-smallprint {
width: 100%; font-size: 75%; padding: 5px 20px; background: #e2e2e2;
}
/* -- Bottom banner -- */
- frbanner2 {
width: 100%; position: fixed; left: 0; bottom: 0; cursor: pointer; text-align: center; z-index: 100;
}
- 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; }
- 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; }
- frbanner2:hover .frbanner2-tab { background: #ffdd00; }
- frbanner2 .frbanner2-tab img {
float: left; margin: .25em .15em 0 0; }
- frbanner2 p {
background: #ffcc00; padding: .7em; margin: 0; font-size: .8em; line-height: 1.1; color: #1c1c1c; text-align: center; }
- frbanner2:hover p { background: #ffdd00; }
- 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>