Template:Styles/2015 Trilogy default.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.
/* === 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 === */