Template:Styles/2015 Trilogy default.css: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
No edit summary
merge in responsive code
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* === MediaWiki:Resources/2015/landingpage.css === */
/* === Template:Styles/2015_Trilogy_default.css === */

/* Hide these until the required JavaScript fiddling has been done */
#actual-form,
.consider-amounts {
display: none;
}

#actual-form-loading {
text-align: center;
line-height: 1.2;
}
.error-nojs {
max-width: 300px;
color: #800;
}


/* --- Hide default MediaWiki stuff we don't want --- */
/* --- Hide default MediaWiki stuff we don't want --- */
Line 35: Line 50:
padding-left: 0;
padding-left: 0;
padding-right: 2em;
padding-right: 2em;
width: 100%;
}
}
body.rtl #appeal-wrapper {
body.rtl #appeal-wrapper {
padding-left: 2em;
padding-left: 2em;
padding-right: 0;
padding-right: 0;
}

/* --- Appeal ---*/

#appeal-head {
font-size: 1.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #afafaf;
}
#appeal-body {
padding: 1em 0 0.2em 0;
font-size: 1.125em;
margin-bottom: 1em;
}

.quote-wrapper {
padding: 9em 0;
}
}


Line 53: Line 86:
-webkit-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.2s;
}
}


Line 63: Line 95:
}
}


#donate-form-wrapper label,
#donate-form-wrapper input {
transition: all 0.2s;
}

/*
#donate-form-wrapper:before {
#donate-form-wrapper:before {
pointer-events: none;
pointer-events: none;
Line 84: Line 122:
@media only screen and (max-width: 981px) {
@media only screen and (max-width: 981px) {
#donate-form-wrapper:before { display: none; }
#donate-form-wrapper:before { display: none; }
}
*/

#form-wrapper input:focus,
#form-wrapper input:focus + label {
outline: 1px solid #999;
}
}


Line 103: Line 147:
.frequency-options {
.frequency-options {
margin: 0 3px;
margin: 0 3px;
font-size: 1em;
}
}
.frequency-options label {
.frequency-options label {
display: block;
display: block;
width: 49%;
float: left;
float: left;
height: 2.5em;
width: 49%;
line-height: 2.5;
margin-bottom: 1em;
margin-bottom: 1em;
-moz-border-radius: .3em;
-moz-border-radius: .3em;
Line 115: Line 158:
border-radius: .3em;
border-radius: .3em;
background: #cacaca;
background: #cacaca;
padding: 0.4em 0.2em;
font-size: 1em;
font-size: 1em;
line-height: 1;
text-transform: uppercase;
text-transform: uppercase;
text-align: center;
text-align: center;
Line 155: Line 200:


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

#radiobuttons-table-body {
clear: both;
}


#radiobuttons-table {
#radiobuttons-table {
Line 193: Line 242:
.input_amount_other label {
.input_amount_other label {
line-height: 2.5;
line-height: 2.5;
}

.input_amount_other span {
font-size: 0.8em;
}
}


.input_amount_other input {
.input_amount_other input {
direction: ltr;
display: block;
display: block;
width: 80%;
width: 80%;
margin: 0 auto;
margin: 0 auto;
background: #235375;
background: #fff;
line-height: 1;
line-height: 1;
padding: .5em;
padding: .2em .5em;
border: 0;
border: 0;
outline: 0;
outline: 0;
Line 213: Line 267:
padding: .3em;
padding: .3em;
}
}
}

.input_amount_other input:hover {
background: #19415e;
}
.input_amount_other input:focus {
background: #fff;
color: #19415e;
}

.input_amount_other.checked input {
background: #fff;
}
.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);
}
}


.radiobuttons-cell label:active,
.radiobuttons-cell label:active,
.radiobuttons-cell input[type="radio"]:checked + label,
.radiobuttons-cell input[type="radio"]:checked + label {
background: #0f4b76 !important;
.radiobuttons-cell label.checked,
.input_amount_other.checked {
background: #0f4b76;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
Line 257: Line 289:
border-radius: .3em;
border-radius: .3em;
border: 0;
border: 0;
outline: 0;
background-color: #eaeaea;
background-color: #eaeaea;
background-repeat: no-repeat;
background-repeat: no-repeat;
Line 291: Line 322:
.paymentmethod-pp input,
.paymentmethod-pp input,
.paymentmethod-amazon input,
.paymentmethod-amazon input,
.paymentmethod-bpay input {
.paymentmethod-bpay input,
.paymentmethod-ideal input,
.paymentmethod-enets input,
.paymentmethod-yandex input {
text-indent: -10000px;
text-indent: -10000px;
overflow: hidden;
overflow: hidden;
Line 300: Line 334:
}
}
.paymentmethod-pp input {
.paymentmethod-pp input {
background-image: url('//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg');
background-image: url(//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg);
}
}
.paymentmethod-amazon input {
.paymentmethod-amazon input {
background-image: url('//upload.wikimedia.org/wikipedia/donate/e/e4/Amazon-color.svg');
background-image: url(//upload.wikimedia.org/wikipedia/donate/e/e4/Amazon-color.svg);
}
}
.paymentmethod-bpay input {
.paymentmethod-bpay input {
background-image: url('//upload.wikimedia.org/wikipedia/donate/e/e3/BPAY_Landscape_MONO.gif');
background-image: url(//upload.wikimedia.org/wikipedia/donate/e/e3/BPAY_Landscape_MONO.gif);
}
}
.paymentmethod-ideal input {

background-image: url(//upload.wikimedia.org/wikipedia/donate/8/83/Ideal_logo.gif);
/* Don't mess with iDEAL and its weird capitalisation */
}
.paymentmethod-ideal .payment-method-button {
.paymentmethod-enets input {
text-transform: none;
background-image: url(//upload.wikimedia.org/wikipedia/donate/d/d4/Enets-logo.png);
}
.paymentmethod-yandex input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/8/85/Yamoney_en.png);
}
html[lang="ru"] .paymentmethod-yandex input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/c/cb/Yandex_money_RU_logo.png);
}
.paymentmethod-pp-usd input {
background-image: url(//upload.wikimedia.org/wikipedia/donate/2/22/Paypal-USD-color.svg);
}
}


Line 391: Line 435:
}
}



/* === end of MediaWiki:Resources/2015/landingpage.css === */
@media screen and (max-width: 981px) {
/* Text & Logo layout */
#content {
margin: 0;
padding: 0 1em 1em 1em;
}

#p-logo a {
width: 120px;
height: 120px;
background-size: 80%;
}

#form-wrapper, #donate {
display: block;
}

/* Hide appeal */
#appeal-wrapper {
margin-top: 60px;
display: block;
}
#appeal-head {
display: none;
}
#appeal-body {
padding-top: 0.2em;
}
.appeal-text-long, .appeal-text-short {
display: none;
}
div#infobox-wrapper, div#donor-policy-block {
width: 100%;
}

/* Smallprint and links */
div#donor-policy-block {
margin: 0;
padding: 0;
}

/* Footer */
div#footer {
margin: 0;
}

}

/* === end of Template:Styles/2015_Trilogy_default.css === */

Latest revision as of 20:28, 8 December 2016

/* === Template:Styles/2015_Trilogy_default.css === */

/* Hide these until the required JavaScript fiddling has been done */
#actual-form,
.consider-amounts {
  display: none;
}

#actual-form-loading {
  text-align: center;
  line-height: 1.2;
}
.error-nojs {
  max-width: 300px;
  color: #800;
}

/* --- Hide default MediaWiki stuff we don't want --- */

#mw-head-base {
  height: 1em;
}
#mw-panel .portal {
  display: none;
}
#p-namespaces, #p-views, #p-cactions, #p-search, #p-personal, #catlinks, #firstHeading, #contentSub, #siteSub, #jump-to-nav {
  display: none;
}
#content {
  background-color: transparent;
  background-image: none;
  border: none;
}

/* --- Overall layout of the landing page --- */

#LP-table {
  width: 100%;
  border: none;
}
body.rtl #LP-table {
  direction: rtl;
}

#form-wrapper {
  vertical-align: top;
}
#appeal-wrapper {
  vertical-align: top;
  padding-left: 0;
  padding-right: 2em;
  width: 100%;
}
body.rtl #appeal-wrapper {
  padding-left: 2em;
  padding-right: 0;
}

/* --- Appeal ---*/

#appeal-head {
  font-size: 1.5em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #afafaf;
}
#appeal-body {
  padding: 1em 0 0.2em 0;
  font-size: 1.125em;
  margin-bottom: 1em;
}

.quote-wrapper {
    padding: 9em 0;
}

/* --- Hide non-monthly capable payment methods on monthly forms --- */

.form-monthly .not-monthly-capable {
  display: none;
}

/* --- Form --- */

#form-wrapper * {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

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

#donate-form-wrapper label,
#donate-form-wrapper input {
  transition: all 0.2s;
}

/*
#donate-form-wrapper:before {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 100px;
  content: " ";
  border: solid transparent;
  border-left-color: #f6f6f6;
  border-width: 15px;
  margin-top: -15px;
}

body.rtl #donate-form-wrapper:before {
  left: auto;
  right: 0;
  border-left-color: transparent;
  border-right-color: #f6f6f6;
}

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

#form-wrapper input:focus,
#form-wrapper input:focus + label {
    outline: 1px solid #999;
}

/* --- Subheaders ---*/

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

/* --- Frequency options --- */

.frequency-options {
  margin: 0 3px;
  font-size: 1em;
}
.frequency-options label {
  display: block;
  float: left;
  width: 49%;
  margin-bottom: 1em;
  -moz-border-radius:    .3em;
  -webkit-border-radius: .3em;
  border-radius:         .3em;
  background: #cacaca;
  padding: 0.4em 0.2em;
  font-size: 1em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.frequency-options label:first-child {
  margin-right: 4px;
}

body.rtl .frequency-options label {
  float: right;
}
body.rtl .frequency-options label:first-child {
  margin-left: 4px;
  margin-right: 0;
}

@media only screen and (max-width: 740px) {
  .frequency-options label {
    font-size: .8em;
  }
}

.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);
}

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

#radiobuttons-table-body {
  clear: both;
}

#radiobuttons-table {
  width: 100%;
  margin-bottom: 1em;
}

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

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

.radiobuttons-cell label {
  background: #367fb4;
  display: block;
  font-size: 1em;
  height: 5em;
  line-height: 5;
  -moz-border-radius:    .3em;
  -webkit-border-radius: .3em;
  border-radius:         .3em;
  color: #fff;
  cursor: pointer;
}

.input_amount_other label {
  line-height: 2.5;
}

.input_amount_other span {
  font-size: 0.8em;
}

.input_amount_other input {
  direction: ltr;
  display: block;
  width: 80%;
  margin: 0 auto;
  background: #fff;
  line-height: 1;
  padding: .2em .5em;
  border: 0;
  outline: 0;
  -moz-border-radius:    .3em;
  -webkit-border-radius: .3em;
  border-radius:         .3em;
}

@media only screen and (max-width: 740px) {
  .input_amount_other input {
    padding: .3em;
  }
}

.radiobuttons-cell label:active,
.radiobuttons-cell input[type="radio"]:checked + label {
  background: #0f4b76 !important;
  -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);
}


/* --- Payment method buttons --- */

.payment-method-button {
  display: block;
  margin: 0 3px .5em 3px;
  width: 100%;
  min-height: 3.5em;
  -moz-border-radius:    .3em;
  -webkit-border-radius: .3em;
  border-radius:         .3em;
  border: 0;
  background-color: #eaeaea;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 65%;
  -moz-box-shadow:    inset 0 14px 16px rgba(255,255,255,.5), inset 0 0 7px #fff;
  -webkit-box-shadow: inset 0 14px 16px rgba(255,255,255,.5), inset 0 0 7px #fff;
  box-shadow:         inset 0 14px 16px rgba(255,255,255,.5), inset 0 0 7px #fff;
  color: #367fb4;
  padding: 0 1em;
  font-size: 1.1em;
  text-transform: uppercase;
  white-space: normal;
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
}

.payment-method-button:hover {
  background-color: #f2f2f2;
}

.payment-method-button:active {
  background-color: #f2f2f2;
  -moz-box-shadow:    inset 0 14px 16px rgba(255,255,255,.5), inset 0 1px 3px rgba(0,0,0,.25);
  -webkit-box-shadow: inset 0 14px 16px rgba(255,255,255,.5), inset 0 1px 3px rgba(0,0,0,.25);
  box-shadow:         inset 0 14px 16px rgba(255,255,255,.5), inset 0 1px 3px rgba(0,0,0,.25);
}

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

.paymentmethod-cc input {
  background-image: none;
}
.paymentmethod-pp input {
  background-image: url(//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg);
}
.paymentmethod-amazon input {
  background-image: url(//upload.wikimedia.org/wikipedia/donate/e/e4/Amazon-color.svg);
}
.paymentmethod-bpay input {
  background-image: url(//upload.wikimedia.org/wikipedia/donate/e/e3/BPAY_Landscape_MONO.gif);
}
.paymentmethod-ideal input {
  background-image: url(//upload.wikimedia.org/wikipedia/donate/8/83/Ideal_logo.gif);
}
.paymentmethod-enets input {
  background-image: url(//upload.wikimedia.org/wikipedia/donate/d/d4/Enets-logo.png);
}
.paymentmethod-yandex input {
  background-image: url(//upload.wikimedia.org/wikipedia/donate/8/85/Yamoney_en.png);
}
html[lang="ru"] .paymentmethod-yandex input {
  background-image: url(//upload.wikimedia.org/wikipedia/donate/c/cb/Yandex_money_RU_logo.png);
}
.paymentmethod-pp-usd input {
  background-image: url(//upload.wikimedia.org/wikipedia/donate/2/22/Paypal-USD-color.svg);
}


/* --- Infobox ("Where your donation goes") --- */

.dividing-line {
  display: none;
}

#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;
}

/* --- Privacy and links --- */

#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.8em;
  line-height: 1.2;
  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;
  margin-left: 0;
  width: 100%;
  display: block;
  font-size: 0.8em;
  text-align: center;
}
.form-info-links li {
  width: auto;
  display: inline-block;
  padding: 0 1em;
  margin: 0 auto;
}

/* --- Footer --- */

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


@media screen and (max-width: 981px) {
  /* Text & Logo layout */
  #content {
    margin: 0;
    padding: 0 1em 1em 1em;
  }

  #p-logo a {
    width: 120px;
    height: 120px;
    background-size: 80%;
  }

  #form-wrapper, #donate {
    display: block;
  }

  /* Hide appeal */
  #appeal-wrapper {
    margin-top: 60px;
    display: block;
  }
  #appeal-head {
    display: none;
  }
  #appeal-body {
    padding-top: 0.2em;
  }
  .appeal-text-long, .appeal-text-short {
    display: none;
  }
  
  div#infobox-wrapper, div#donor-policy-block {
  	width: 100%;
  }

  /* Smallprint and links */  
  div#donor-policy-block {
    margin: 0;
    padding: 0;
  }

  /* Footer */
  div#footer {
    margin: 0;
  }

}

/* === end of Template:Styles/2015_Trilogy_default.css === */