Template:Styles/Default.css: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
updated Amazon Pay logo (sadly not in SVG)
make buttons more consistent with banners, more accessible
Line 137: Line 137:
font-family: inherit;
font-family: inherit;
font-weight: 500;
font-weight: 500;
transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
}
.frequency-options label:hover,
.frequency-options label:hover,
Line 153: Line 155:
border-color: #7d8389;
border-color: #7d8389;
}
}

.frequency-options label.checked,
.radiobuttons-cell input[type="radio"]:checked + label {
background-color: #2a4b8d;
color: #fff;
border-color: #7d8389;
}

/* Focus styles */
.frequency-options label:focus,
.frequency-options label:focus,
.radiobuttons-cell label:focus,
.radiobuttons-cell label:focus,
.payment-method-button:focus {
.payment-method-button:focus {
outline: 0;
border-color: #3366cc;
border-color: #3366cc;
box-shadow: inset 0 0 0 1px #3366cc;
box-shadow: inset 0 0 0 1px #3366cc;
}
}

.frequency-options label.checked,
.radiobuttons-cell input[type="radio"]:checked + label {
.radiobuttons-cell input[type="radio"]:checked + label:focus {
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
background-color: #2a4b8d;
color: #fff;
border-color: #7d8389;
}
}


Line 251: Line 261:
background-position: center center;
background-position: center center;
background-size: auto 60%;
background-size: auto 60%;
color: #367fb4;
color: #3366cc;
font-size: 1.1em;
font-size: 1.1em;
-webkit-appearance: none;
-webkit-appearance: none;

Revision as of 16:34, 6 July 2017

/* === Template:Styles/2016 oojs ui.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;
  width: 360px;
}
#appeal-wrapper {
  vertical-align: top;
  padding-left: 0;
  padding-right: 2em;
}
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: #fff;
  border: 1px solid #a2a9b1;
  border-radius: 2px;
  padding: 1.6em;
  font-weight: 500;
  color: #222;
}

/* --- Subheaders ---*/

#radiobuttons-table-header,
#paymenttype-table-header {
  display: block;
  margin-top: .5em;
  margin-bottom: .5em;
  text-align: center;
  font-size: 1em;
}

/* --- Commmon button styles --- */

.frequency-options input[type="radio"],
.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);
}

.frequency-options label,
.radiobuttons-cell label,
.payment-method-button {
    display: block;
    background-color: #f8f9fa;
    color: #222;
    border: 1px solid #9aa0a7;
    border-radius: 2px;
    padding: 1em .1em;
    outline: 0;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition:    all .25s ease-in-out;
    transition:         all .25s ease-in-out;
}
.frequency-options label:hover,
.radiobuttons-cell label:hover,
.payment-method-button:hover {
    background-color: #fff;
    color: #444;
    border-color: #a2a9b1;
}
.frequency-options label:active,
.radiobuttons-cell label:active,
.payment-method-button:active {
    background-color: #d9d9d9;
    color: #000;
    border-color: #7d8389;
}

.frequency-options label.checked,
.radiobuttons-cell input[type="radio"]:checked + label {
    background-color: #2a4b8d;
    color: #fff;
    border-color: #7d8389;
}

/* Focus styles */
.frequency-options label:focus,
.radiobuttons-cell label:focus,
.payment-method-button:focus {
    outline: 0;
    border-color: #3366cc;
    box-shadow: inset 0 0 0 1px #3366cc;
}

.radiobuttons-cell input[type="radio"]:checked + label:focus {
    box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}

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

.frequency-options {
  margin: 0 3px;
  font-size: 1em;
}
.frequency-options label {
  display: block;
  float: left;
  width: 49%;
  margin-bottom: 1em;
}
.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;
}

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

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

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

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

.radiobuttons-cell label {
    height: 4em;
    line-height: 2;
}

.input_amount_other label {
    padding: .5em;
    line-height: 1.2;
}

.input_amount_other label span {
    font-size: .8em;
}

.input_amount_other input {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    color: #555;
    padding: .2em;
    border-radius: 2px;
    direction: ltr;
    text-align: center;
    font-family: inherit;
    font-size: .8em !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


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

.payment-method-div {
    padding: 0 3px;
}

.payment-method-button {
    display: block;
    margin: 0 0 .5em 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 60%;
    color: #3366cc;
    font-size: 1.1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* 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/thumb/e/e4/Amazon-Pay-logo-fullcolor-positive.png/800px-Amazon-Pay-logo-fullcolor-positive.png);
}
.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;
  line-height: 1.2;
  color: #707070;
  font-size: .9em;
  font-weight: normal;
}

#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 .5em .5em .5em;
  }

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

  #form-wrapper {
    display: block;
    width: 100%;
  }
  #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;
  }

  #donate-form-wrapper {
    padding: 1em;
  }
  
  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;
  }

  /* Smaller font size for countries with v long amounts */
  .country-CO .radiobuttons-cell label,
  .country-CR .radiobuttons-cell label,
  .country-KR .radiobuttons-cell label,
  .country-PY .radiobuttons-cell label,
  .country-VN .radiobuttons-cell label {
      font-size: .9em;
  }

}
/* === end of Template:Styles/2016 oojs ui.css === */