Hurraki - Wörterbuch für Leichte Sprache

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

Systemnachricht Diskussion

MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad (Quelltext anzeigen)

Version vom 10. September 2018, 16:29 Uhr

3.779 Bytes hinzugefügt ,  10. September 2018
keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 43: Zeile 43:


#WMDE_BannerForm-wrapper {
#WMDE_BannerForm-wrapper {
     background-color: #ffffff;
     height: 238px;
    padding: 0 10px;
}
  }


#WMDE_Banner-form fieldset {
#WMDE_Banner-form fieldset {
Zeile 78: Zeile 77:


.WMDE_Banner-btn {
.WMDE_Banner-btn {
     background: #f8f9fa;
     background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%) repeat scroll 0 0;
     border: 1px solid #9aa0a7;
     border: 1px solid #ddd;
     border-radius: 2px;
     border-radius: 4px;
     padding: 11px 0;
     padding: 11px 0;
     width: 100%;
     width: 100%;
     cursor: pointer;
     cursor: pointer;
     display: inline-block;
     display: inline-block;
    font-weight: bold;
     margin: 0 1px;
     margin: 0 1px;
     text-align: center;
     text-align: center;
    font-weight: bold;
}
}


.WMDE_Banner-btn:hover {
.WMDE_Banner-btn:hover {
     background-color: #ffffff;
     background-color: #fff;
     color: #444444;
     box-shadow: 0 0 2px rgba(0,0,0,.5), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
     border-color: #a2a9b1;
     color: #367fb4;
}
}


.WMDE_Banner-btn.checked {
.WMDE_Banner-btn.checked {
     background: #2a4b8d;
     background: linear-gradient(to top, #ccc 0%, #aaa 100%) !important;
     border-color: #7d8389;
     border-color: #ccc;
     color: #ffffff;
}
 
.WMDE_Banner-btn:active {
     box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
}


#WMDE_Banner-payment .btn-payment-type {
#WMDE_Banner-payment .btn-payment-type {
     background: #f8f9fa;
     background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #eee 0%, #ccc 100%) repeat scroll 0 0 !important;
     font-size: 0.9em;
     border-color: #CCC !important;
    color: #3366cc;
}
}


Zeile 112: Zeile 113:
#WMDE_Banner-frequency li {
#WMDE_Banner-frequency li {
     display: table-cell;
     display: table-cell;
     width: 33%;
     width: 50%;
     padding: 0 2% 0 0;
     padding: 0 2% 0 0;
     vertical-align: top;
     vertical-align: top;
Zeile 162: Zeile 163:
     padding: 0 2% 0 0;
     padding: 0 2% 0 0;
     vertical-align: top;
     vertical-align: top;
    font-weight: bold;
}
}
body.rtl #WMDE_Banner-amounts li {
body.rtl #WMDE_Banner-amounts li {
Zeile 212: Zeile 212:


#amount_custom input {
#amount_custom input {
     width: 85%;
     width: 80%;
     font-size: .9em;
     font-size: .9em;
     padding: 11px .4em;
     padding: .3em;
     text-align: center;
     text-align: center;
    border: 1px solid #9aa0a7;
    margin: 0 1px;
}
}


#amount_custom .checked input {
#amount_custom .checked input {
     background: #2a4b8d;
     background: #fff;
     color: #ffffff;
     color: #163348;
}
}


#amount_custom input:hover {
#amount-other-input {
     box-shadow: 0 0 0 1px #3366cc inset;
     margin-top: .6em;
    background-color: #ffffff;
    color: #444444;
    border-color: #a2a9b1;
}
}


/* --- Payment method Buttons --- */
/* --- Payment method Buttons --- */
#WMDE_Banner-payment {
    padding-bottom: 0.25em;
}


#WMDE_Banner-payment ul li {
#WMDE_Banner-payment ul li {
Zeile 248: Zeile 239:
     padding: 0 0 0 2%;
     padding: 0 0 0 2%;
}
}
/*#WMDE_Banner-payment .WMDE_Banner-btn {
    min-height: 4em;
}*/


#WMDE_Banner-window button {
#WMDE_Banner-window button {
Zeile 273: Zeile 268:
     width: 100%;
     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 label:hover {
    text-decoration: underline;
}
div.interval_tab_first {
    margin-left: -1px;
    border-right: 1px solid #c2cedb;
}
}


Zeile 284: Zeile 304:
     background-color: #ffdd5b;
     background-color: #ffdd5b;
     color: #000000;
     color: #000000;
}
/* --- more info for recurring donations --- */
#interval_tab_multiple {
    position: relative;
    margin-right:-1px; /* Fixes strange, probably border-being-a-half-pixel-wide related break on zoom level 0.9 */
}
#interval-multiple-moreinfo-link {
    position:absolute;
    right: 10px;
    top: 5px;
}
#donationperiodInfo {
    width:520px;
    margin-top:-5px;
}
#donationperiodInfo .checks {
    list-style: url('//upload.wikimedia.org/wikipedia/commons/2/21/Green_valid_check_icon.png');
    line-height:135%;
}
}


Zeile 290: Zeile 333:
#WMDE_Banner #donationMeterWrapper {
#WMDE_Banner #donationMeterWrapper {
     margin: 0 10px 10px 35px;
     margin: 0 10px 10px 35px;
}
#WMDE_Banner-close {
    background-image: url('//upload.wikimedia.org/wikipedia/commons/c/cb/Close_x_-_black.png');
    background-color: transparent;
    background-size: 12px auto;
}
}


Zeile 386: Zeile 423:


           <td id="WMDE_BannerForm-wrapper">
           <td id="WMDE_BannerForm-wrapper">
            <div id="interval_tab_onetime" class="interval_tab interval_tab_first active">
              <label for="interval_onetime">
                <input type="radio" style="display: none" id="interval_onetime" name="interval_tab" value="0">
                einmalig
              </label>
            </div>
            <div id="interval_tab_multiple" class="interval_tab">
              <label for="interval_multiple">
                <input type="radio" style="display: none" id="interval_multiple" name="interval_tab" value="1">
                regelmäßig
              </label>
              <span class="icon-question" id="interval-multiple-moreinfo-link" data-href="#donationperiodInfo"></span>
            </div>
             <fieldset id="WMDE_Banner-frequency" class="cf">
             <fieldset id="WMDE_Banner-frequency" class="cf">
               <div style="padding-top: 0.5em;" class="interval-options">
               <div style="padding-top: 1em;" class="interval-options interval-hidden">
                 <ul>
                 <ul>
                   <li>
                   <li>
                     <input type="radio" id="interval_multiple" />
                     <label class="WMDE_Banner-btn donation-interval" for="interval1">
                     <label class="WMDE_Banner-btn donation-frequency" for="interval_onetime">
                      <input type="radio" id="interval1" name="interval" value="1">
                       <input type="radio" id="interval_onetime">
                      monatlich
                       einmalig
                    </label>
                  </li>
                  <li>
                     <label class="WMDE_Banner-btn donation-interval" for="interval3">
                       <input type="radio" id="interval3" name="interval" value="3">
                       vierteljährlich
                     </label>
                     </label>
                   </li>
                   </li>
                </ul>
                <ul>
                   <li>
                   <li>
                     <label class="WMDE_Banner-btn donation-interval" for="interval1">
                     <label class="WMDE_Banner-btn donation-interval" for="interval6">
                       <input type="radio" id="interval1" name="interval" value="1">
                       <input type="radio" id="interval6" name="interval" value="6">
                       monatlich
                       halbjährlich
                     </label>
                     </label>
                   </li>
                   </li>
Zeile 451: Zeile 508:


                 <li id="amount_custom">
                 <li id="amount_custom">
                   <input type="text" name="amountGiven" id="amount-other-input" size="3" autocomplete="off" value="" placeholder="anderer">
                   <div class="WMDE_Banner-btn" style="padding: 0 0 0.5em 0; height: initial;">
                    <input type="radio" name="betrag" id="input_amount_other" value="">
                    <!--<label for="amount-other-input"></label>-->
                    <input type="text" name="amountGiven" id="amount-other-input" size="3" autocomplete="off" value="" placeholder="anderer">
                  </div>
                 </li>
                 </li>
               </ul>
               </ul>
Zeile 485: Zeile 546:
               </ul>
               </ul>
             </fieldset>
             </fieldset>
            <span id="WMDE_Banner-close" style="position: absolute; right: 0;">&nbsp;</span>
          </td>
 
          <td id="WMDE_Banner-close-wrapper">
            <span id="WMDE_Banner-close">&nbsp;</span>
           </td>
           </td>


Zeile 545: Zeile 609:


<script type="text/javascript">
<script type="text/javascript">
   $( '#interval_onetime' ).off( 'click' ).on( 'click', function () {
   $( document ).ready( function () {
      $( '#interval_multiple' ).prop( 'checked', false );
    $( '#interval_tab_onetime' ).click( function () {
      $( '.donation-interval' ).removeClass( 'checked' );
      if ( $( '#interval_tab_onetime' ).hasClass( 'active' ) ) {
        return;
      }
 
      $( '#interval_tab_onetime' ).addClass( 'active' );
      $( '#interval_tab_multiple' ).removeClass( 'active' );
      $( '.interval-options').addClass( 'interval-hidden' );
      $( '' );
 
      addSpaceInstantly();
      calculateLightboxPosition();
    } );
 
    $( '#interval_tab_multiple' ).click( function ( e ) {
      if ( $( e.target ).prop( 'id' ) == 'interval-multiple-moreinfo-link' ) {
        return;
      }
      if ( $( '#interval_tab_multiple' ).hasClass( 'active' ) ) {
        return;
      }
 
      $( '#interval_tab_multiple' ).addClass( 'active' );
      $( '#interval_tab_onetime' ).removeClass( 'active' );
 
      $( '.interval-options').removeClass( 'interval-hidden' );
      addSpaceInstantly();
      calculateLightboxPosition();
    } );
 
   } );
   } );


Zeile 554: Zeile 646:
     $( this ).addClass( 'checked' );
     $( this ).addClass( 'checked' );
   } );
   } );
  $( '.donation-interval' ).click( function () {
    $( '.donation-interval' ).removeClass( 'checked' );
    $( this ).addClass( 'checked' );
    $( '.donation-frequency' ).removeClass( 'checked' );
    $( '#interval_onetime' ).prop( 'checked', false );
    $( '#interval_multiple' ).prop( 'checked', 'checked' );
  });


   $( '#WMDE_Banner-amounts' ).find( 'label' ).click( function () {
   $( '#WMDE_Banner-amounts' ).find( 'label' ).click( function () {
Zeile 669: Zeile 753:
     } );
     } );


     $( '#interval_onetime' ).off( 'click' ) // remove handler from common-banner.js
     $( '#interval-multiple-moreinfo-link' ).wlightbox( { container: $( '#mw-page-base' ), right: '20px' } );
      .on( 'click', function () {
    $( '#interval-multiple-moreinfo-link' ).click( function ( e ) {
        $( '#interval_multiple' ).prop( 'checked', false );
        if ( lightboxOpened ) {
        $(".donation-interval").removeClass("checked");
          // We need to wait for 320 seconds because this click will also trigger the opening of the lightbox again.
          window.setTimeout( function() {
              $( '#interval-multiple-moreinfo-link' ).get(0).close();
              lightboxOpened = false;
          }, 320 );
          return;
        }
        lightboxOpened = true;
        // scroll to top
        $( 'html, body' ).animate( { scrollTop: 0 }, 'slow' );
        // track link clicking
        $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/period-lightbox-opened/{{{BannerName}}}&rec=1' );
        // close lightbox if any form element is clicked
        $( '#WMDE_BannerForm-wrapper' ).on( 'click', function ( e ) {
          if ( $( e.target ).prop( 'id' ) == 'interval-multiple-moreinfo-link' ) {
            return;
          }
          lightboxOpened = false;
          $( this ).off();
          $( '#interval-multiple-moreinfo-link' ).get(0).close();
        } );
     } );
     } );
 
 
     var impCount = increaseImpCount();
     var impCount = increaseImpCount();
     $( '#impCount' ).val( impCount );
     $( '#impCount' ).val( impCount );
Admin
Bürokraten, Administratoren
5.659

Bearbeitungen

Abgerufen von „https://hurraki.de/wiki/Spezial:Mobiler_Unterschied/31260“