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
 
(35 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 62: 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 83: 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;
}

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


Line 88: Line 146:


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

.frequency-options label:first-child {
.frequency-options label:first-child {
margin-right: 4px;
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) {
@media only screen and (max-width: 740px) {
.frequency-options label {
.frequency-options label {
padding: .25em .4em .6em;
font-size: .8em;
display: block;
font-size: .7em;
line-height: 1;
}
}
}
}
Line 136: Line 201:
/* --- Donation Amounts --- */
/* --- Donation Amounts --- */


#radiobuttons-table { width: 100%; }
#radiobuttons-table-body {
clear: both;
}

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


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

@media only screen and (max-width: 740px) {
.radiobuttons-cell {
padding: 0;
}
}
}


.radiobuttons-cell input[type="radio"] {
.radiobuttons-cell input[type="radio"] {
position: absolute;
width: 1px;
width: 1px;
height: 1px;
height: 1px;
Line 156: Line 223:
padding: 0;
padding: 0;
overflow: hidden;
overflow: hidden;
position: absolute;
border: 0;
border: 0;
clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
Line 176: 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;
color: #fff;
padding: .2em .5em;
padding: .5em;
border: 0;
border: 0;
cursor: pointer;
outline: 0;
outline: 0;
-moz-border-radius: .3em;
-moz-border-radius: .3em;
Line 200: Line 269:
}
}


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




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


.payment-method-button {
.radiobuttons-cell label:active,
display: block;
.radiobuttons-cell input[type="radio"]:checked + label,
margin: 0 3px .5em 3px;
.input_amount_other.checked {
background: #0f4b76;
width: 100%;
min-height: 3.5em;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
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;
}
}

/* Fallback for IE8 and below */
.payment-method-button:hover {
.radiobuttons-cell label.checked,
background-color: #f2f2f2;
.input_amount_other.checked {
background: #0f4b76 !important;
}
}


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




Line 315: 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 === */