MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad
<style type="text/css">MediaWiki:WMDE FR2015/Resources/DesktopBanner.css</style> <style type="text/css">MediaWiki:WMDE FR2015/Resources/ProgressBar.css</style> <script type="text/javascript">MediaWiki:WMDE FR2015/Resources/BannerValues.js</script> <script type="text/javascript">MediaWiki:WMDE FR2015/Resources/DesktopBanner.js </script> <script type="text/javascript">MediaWiki:WMDE FR2015/Resources/CountCampaignDays.js </script> <script type="text/javascript">MediaWiki:WMDE FR2015/Resources/AnimateHighlight.js</script> <script type="text/javascript">MediaWiki:WMDE FR2015/Resources/CustomDayName.js</script> <style type="text/css">
/* Different colors */ #WMDE_Banner-facts { background-color:#000; background-image: url('//upload.wikimedia.org/wikipedia/commons/e/e6/Information-icon-ffe238.png'); }
#WMDE_Banner-message-wrapper { color:#fff; } #donationText { color:#000; display: none; }
#donationFill { background: #ffe238; }
#donationMeter { background: #000; border: solid 2px #ffe238; }
#donationMeterTip { background: #ffe238 url('//upload.wikimedia.org/wikipedia/commons/8/8b/Pbar-tip-small-transparent-black.png') no-repeat; }
#WMDE_Banner span.btext-highlight { background: #ffe238; color: #000; }
#WMDE_Banner-text { color: #fff; }
#daysLeft { color:#000; }
#WMDE_Banner-text-salute { color: #fff; font-size: 17px; font-weight: bold; line-height: 1.2em; margin: 4px 10px 4px 35px; text-align: justify; }
#WMDE_BannerForm-wrapper { background: #f2f4ff; }
#WMDE_Banner_info { border-top: 1px solid #998200; color: #D3D3D3; }
#WMDE_Banner_info span.binfo-ucase, #WMDE_Banner_info span.binfo-bold { color:#fff; }
/* END different colors */
#WMDE_Banner-text-salute { margin-bottom: 0; padding-bottom: 0; }
#donationMeterCell { padding: 9px 20px 9px 25px; }
- WMDE_Banner-form fieldset {
width: 95%; border: 0; margin: 0 auto; padding: 0 0.5em 0.5em 0.5em;
}
- WMDE_Banner-frequency ul,
- WMDE_Banner-amounts ul,
- WMDE_Banner-payment ul {
width: 100%; height: 100%; display: table; margin: 0 0 0.3em; padding: 0; list-style: none;
}
- WMDE_Banner-form legend {
display: none; width: 100%; margin: 0; padding: 0 0 0.3em 0; text-align: center; font-size: .9em; color: rgba(0,0,0,0.42);
}
/* --- Common Button Styles --- */
.WMDE_Banner-btn {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%) repeat scroll 0 0; border: 1px solid #ddd; border-radius: 4px; padding: 11px 0; width: 100%; cursor: pointer; display: inline-block; font-weight: bold; margin: 0 1px; text-align: center;
}
.WMDE_Banner-btn:hover {
background-color: #fff; box-shadow: 0 0 2px rgba(0,0,0,.5), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff; color: #367fb4;
}
.WMDE_Banner-btn.checked {
background: linear-gradient(to top, #eee 0%, #ccc 100%) !important; border-color: #ccc;
}
.WMDE_Banner-btn:active {
box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
- WMDE_Banner-payment .btn-payment-type {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #eee 0%, #ccc 100%) repeat scroll 0 0 !important; border-color: #CCC !important;
}
/* --- Frequency Buttons --- */
- WMDE_Banner-frequency li {
display: table-cell; width: 50%; padding: 0 2% 0 0; vertical-align: top;
} body.rtl #WMDE_Banner-frequency li { padding: 0 0 0 2%; }
- WMDE_Banner-frequency label {
width: 100%; display: block; font-size: .9em;
}
/*@media (min-width : 1100px) { #WMDE_Banner-frequency label { font-size: .95em; } }*/ @media (min-width : 1200px) {
/*#WMDE_Banner-frequency label { font-size: 1em; }*/ /*#WMDE_Banner-payment .WMDE_Banner-btn { min-height: 2em !important; } .WMDE_Banner-btn { padding: 4px 0; }*/
}
- WMDE_Banner-frequency input[type="radio"] {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
/* --- Amount Buttons --- */
- WMDE_Banner-amounts legend {
display: block;
}
- WMDE_Banner-amounts li {
display: table-cell; width: 23%; height: 100%; clear: none; padding: 0 2% 0 0; vertical-align: top;
} body.rtl #WMDE_Banner-amounts li {
padding: 0 0 0 2%;
}
/* Chrome specific - need to be floated for height 100% to work */ @media screen and (-webkit-min-device-pixel-ratio:0) {
#WMDE_Banner-amounts li { float: left; } body.rtl #WMDE_Banner-amounts li { float: right; }
}
- WMDE_Banner-amounts li input[type="radio"] {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
- WMDE_Banner-amounts label {
font-size: .9em; text-transform: none;
}
/*@media (min-width : 800px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1em; } } @media (min-width : 1100px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1.1em; } }*/
/* --- Other Amount --- */
- amount_custom .WMDE_Banner-btn {
display: inline-block; height: 100%; width: 100%; padding: 0.2em 0 0.4em 0;
}
- amount_custom label {
display: block; height: auto; margin-bottom: 0.2em; font-size: .7em; line-height: 1; cursor: pointer;
}
- amount_custom input {
width: 80%; font-size: .9em; padding: .3em; text-align: center;
}
- amount_custom .checked input {
background: #fff; color: #163348;
}
- amount-other-input {
margin-top: .6em;
}
/* --- Payment method Buttons --- */
- WMDE_Banner-payment ul li {
display: table-cell; padding: 0 2% 0 0; vertical-align: top; width: 50%; margin-bottom: 4px;
} body.rtl #WMDE_Banner-payment ul li {
padding: 0 0 0 2%;
}
/*#WMDE_Banner-payment .WMDE_Banner-btn {
min-height: 4em;
}*/
- WMDE_Banner-window button {
width: 100%; height: 100%; font-size: .9em; float: none; font-family: inherit;
}
@media all and (min-width: 1px) and (max-width: 900px), all and (min-width: 1050px) and (max-width: 1200px) {
#WMDE_Banner-payment .btn-payment-type { min-height: 4em; }
}
@media all and (min-width: 1px) and (max-width: 1050px) {
#WMDE_Banner-payment ul { margin: 0; width: 100%; }
#WMDE_Banner-payment ul li { display: block; width: 100%; }
}
div.interval_tab {
padding: 4px 0 2px 0 !important; height: 2em; text-align: center; width: 50%; border: none; border-bottom: 1px solid #c2cedb; background: linear-gradient(to bottom, rgba(238,240,252,1) 60%,rgba(194,206,219,0.5) 100%); float: left; cursor: pointer;
}
div.interval_tab, div.interval_tab label {
cursor: pointer;
}
div.interval_tab:hover {
text-decoration: underline;
}
div.interval_tab_first {
margin-left: -1px; border-right: 1px solid #c2cedb;
}
- WMDE_Banner div.active {
text-decoration: underline; border-bottom: none; background: transparent;
}
- WMDE_Banner .highlight {
background-color: #ffe238; color: #000;
}
</style>
<form id="WMDE_Banner-form" method="post" name="donationForm" action="https://spenden.wikimedia.de/spenden/?page={{{landing-page}}}&skin={{{page-skin}}}&piwik_campaign={{{CampaignName}}}&piwik_kwd={{{BannerName}}}"><tbody> </tbody>
<tbody>
</tbody>
|
<label for="interval_onetime"> <input type="radio" style="display: none" id="interval_onetime" name="interval_tab" value="0"> einmalig </label> <label for="interval_multiple"> <input type="radio" style="display: none" id="interval_multiple" name="interval_tab" value="1"> regelmäßig </label> <fieldset id="WMDE_Banner-frequency" class="cf"> </fieldset> <fieldset id="WMDE_Banner-amounts" class="cf">
</fieldset> <fieldset id="WMDE_Banner-payment" class="cf">
</fieldset> |
|
<input type="hidden" id="periode" name="periode" value="0"/> <input type="hidden" id="intervalType" name="intervalType" value="0"/> <input type="hidden" id="form-page" name="form" value="{{{form-name}}}"/> <input type="hidden" id="wikilogin" name="wikilogin" value="no"/> <input type="hidden" id="impCount" name="impCount" value=""/> <input type="hidden" id="bImpCount" name="bImpCount" value=""/> <input type="hidden" id="zahlweise" name="zahlweise" value=""/> </form>
<img id="WMDE_Banner-close-ct" src="//upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" height="0" width="0">
<script type="text/javascript">
$( document ).ready( function () { $( '#interval_tab_onetime' ).click( function () { if ( $( '#interval_tab_onetime' ).hasClass( 'active' ) ) { return; }
$( '#interval_tab_onetime' ).addClass( 'active' ); $( '#interval_tab_multiple' ).removeClass( 'active' ); $( '.interval-options').addClass( 'interval-hidden' ); $( );
addSpaceInstantly(); } );
$( '#interval_tab_multiple' ).click( function () { if ( $( '#interval_tab_multiple' ).hasClass( 'active' ) ) { return; }
$( '#interval_tab_multiple' ).addClass( 'active' ); $( '#interval_tab_onetime' ).removeClass( 'active' );
$( '.interval-options').removeClass( 'interval-hidden' ); addSpaceInstantly(); } ); } );
$( '#WMDE_Banner-frequency' ).find( 'label' ).click( function () { $( '#WMDE_Banner-frequency' ).find( 'label' ).removeClass( 'checked' ); $( this ).addClass( 'checked' ); } );
$( '#WMDE_Banner-amounts' ).find( 'label' ).click( function () { $( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' ); $( '#amount-other-input' ).parent().removeClass( 'checked' ); $( this ).addClass( 'checked' ); } );
$( '#amount-other-input' ).click( function () { $( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' ); $( this ).parent().addClass( 'checked' ); } );
function addSpace() { if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) { return; } var bannerHeight = $( 'div#WMDE_Banner' ).height(), skin = getSkin();
switch ( skin ) { case 'vector': $( '#mw-panel' ).animate( {'top':bannerHeight + 160},1000 ); $( '#mw-head' ).animate( {'top':bannerHeight},1000 ); $( '#mw-page-base' ).animate( {'padding-top':bannerHeight},1000); case 'minerva': $( '#mw-mf-viewport' ).animate( {'top':bannerHeight},1000 ); break; } }
function addSpaceInstantly() { if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) { return; } var bannerHeight = $( 'div#WMDE_Banner' ).height(), skin = getSkin();
switch ( skin ) { case 'vector': $( '#mw-panel' ).css( { top: bannerHeight + 160 } ); $( '#mw-head' ).css( { top: bannerHeight } ); $( '#mw-page-base' ).css( { paddingTop: bannerHeight } ); case 'minerva': $( '#mw-mf-viewport' ).css( { top: bannerHeight } ); break; } }
function displayBanner() { if ( !showBanner ) { return; } var bannerElement = $( '#WMDE_Banner' ), bannerHeight = bannerElement.height(); $( 'body' ).prepend( $( '#centralNotice' ) ); bannerElement.css( 'top', -bannerHeight ); bannerElement.css( 'display', 'block' ); addSpace(); bannerElement.animate( { top: 0 }, 1000 ); setTimeout( animateProgressBar, 1000 );
window.setTimeout( function () { animateHighlight( $( '#banner-text-highlight' ), 'highlight', 10 ); }, 4500 );
$( window ).resize( function () { addSpaceInstantly(); setProgressBarSize(); } ); }
function addMiniBanner() { /* add the "nag" bar. Has to be done after we show the main banner (to get its height) */ var bigBannerHeight = $('#WMDE_Banner').height();
$(window).scroll(function() { if ($(window).scrollTop() <= bigBannerHeight) { $('#WMDE_Banner-nag').finish(); $('#WMDE_Banner-nag').css('display', 'none'); } else { $('#WMDE_Banner-nag').delay(1500).slideDown(); } });
$('#WMDE_Banner-nag-close').click(function(event) { $('#WMDE_Banner-nag').remove(); event.stopPropagation(); });
$('#WMDE_Banner-nag').click(function() { window.scrollTo(0,0); }); }
$( document ).ready( function() { $( '#WMDE_Banner-payment button' ).click( function( e ) { return validateForm(); } );
var impCount = increaseImpCount(); $( '#impCount' ).val( impCount ); var bannerImpCount = increaseBannerImpCount( "{{{banner}}}" ); $( '#bImpCount' ).val( bannerImpCount );
if ( mw.config.get( 'wgAction' ) === "view" ) { setTimeout( displayBanner, 7500 ); } if ( mw.config.get( 'wgUserName' ) !== null ) { $( '#wikilogin' ).val( 'yes' ); }
$( 'span#numDaysLeft' ).text( getDaysRemaining() ); $( 'span#weekday' ).text( getCurrentDayName( getCurrentGermanDay ) ); if ( getCurrentDayName( getCurrentGermanDay ) !== getCurrentGermanDay() ) { $( '#weekdayPrepPhrase' ).text( 'am heutigen' ); } $( 'span#campaignDay' ).text( getCampaignDayString() ); $( 'span#donorsValue' ).html( addPointsToNum( Math.floor( getApprDonatorsRaw() ) ) );
} );
</script>