MediaWiki:Resources/TrilogySep2014.css

From Donate
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
<html>
<style>
#form-wrapper * {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

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


.donate {
  width: 25em;
  padding: 1em;
}

.donate-form-contained {
  border-bottom: 1px solid #5EAC58;
  padding-top: 1em;
  padding-bottom: 1em;
}

.dividing-line { display: none; }

#donor-infobox-block {
  border-bottom: none;
}


#donate-links-block {
  border: none;
  background-color: transparent;
  line-height: 1.3em;
  padding: 0 1em;
  padding-top: 1em;
  /*width: 27em;*/
}

input.button {
  font-size: 95%;
}

.form-info-links {
  list-style: none !important;
  margin-left: 0 !important;
}

#monthly-link {
  display: none;
}

#onetime-link {
  display: none;
}


#donate-form-wrapper {
  background-color: #e2e2e2;
  position: relative;
  padding: 1.6em;
}


#donate-form-wrapper:before {
  content: " ";
  width: 0;
  height: 0;
  position: absolute;
  left: 0%;
  top: 100px;
  border: solid transparent;
  border-color: rgba(246, 246, 246, 0);
  border-left-color: #f6f6f6;
  border-width: 15px;
  margin-top: -15px;
}


@media only screen and (max-width: 740px) {
  #donate-form-wrapper:before { display: none; }
}

/* --- Donation Amounts --- */

#radiobuttons-table { width: 100%; }

.radiobuttons-cell {
  width: 20%;
  text-align: center; }

@media only screen and (max-width: 740px) {
  .radiobuttons-cell {
    padding: 0 !important; }
}

.radiobuttons-cell input[type="radio"] {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  border: 0;
  clip: rect(0 0 0 0); }


.input_amount_0 label,
.input_amount_1 label,
.input_amount_2 label,
.input_amount_3 label,
.input_amount_4 label,
.input_amount_5 label,
.input_amount_6 label {
  background: #367fb4;
  display: block;
  padding: 2em 0;
  font: 1.2em/1 "Helvetica Neue Roman",Arial, Helvetica, sans-serif;
  font-weight: 300;
  -moz-border-radius:    .3em;
  -webkit-border-radius: .3em;
  border-radius:         .3em;
  color: #fff;
  cursor: pointer;
  outline: 0;
  backface-visibility: hidden; }

@media only screen and (max-width: 740px) {
.input_amount_0 label,
.input_amount_1 label,
.input_amount_2 label,
.input_amount_3 label,
.input_amount_4 label,
.input_amount_5 label,
.input_amount_6 label {
  padding: 1em 0; }
}

.input_amount_other {
  background: #367fb4;
  padding: 0 .7em;
  font-weight: 300;
  -moz-border-radius:    .3em;
  -webkit-border-radius: .3em;
  border-radius:         .3em;
  color: #fff;
  cursor: pointer; }
.input_amount_other input {
  background: #235375;
  width: 100%;
  font: 1.2em/1 "Helvetica Neue Roman",Arial, Helvetica, sans-serif;
  color: #fff;
  padding: .5em .5em .5em 1em;
  border: 0;
  cursor: pointer;
  outline: 0;
  -moz-border-radius:    .3em;
  -webkit-border-radius: .3em;
  border-radius:         .3em; }
.input_amount_other input:hover { background: #19415e; }
.input_amount_other input:focus {
  background: #fff;
  color: #19415e; }

.input_amount_other.checked input {
  background: #fff;
  color: #19415e; }
.input_amount_other.checked input:hover {
  background: #cbcbcb; }
.input_amount_other.checked input:focus {
  -moz-box-shadow:    inset 0 1px 3px rgba(0,0,0,.25);
  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
  box-shadow:         inset 0 1px 3px rgba(0,0,0,.25); }

.input_amount_other fieldset {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0; }


.input_amount_other fieldset label {
  position: absolute;
  left: .35em;
  top: .5em; }
.input_amount_other.checked fieldset label { color: #0f4062; }


.input_amount_other { line-height: 1 !important; }

@media only screen and (max-width: 740px) {
  .input_amount_other > label {
    line-height: 1;
    font-size: .55em;
    text-transform: uppercase; }
.input_amount_other fieldset {
    padding: 0 .3em; }
.input_amount_other input {
  font-size: .8em;
  padding: .3em .5em .3em 1em; }

.input_amount_other fieldset label {
  font-size: 1em;
  top: .16em; }

}



.radiobuttons-cell label:active,
.radiobuttons-cell input[type="radio"]:checked + label,
.input_amount_other.checked {
  background: #0f4b76;
  -moz-box-shadow:    inset 0 1px 3px rgba(0,0,0,.25);
  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
  box-shadow:         inset 0 1px 3px rgba(0,0,0,.25);
}
/* Fallback for IE8 and below */
.radiobuttons-cell label.checked,
.input_amount_other.checked {
  background: #0f4b76 !important;
}



#radiobuttons-table-header,
#paymenttype-table-header {
  display: block;
  margin-bottom: .7em;
  margin-top: 1.5em;
  text-align: center;
  font-size: .75em;
  text-transform: uppercase;
  font-weight: normal; }



.payment-method-button {
  background-color: #eaeaea;
  background-repeat: no-repeat;
  background-position: center center;
  -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;
  background-size: auto 65%;
  border: 1px solid #ddd;
  width: 100%;
  height: 3em;
  display: block;
  margin-bottom: .5em;
  line-height: 1;
  font-size: 1.4em;
  text-transform: uppercase;
  color: #367fb4;
  cursor: pointer;
  -moz-border-radius:    .3em;
  -webkit-border-radius: .3em;
  border-radius:         .3em;
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;  }

.payment-method-button:hover {
  background-color: #e1e1e1;
  -moz-box-shadow:    0 1px 6px rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.2), inset 0 25px 16px rgba(255,255,255,.75), inset 0 0 24px rgba(255,255,255,.6);
  -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.2), inset 0 25px 16px rgba(255,255,255,.75), inset 0 0 24px rgba(255,255,255,.6);
  box-shadow:         0 1px 6px rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.2), inset 0 25px 16px rgba(255,255,255,.75), inset 0 0 24px rgba(255,255,255,.6); }

.payment-method-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; }



/* This will be overridden for IE 8 and below */
.payment-method-div.paymentmethod-pp input,
.payment-method-div.paymentmethod-amazon input,
.payment-method-div.paymentmethod-bpay input {
  text-indent: -10000px;
  overflow: hidden;
}

.payment-method-div.paymentmethod-cc input {
  background-image: none;
}
.payment-method-div.paymentmethod-pp input {
  background-image: url('//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg');
}
.payment-method-div.paymentmethod-amazon input {
  background-image: url('//upload.wikimedia.org/wikipedia/donate/e/e4/Amazon-color.svg');
}
.payment-method-div.paymentmethod-bpay input {
  background-image: url('https://upload.wikimedia.org/wikipedia/donate/e/e3/BPAY_Landscape_MONO.gif');
}

/* Don't mess with iDEAL and its weird capitalisation */
.paymentmethod-ideal .payment-method-button {
    text-transform: none;
}


.frequency-options {
  margin: 1em 0;
}
.frequency-options label {
  background: #cacaca;
  width: 49%;
  float: left;
  padding: .4em;
  display: inline-block;
  -moz-border-radius:    .3em;
  -webkit-border-radius: .3em;
  border-radius:         .3em;
  font-size: 1.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

@media only screen and (max-width: 740px) {
  .frequency-options label {
    padding: .25em .4em .6em;
    display: block;
    font-size: .6em !important;
    line-height: 1; 
  }
}

.frequency-options label:hover {
  background: #afafaf; }
.frequency-options label:active {
  background: #d2d2d2;
  -moz-box-shadow:    inset 0 1px 3px rgba(0,0,0,.25);
  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
  box-shadow:         inset 0 1px 3px rgba(0,0,0,.25); }

.frequency-options label.checked {
  background: #afafaf;
  -moz-box-shadow:    inset 0 1px 3px rgba(0,0,0,.25);
  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
  box-shadow:         inset 0 1px 3px rgba(0,0,0,.25); }

.frequency-options label:first-child { margin-right: 2%; }



#infobox-wrapper {
  padding-top: 1em;
  width: 25em;
  line-height: 1.1;
  color: #707070;
  font-size: .9em;
}

#infobox-header {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: .7em;
    color: #367fb4;
}




#footer {
  margin: 0 !important; }

#donor-policy-block {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
  width: 100%;
  text-align: center;
  font-size: 0.75em;
  line-height: 1.1;
  padding: 1.8em 15% .7em; }
#donor-policy-block #cancel-monthly { margin-top: 1em; }

#donate-links-block {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
  width: 100%;
  padding: 1em 15% 0; }

.form-info-links {
  list-style: none;
  width: 100%;
  display: block;
  font-size: .8em;
  text-align: center; }
.form-info-links li {
  width: auto;
  display: inline-block;
  padding: 0 1em;
  margin: 0 auto; }

#footer-info {
  display: none;
}
#footer-icons {
  text-align: center !important;
  float: none !important; }
div#footer #footer-icons li {
  float: none !important;
  display: inline-block;
  text-align: center !important; }


/* -- Quote -- */
.quote {
  font-size: 0.9em;
}
.quote-byline {
  font-size: 0.9em;
}

@media screen and (max-width: 981px) {
  #appeal-body {
    padding-top: 0.2em;
  }
  #p-logo a {
    width: 120px;
    height: 120px;
    background-size: 80%;
  }
  div#content {
    padding-top: 0;
    margin-top: -1em;
  }

}
</style>

<!-- IE8 and below don't support SVG images or background-size. So need to show the text for these -->
<!--[if lte IE 8]>
<style>
.payment-method-div.paymentmethod-pp input,
.payment-method-div.paymentmethod-amazon input,
.payment-method-div.paymentmethod-bpay input {
  text-indent: 0;
}
</style>
<![endif]-->
</html>
Retrieved from "https://donate.wikimedia.org/w/index.php?title=MediaWiki:Resources/TrilogySep2014.css&oldid=26523"