MediaWiki:Resources/TrilogySep2014.css: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
add image for BPAY
rm transitions
 
(2 intermediate revisions by the same user not shown)
Line 5: Line 5:
-webkit-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out; }


.cf:before,
.cf:before,
Line 285: Line 281:
/* This will be overridden for IE 8 and below */
/* This will be overridden for IE 8 and below */
.payment-method-div.paymentmethod-pp input,
.payment-method-div.paymentmethod-pp input,
.payment-method-div.paymentmethod-amazon input {
.payment-method-div.paymentmethod-amazon input,
.payment-method-div.paymentmethod-bpay input {
text-indent: -10000px;
text-indent: -10000px;
overflow: hidden;
overflow: hidden;
Line 446: Line 443:
<style>
<style>
.payment-method-div.paymentmethod-pp input,
.payment-method-div.paymentmethod-pp input,
.payment-method-div.paymentmethod-amazon input {
.payment-method-div.paymentmethod-amazon input,
.payment-method-div.paymentmethod-bpay input {
text-indent: 0;
text-indent: 0;
}
}

Latest revision as of 02:37, 2 December 2014

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