Donate

MediaWiki:Resources/TrilogySep2014.css: Difference between revisions

Browse history interactively
← Older edit
Content deleted Content added
reduce font-size of frequency options
rm transitions
 
(16 intermediate revisions by the same user not shown)
Line 2:
<style>
#form-wrapper * {
-moz-box-sizing: border-box;
-webkit-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:after {
Line 72 ⟶ 68:
 
#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; }
}
Line 94 ⟶ 90:
#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;
Line 121 ⟶ 117:
.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;
Line 133 ⟶ 129:
outline: 0;
backface-visibility: hidden; }
 
@media only screen and (max-width: 740px) {
.input_amount_0 label,
.input_amount_1 label,
Line 143 ⟶ 139:
.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;
Line 156 ⟶ 152:
.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);
Line 184 ⟶ 180:
position: relative;
padding: 0;
margin: 0;
border: 0; }
 
 
.input_amount_other fieldset label {
position: absolute;
Line 197 ⟶ 193:
.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; }
Line 217 ⟶ 213:
 
.radiobuttons-cell label:active,
.radiobuttons-cell input[type="radio"]:checked + label,
.input_amount_other.checked {
.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: #e7e7e7eaeaea;
background-repeat: no-repeat;
background-position: center center;
Line 247 ⟶ 248:
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: 01px solid #ddd;
border: none;
width: 100%;
height: 3em;
Line 258:
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: 1.5em1em 0;
}
.frequency-options divlabel {
background: #cacaca;
width: 49%;
Line 302 ⟶ 315:
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; }
.frequency-options div label { cursor: pointer; }
}
 
@media only screen and (max-width: 740px) {
.frequency-options label {
.frequency-options div { padding: .25em .4em .6em; }
.frequency-options label {
display: block;
font-size: .6em !important;
line-height: 1; }
} }
}
 
.frequency-options divlabel:hover {
background: #afafaf; }
.frequency-options divlabel: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 divlabel:first-child { margin-right: 2%; }
 
 
 
#infobox-wrapper {
padding-top: 1em;
Line 349 ⟶ 363:
font-weight: bold;
margin-bottom: .7em;
color: #367fb4;
}
 
 
Line 357 ⟶ 371:
#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;
Line 370 ⟶ 384:
 
#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/wiki/MediaWiki:Resources/TrilogySep2014.css"