Template:Styles/2017 September.css

From Donate
Revision as of 19:20, 5 September 2017 by Pcoombe (talk | contribs) (working on some changes)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

/* === Template:Styles/2016 oojs ui.css === */

  • ,
    before,
    after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

}

/* Hide these until the required JavaScript fiddling has been done */

  1. actual-form,

.consider-amounts {

   display: none;

}

  1. 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 --- */

  1. mw-head-base {
   height: 1em;

}

  1. mw-panel .portal,
  2. p-namespaces, #p-views, #p-cactions,
  3. p-search, #p-personal, #catlinks,
  4. firstHeading, #contentSub, #siteSub,
  5. jump-to-nav, .uls-tipsy {
   display: none;

}

  1. content {
   background-color: transparent;
   background-image: none;
   border: none;

}

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

  1. LP-table {
   width: 100%;
   border: none;

} body.rtl #LP-table {

   direction: rtl;

}

  1. form-wrapper {
   vertical-align: top;
   width: 360px;

}

  1. appeal-wrapper {
   vertical-align: top;
   padding-left: 0;
   padding-right: 2em;

} body.rtl #appeal-wrapper {

   padding-left: 2em;
   padding-right: 0;

}

/* --- Appeal ---*/

  1. appeal-head {
   font-size: 1.5em;
   padding-bottom: 0.5em;
   border-bottom: 1px solid #a2a9b1;

}

  1. 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 --- */

  1. donate-form-wrapper {
   position: relative;
   background-color: #fff;
   border: 1px solid #a2a9b1;
   border-radius: 2px;
   padding: 1.6em;
   font-weight: 500;
   color: #222;

}

  1. donate-form-wrapper fieldset {
   width: 100%;
   border: 0;
   margin: 0 auto 8px 0;
   padding: 0;

}

  1. donate-form-wrapper ul {
   display: table;
   table-layout: fixed;
   width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;

}

  1. donate-form-wrapper ul li {
   display: table-cell;
   padding: 2px;
   vertical-align: top;

}

/* --- Subheaders ---*/

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

}

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

.frequency-options input[type="radio"], .amount-options 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, .amount-options 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, .amount-options label:hover {

   background-color: #fff;
   border-color: #a2a9b1;
   color: #444;

} .payment-method-button:hover {

   background-color: #fff;
   border-color: #a2a9b1;

}

.frequency-options label:active, .amount-options label:active, .payment-method-button:active {

   background-color: #d9d9d9;
   color: #000;
   border-color: #7d8389;

}

.frequency-options label.checked, .frequency-options input[type="radio"]:checked + label, .amount-options input[type="radio"]:checked + label {

   background-color: #2a4b8d;
   color: #fff;
   border-color: #7d8389;

}

/* Focus styles */ input:focus, button:focus, .frequency-options input[type="radio"]:focus + label, .amount-options input[type="radio"]:focus + label, .payment-method-button:focus {

   outline: 0;
   border-color: #3366cc;
   box-shadow: inset 0 0 0 1px #3366cc;

}

.frequency-options input[type="radio"]:focus + label, .amount-options input[type="radio"]:focus + label, .frequency-options input[type="radio"]:checked + label:focus, .amount-options input[type="radio"]:checked + label:focus {

   box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;

}


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

.amount-options {

   font-size: 1.1em;

}

/* Smaller font size for countries with v long amounts */ .country-CO .amount-options, .country-CR .amount-options, .country-KR .amount-options, .country-PY .amount-options, .country-VN .amount-options {

   font-size: .9em;

}

.amount-options li {

   white-space: nowrap;

} .amount-options 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 #c0c0c0;
   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: 4px 4px;

}

/* Hide extra empty

tags between buttons */ .payment-method-div ~ p { display: none; } .payment-method-button { display: block; margin: 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; white-space: normal; } .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; }

  1. infobox-wrapper {

padding-top: 1em; line-height: 1.3; color: #707070; font-size: .9em; font-weight: normal; padding: 12px 4px 4px 4px; }

  1. infobox-header {

font-size: 1.3em; font-weight: bold; color: #555; } /* --- Privacy and links --- */

  1. donor-policy-block {

width: 100%; text-align: center; font-size: 0.8em; line-height: 1.2; padding: 1.8em 15% .7em; }

  1. donor-policy-block #cancel-monthly {

margin-top: 1em; }

  1. donate-links-block {

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

  1. footer-info,
  2. footer-places {

display: none; } div#footer #footer-icons { float: none; text-align: center; } div#footer #footer-icons li { float: none; display: inline-block; } /* Mobile styles */ @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-head, .appeal-text-long, .appeal-text-short { display: none; } #appeal-wrapper { margin-top: 60px; display: block; } #appeal-body { padding-top: 0.2em; } #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; } } /* === end of Template:Styles/2016 oojs ui.css === */