MediaWiki:Centralnotice-template-Fundraiser: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Central Notice |
No edit summary Tag: Central Notice |
||
Line 1: | Line 1: | ||
<!-- Large desktop banner. Must be used with "Large banner limit and switch" mixin --> | <!-- Large desktop banner. Must be used with "Large banner limit and switch" mixin --> | ||
<style> | <style> | ||
/* Hide when editing */ | /* Hide when editing */ | ||
.action-edit #centralNotice, | .action-edit #centralNotice, | ||
.ve-activated #centralNotice { | .ve-activated #centralNotice { | ||
display: none !important; | |||
} | } | ||
/* Border-Box */ | /* Border-Box */ | ||
.frb *, | .frb *, | ||
.frb *:before, | .frb *:before, | ||
.frb *:after { | .frb *:after { | ||
-moz-box-sizing: border-box; | |||
-webkit-box-sizing: border-box; | |||
box-sizing: border-box; | |||
} | } | ||
/* Banner wide settings */ | /* Banner wide settings */ | ||
.frb input, | .frb input, | ||
.frb button { | .frb button { | ||
font-size: inherit; | |||
font-family: inherit; | |||
} | } | ||
.frb button { | .frb button { | ||
cursor: pointer; | |||
outline: 0; | |||
text-align: center; | |||
} | } | ||
/* --- Main banner wrapper --- */ | /* --- Main banner wrapper --- */ | ||
.frb { | .frb { | ||
display: none; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
z-index: 110; | |||
background: transparent; | |||
} | } | ||
.frb { | .frb { | ||
border-bottom: 1px solid #c8ccd1; | |||
background-color: #fff; | |||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | |||
color: #222; | |||
font-size: 16px; | |||
line-height: 1.1875; | |||
/*19px @16px*/ | |||
font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif; | |||
} | font-weight: 500; | ||
} | |||
.frb.frb--minimized { | .frb.frb--minimized { | ||
position: fixed; | |||
} | } | ||
/* --- Window Styles --- */ | /* --- Window Styles --- */ | ||
.frb-main { | .frb-main { | ||
position: relative; | |||
display: table; | |||
width: 100%; | |||
padding: 16px 0 16px 8px; | |||
background-color: #FFFFFF; | |||
transition: background-color 0.5s ease; | |||
} | } | ||
body.rtl .frb-main { | body.rtl .frb-main { | ||
padding: 16px 8px 16px 0; | |||
} | } | ||
/* Minimized styles */ | |||
.frb--minimized { | |||
cursor: pointer; | |||
} | |||
.frb--minimized .frb-main:hover { | |||
.frb--minimized { | background-color: #eaf3ff; | ||
} | |||
} | |||
/* --- Close button --- */ | |||
.frb-controls { | |||
display: inline-block; | |||
position: absolute; | |||
right: 0; | |||
top: 0; | |||
z-index: 999; | |||
font-size: 12px; | |||
text-transform: uppercase; | |||
cursor: pointer; | |||
padding: 8px 16px; | |||
color: #72777d; | |||
} | |||
body.rtl .frb-controls { | |||
right: auto; | |||
left: 0; | |||
} | |||
body.rtl .frb-controls { | |||
} | |||
.frb-close:hover { | .frb-close:hover { | ||
color: #000000; | |||
} | |||
} | |||
.frb-close:hover .frb-icon g { | |||
stroke: #000000; | |||
} | |||
/* -------------- Message -------------- */ | |||
.frb-message { | .frb-message { | ||
font-size: | position: relative; | ||
display: table-cell; | |||
width: auto; | |||
vertical-align: top; | |||
border: 8px solid #990000; | |||
border-radius: 12px; | |||
background-color: #f8f9fa; | |||
padding: 16px 30px; | |||
color: #000; | |||
font-family: "Linux Libertine", Georgia, Times, serif; | |||
font-size: 16px; | |||
line-height: 1.4; | |||
/*22.4px @16px*/ | |||
transition: background-color 0.5s ease; | |||
} | } | ||
@media (min-width: | @media (min-width: 900px) { | ||
.frb-message { | |||
font-size: 19px; | |||
} | |||
} | } | ||
@media (min-width: | @media (min-width: 1100px) { | ||
.frb-message { | |||
font-size: 22px; | |||
} | |||
} | } | ||
@media (min-width: | @media (min-width: 1300px) { | ||
html[lang="en"] .frb-message { | |||
font-size: 24px; | |||
} | |||
} | } | ||
.frb-message | @media (min-width: 1500px) { | ||
.frb-message { | |||
font-size: 24px; | |||
} | |||
} | |||
} | |||
.frb-message-icon { | |||
float: left; | |||
margin-top: 0.07368421053em; | |||
} | /*1.4px @19px*/ | ||
margin-left: calc(-1em + -0.05263157895em); | |||
/*-19px + -1px @19px*/ | |||
height: 1em; | |||
width: 1em; | |||
} | |||
.frb-message | body.rtl .frb-message-icon { | ||
float: right; | |||
} | margin-right: calc(-1em + -0.2105263158em); | ||
/*-19px + -4px @19px*/ | |||
} | |||
.frb- | .frb-message p { | ||
margin: 0; | |||
} | } | ||
.frb-highlight { | |||
.frb- | border-bottom: 3px solid #990000; | ||
} | |||
} | |||
/* Minimized styles */ | |||
.frb--minimized .frb-message { | .frb--minimized .frb-message { | ||
font-size: 14px; | padding: 16px 10px 16px 30px; | ||
cursor: pointer; | |||
font-size: 16px; | |||
background-color: transparent; | |||
} | |||
body.rtl .frb--minimized .frb-message { | |||
padding: 16px 30px 16px 10px; | |||
} | |||
@media (min-width: 900px) { | |||
.frb--minimized .frb-message { | |||
font-size: 14px; | |||
} | |||
} | |||
@media (min-width: 1050px) { | |||
.frb--minimized .frb-message { | |||
font-size: 16px; | |||
} | |||
} | |||
@media (min-width: 1200px) { | |||
.frb--minimized .frb-message { | |||
font-size: 18px; | |||
} | |||
} | } | ||
@media (min-width: | @media (min-width: 1300px) { | ||
.frb--minimized .frb-message { | |||
font-size: 22px; | |||
} | |||
} | } | ||
/* -------------- Form -------------- */ | |||
.frb-- | |||
.frb-form { | |||
display: table-cell; | |||
position: relative; | |||
width: 25%; | |||
min-width: 300px; | |||
height: 100%; | |||
vertical-align: middle; | |||
padding: 0 8px; | |||
background: #fff; | |||
} | } | ||
/* Minimized styles */ | |||
.frb--minimized .frb- | .frb--minimized .frb-form { | ||
background-color: transparent; | |||
} | } | ||
.frb-form:before { | |||
position: absolute; | |||
left: 0; | |||
top: 50%; | |||
content: " "; | |||
margin: -10px 0 0 0; | |||
border: 10px solid transparent; | |||
border-left-color: #990000; | |||
pointer-events: none; | |||
} | |||
.frb-form { | body.rtl .frb-form:before { | ||
left: auto; | |||
right: 0; | |||
border-left-color: transparent; | |||
border-right-color: #990000; | |||
} | |||
} | |||
.frb-form fieldset { | |||
width: 100%; | |||
border: 0; | |||
} | margin: 0 auto; | ||
padding: 0 0 8px 0; | |||
} | |||
.frb-form | .frb-form fieldset+fieldset legend { | ||
border-top: 1px solid #CCC; | |||
} | |||
} | |||
.frb-form | .frb-form legend { | ||
position: relative; | |||
top: 0; | |||
width: calc(100% - 7px); | |||
margin: 0; | |||
} | padding: 14px 0 4px 0; | ||
font-weight: normal; | |||
line-height: 1.2; | |||
/*18px @15px*/ | |||
text-align: center; | |||
font-size: 15px; | |||
color: #696969; | |||
} | |||
.frb-form | .frb-rml-form legend { | ||
font-size: 14px; | |||
} | font-weight: 500; | ||
color: #222; | |||
line-height: 1.3571428571; | |||
/*10px @14px*/ | |||
padding: 0 0 8px 0; | |||
} | |||
@media (max-width: 1400px) { | |||
.frb- | fieldset.frb-frequency legend { | ||
padding: 14px 15px 4px; | |||
} | |||
} | |||
} | |||
.frb-form fieldset:first-of-type legend { | |||
padding: | padding-top: 0; | ||
} | } | ||
} | .frb-form fieldset+fieldset legend:after, | ||
.frb-form fieldset+fieldset legend:before { | |||
top: -1px; | |||
left: 50%; | |||
border: solid transparent; | |||
content: " "; | |||
height: 0; | |||
width: 0; | |||
position: absolute; | |||
pointer-events: none; | |||
} | |||
.frb-form fieldset: | .frb-form fieldset+fieldset legend:after { | ||
border-color: rgba(255, 255, 255, 0); | |||
} | border-top-color: #FFFFFF; | ||
border-width: 9px; | |||
margin-left: -9px; | |||
} | |||
.frb-form fieldset+fieldset legend:before { | |||
.frb-form fieldset + fieldset legend:before { | border-color: rgba(204, 204, 204, 0); | ||
border-top-color: #ccc; | |||
border-width: 10px; | |||
margin-left: -10px; | |||
} | |||
} | |||
.frb-form | .frb-form ul { | ||
display: table; | |||
table-layout: fixed; | |||
width: 100%; | |||
margin: 0; | |||
} | padding: 0; | ||
list-style: none; | |||
} | |||
.frb- | .frb-amounts ul:first-child { | ||
margin-bottom: 3px; | |||
} | |||
} | |||
.frb-form | .frb-form li { | ||
display: table-cell; | |||
vertical-align: top; | |||
padding-left: 4px; | |||
} | |||
} | |||
.frb- | .frb-form li:first-child { | ||
padding-left: 0; | |||
} | } | ||
.frb-form li { | .frb-form .frb-methods li { | ||
padding: 4px !important; | |||
} | |||
} | |||
#frb-form { | |||
margin-top: 12px; | |||
} | } | ||
/* --- Common Button Styles --- */ | |||
/* Hide radio buttons */ | |||
.frb-form .frb-methods input[type="radio"], | |||
} | .frb-amt-other input[type="radio"] { | ||
position: absolute; | |||
overflow: hidden; | |||
height: 1px; | |||
width: 1px; | |||
clip: rect(0 0 0 0); | |||
border: 0; | |||
margin: -1px; | |||
padding: 0; | |||
} | |||
/* --- | .frb-btn { | ||
width: 100%; | |||
height: 48px; | |||
display: block; | |||
background-color: #f8f9fa; | |||
color: #222222; | |||
font-size: 16px; | |||
line-height: 1.25; | |||
/*20px @16px*/ | |||
padding: 13px 4px 15px 4px; | |||
border: 1px solid #9aa0a7; | |||
border-radius: 2px; | |||
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; | |||
} | |||
.frb-btn:hover { | |||
.frb- | background-color: #fff; | ||
color: #444; | |||
border-color: #a2a9b1; | |||
} | |||
} | |||
.frb-btn:active { | |||
background-color: #d9d9d9; | |||
color: #000; | |||
border-color: #7d8389; | |||
} | |||
.frb-btn:active { | |||
} | |||
.frb-radio | .frb-form input[type=radio]:checked+.frb-btn { | ||
.frb- | background-color: #2a4b8d; | ||
color: #fff; | |||
border-color: #7d8389; | |||
} | } | ||
.frb-radio { | .frb-radio, | ||
.frb-radio-label { | |||
font-size: 16px; | |||
} | line-height: 1.375; | ||
/*22px @16px*/ | |||
} | |||
.frb-radio | .frb-radio { | ||
float: left; | |||
margin: 8px 6px; | |||
} | |||
} | |||
.frb-radio-label { | |||
cursor: pointer; | |||
display: block; | |||
} | white-space: nowrap; | ||
font-weight: bold; | |||
padding: 6px 2px; | |||
} | |||
/* | .frb-frequency .frb-radio-label { | ||
font-size: 16px; | |||
line-height: 1.375; | |||
/*22px @16px*/ | |||
} | |||
/* Focus styles */ | |||
.frb-form input[type=radio]:focus { | |||
outline: 0; | |||
} | |||
.frb-form input[type=radio] | |||
} | |||
.frb- | .frb a:focus, | ||
.frb- | .frb button:focus, | ||
.frb-form input[type=radio]: | .frb-radio:focus+.frb-radio-label, | ||
.frb-form input[type=radio]: | .frb-btn:focus, | ||
.frb-close:focus, | |||
.frb-btn-submit:focus, | |||
} | .frb-form input[type=radio]:focus+.frb-btn, | ||
.frb-form input[type=radio]:focus+#frb-amt-other-label, | |||
#frb-amt-other-input:focus { | |||
outline: 0; | |||
border-color: #36c !important; | |||
box-shadow: inset 0 0 0 1px #36c; | |||
} | |||
.frb-btn | .frb-form input[type=radio]:focus+.frb-btn, | ||
.frb-form input[type=radio]:focus+#frb-amt-other-label, | |||
.frb-form input[type=radio]:checked+.frb-btn:focus, | |||
.frb-form input[type=radio]:checked+#frb-amt-other-label:focus, | |||
} | .frb-form .frb-btn-submit:focus { | ||
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; | |||
} | |||
.frb-btn img { | |||
padding: 0 4px; | |||
max-width: 100%; | |||
} | max-height: 20px; | ||
/*must equal font line height of frb-btn*/ | |||
} | |||
.frb-methods | .frb-methods .frb-btn { | ||
height: 64px; | |||
} | line-height: 1.125; | ||
/*18px @16px*/ | |||
} | |||
.frb-methods | .frb-methods svg { | ||
max-width: 100%; | |||
} | } | ||
.frb-methods .frb-pm-cc | .frb-methods .frb-pm-cc .frb-btn { | ||
padding: 7px 4px | |||
} | } | ||
.frb-methods .frb-pm-cc svg { | |||
max-width: 30%; | |||
} | |||
} | |||
.frb-country- | .frb-country-GB .frb-methods .frb-pm-cc svg, | ||
.frb-country- | .frb-country-IE .frb-methods .frb-pm-cc svg { | ||
max-width: 38%; | |||
max-height: 24px; | |||
} | } | ||
.frb-country-US .frb-methods .frb-pm-cc svg, | .frb-country-US .frb-methods .frb-pm-cc svg, | ||
.frb-country-AU .frb-methods .frb-pm-cc svg { | .frb-country-AU .frb-methods .frb-pm-cc svg { | ||
max-width: | max-width: 45%; | ||
max-height: 23px; | |||
} | } | ||
@media (min-width: 1800px) { | |||
.frb-country-US .frb-methods .frb-pm-cc svg, | |||
.frb- | .frb-country-AU .frb-methods .frb-pm-cc svg { | ||
max-width: 22%; | |||
} | |||
.frb- | } | ||
} | |||
.frb-country-US .frb-logo-jcb, | |||
.frb- | .frb-country-CA .frb-logo-jcb, | ||
.frb-country-NZ .frb-logo-jcb, | |||
.frb-country-AU .frb-logo-discover, | |||
.frb-country-CA .frb-logo-discover, | |||
.frb-country-GB .frb-logo-discover, | |||
.frb-country-IE .frb-logo-discover, | |||
.frb-country-NZ .frb-logo-discover { | |||
display: none; | |||
} | |||
- | |||
- | |||
.frb- | |||
.frb- | |||
} | |||
/* --- | /* Blue text buttons */ | ||
.frb-btn.frb-btn-btxt { | |||
color: #3366cc; | |||
} | |||
.frb- | .frb-btn.frb-btn-btxt:active { | ||
color: #2a4b8d; | |||
} | } | ||
.frb-amt-other .frb-btn { | /* Submit/Continue buttons (blue background) */ | ||
.frb-btn-submit { | |||
width: 100%; | |||
display: block; | |||
} | margin-top: 8px; | ||
padding: 8px; | |||
color: #fff; | |||
background-color: #3366cc; | |||
border-color: #3366cc; | |||
cursor: pointer; | |||
border: 0; | |||
border-radius: 2px; | |||
font-size: 16px; | |||
-webkit-transition: all .25s ease-in-out; | |||
-moz-transition: all .25s ease-in-out; | |||
transition: all .25s ease-in-out; | |||
} | |||
.frb-btn-submit:hover { | |||
background-color: #447ff5; | |||
border-color: #447ff5; | |||
} | |||
.frb-btn-submit:active { | |||
background-color: #2a4b8d; | |||
border-color: #2a4b8d; | |||
box-shadow: none; | |||
} | |||
/* --- Other Amount --- */ | |||
.frb-amt-other-label { | |||
display: none; | |||
} | |||
.frb-amt-other .frb-btn { | |||
display: inline-block; | |||
width: 100%; | |||
padding: 2px 0 3px 0; | |||
} | |||
.frb-amt-other span { | .frb-amt-other span { | ||
display: block; | |||
height: auto; | |||
margin-bottom: 1px; | |||
font-size: 10px; | |||
line-height: 1; | |||
/*10px @16px*/ | |||
} | cursor: pointer; | ||
} | |||
.frb-amt-other #frb-amt-other-input { | .frb-amt-other #frb-amt-other-input { | ||
width: 100%; | |||
border: 1px solid #ccc; | |||
color: #555; | |||
font-size: 16px; | |||
padding: 7px 2px; | |||
border-radius: 0; | |||
direction: ltr; | |||
text-align: center; | |||
font-family: inherit; | |||
} | } | ||
/* --- Payment method Buttons --- */ | /* --- Payment method Buttons --- */ | ||
/* Hide methods which aren't monthly capable when monthly option is selected */ | /* Hide methods which aren't monthly capable when monthly option is selected */ | ||
.form-monthly .no-monthly { | .form-monthly .no-monthly { | ||
display: none !important; | |||
} | } | ||
.frb-form .frb-methods { | .frb-form .frb-methods { | ||
padding-bottom: 0; | |||
} | } | ||
/* Only where there are 4 methods, display 2x2 */ | /* Only where there are 4 methods, display 2x2 */ | ||
.frb-methods ul li:first-child:nth-last-child(4), | .frb-methods ul li:first-child:nth-last-child(4), | ||
.frb-methods ul li:first-child:nth-last-child(4) ~ li { | .frb-methods ul li:first-child:nth-last-child(4)~li { | ||
float: left; | |||
width: 50%; | |||
} | |||
} | |||
.frb-methods ul li:first-child:nth-last-child(4) .frb-btn, | |||
.frb- | .frb-methods ul li:first-child:nth-last-child(4)~li .frb-btn { | ||
height: 48px; | |||
padding: 13px 4px 15px 4px; | |||
} | |||
.frb- | |||
} | |||
/* --- | /* --- Secure Transaction Legend --- */ | ||
.frb- | .frb-secure-transaction { | ||
display: block; | |||
padding: 5px 12px; | |||
margin: 0 auto; | |||
color: #000; | |||
font-size: 12px; | |||
text-transform: uppercase; | |||
} | text-align: center; | ||
opacity: .7; | |||
} | |||
.frb | .frb-secure-transaction img { | ||
width: 14px; | |||
} | height: 14px; | ||
display: inline-block; | |||
} | |||
/* | /* --- Footer / Small Print --- */ | ||
.frb-footer { | |||
padding: 0 24px 6px; | |||
} | font-size: 12px; | ||
color: #555; | |||
text-align: center; | |||
display: none; | |||
font-weight: normal; | |||
} | |||
.frb:hover .frb-footer { | |||
.frb- | display: block; | ||
} | |||
} | |||
.frb- | /* Minimized styles */ | ||
.frb- | .frb.frb--minimized:hover .frb-footer { | ||
display: none; | |||
} | |||
} | |||
/* | /* --- Show and Hiding (Minimize and Maximize) --- */ | ||
.frb-btn-toggle-size { | |||
display: none; | |||
/*shows when minimized*/ | |||
width: 100%; | |||
} | font-size: 16px; | ||
background-color: #2a4b8d; | |||
color: #fff; | |||
border-color: #2a4b8c; | |||
transition: color 0.5s ease; | |||
text-transform: uppercase; | |||
font-weight: bold; | |||
letter-spacing: 0.0375em; | |||
/*0.6px @16px*/ | |||
} | |||
.frb-- | .frb-btn-toggle-size:hover, | ||
.frb-btn-toggle-size:focus { | |||
} | background-color: #2a4b8d; | ||
border-color: #2a4b8c; | |||
color: #eaf3ff; | |||
} | |||
/* | /*Minimized styles*/ | ||
.frb- | .frb--minimized .frb-btn-toggle-size { | ||
display: block; | |||
margin: 0 auto; | |||
.frb- | width: 97%; | ||
} | |||
} | |||
.frb--minimized:hover .frb-btn-toggle-size { | |||
.frb--minimized | color: #eaf3ff; | ||
} | |||
.frb-- | |||
} | |||
/* | /* Messages */ | ||
.frb-message__minimized { | |||
display: none; | |||
} | |||
.frb- | .frb-message__maximized { | ||
display: block; | |||
} | |||
} | |||
.frb- | .frb-greeting { | ||
display: block; | |||
margin-bottom: 4px; | |||
} | |||
} | |||
.frb- | /* Minimized styles */ | ||
.frb- | .frb--minimized .frb-message__minimized { | ||
display: block; | |||
} | |||
} | |||
.frb- | .frb--minimized .frb-message__maximized, | ||
.frb--minimized #frb-form, | |||
.frb--minimized .frb-rml { | |||
display: none; | |||
} | } | ||
/* --- Maybe later --- */ | |||
.frb-rml | .frb-rml { | ||
position: relative; | |||
width: auto; | |||
padding: 0; | |||
margin-top: 4px; | |||
} | |||
} | |||
.frb-rml-form | .frb-rml-form { | ||
display: none; | |||
position: absolute; | |||
} | width: 100%; | ||
padding: 16px; | |||
margin-top: 6px; | |||
text-align: center; | |||
background: white; | |||
border: 1px solid #888888; | |||
border-radius: 2px; | |||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); | |||
z-index: 10; | |||
} | |||
.frb-rml-form .frb-rml- | .frb-rml-form:after, | ||
.frb-rml-form:before { | |||
bottom: 100%; | |||
} | left: 50%; | ||
border: solid transparent; | |||
content: " "; | |||
height: 0; | |||
width: 0; | |||
position: absolute; | |||
pointer-events: none; | |||
} | |||
.frb-rml- | .frb-rml-form:after { | ||
border-bottom-color: #fff; | |||
border-width: 10px; | |||
margin-left: -10px; | |||
} | } | ||
.frb-rml-form:before { | |||
border-bottom-color: #888; | |||
border-width: 11px; | |||
margin-left: -11px; | |||
} | |||
.frb-rml-form input { | |||
width: 100%; | |||
padding: 8px; | |||
margin: 0; | |||
border: 1px solid #9aa0a7; | |||
border-radius: 2px; | |||
color: #000; | |||
direction: ltr; | |||
} | |||
.frb-rml-form input.error { | |||
border-color: #ff0000; | |||
box-shadow: inset 0 0 0 2px #ff0000; | |||
} | |||
.frb-rml-form .frb-rml-error { | |||
color: #ff0000; | |||
padding-top: 4px; | |||
} | |||
</div><!--frb-main--> | .frb-rml-ty { | ||
padding: 0 16px; | |||
text-align: center; | |||
cursor: default; | |||
} | |||
</style> | |||
<div class="frb" id="{{{banner}}}" style="display: none;"> | |||
<!-- hidden by default until have checked the cookies --> | |||
<div class="frb-main"> | |||
<div class="frb-controls"><span class="frb-close" tabindex="0"><span> { | |||
{ | |||
int: Centralnotice-close-title | |||
} | |||
} | |||
</span><svg class="frb-icon frb-icon-close" width="11" height="11" viewBox="0 0 11 11" | |||
xmlns="http://www.w3.org/2000/svg"> | |||
<title>icon-close</title> | |||
<g stroke="#000" fill="none" fill-rule="evenodd" stroke-linecap="round"> | |||
<path d="M2 3l7 7M9 3l-7 7" /> | |||
</g> | |||
</svg></span></div> | |||
<div class="frb-message"> | |||
<p class="frb-message__maximized"><svg class="frb-message-icon" role="img" | |||
aria-labelledby="frb-message-icon-title" width="25" height="25" viewBox="0 0 25 25" | |||
xmlns="http://www.w3.org/2000/svg"> | |||
<title id="frb-message-icon-title">Information icon</title> | |||
<g fill-rule="nonzero" fill="none"> | |||
<circle fill="#991B1E" cx="10.492" cy="14.492" r="10.492" /> | |||
<path | |||
d="M12.681 11.754l-2.267 7.864c-.125.45-.188.745-.188.885 0 .08.033.156.1.226.066.07.136.105.21.105.125 0 .25-.055.376-.165.332-.273.73-.767 1.194-1.482l.376.22c-1.113 1.94-2.296 2.91-3.55 2.91-.48 0-.86-.135-1.144-.404a1.349 1.349 0 0 1-.426-1.023c0-.273.062-.62.188-1.04l1.537-5.286c.147-.51.221-.892.221-1.15a.566.566 0 0 0-.21-.432c-.14-.125-.332-.188-.575-.188-.11 0-.243.004-.398.011l.144-.442 3.749-.609h.663zm-.685-5.087c.457 0 .842.159 1.156.475.313.318.47.701.47 1.15 0 .45-.16.834-.476 1.15-.317.318-.7.476-1.15.476-.443 0-.822-.158-1.14-.475a1.566 1.566 0 0 1-.475-1.15c0-.45.157-.833.47-1.15a1.549 1.549 0 0 1 1.145-.476z" | |||
fill="#FFF" /> | |||
</g> | |||
</svg><span class="frb-greeting">To all our readers in <span | |||
class="frb-replace-countryname">COUNTRY</span>, | |||
</span>We will get straight to the point: Today we ask you to help Wikipedia. To maintain our | |||
independence, | |||
we will never run ads. We depend on donations averaging about %AVERAGE%. Only a tiny portion of | |||
our readers give. <span class="frb-highlight">If everyone reading this gave %MINIMUM%, | |||
we could keep Wikipedia thriving for years to come.</span>The price of a coffee is all we | |||
need. When I made Wikipedia a non-profit, | |||
people warned me I’d regret it. Over a decade later, | |||
it’s the only top ten site run by a non-profit and a community of volunteers. Has it crossed my | |||
mind how much we could have made if it had ads? Sure. But it wouldn’t be the same. We wouldn’t | |||
be able to trust it. Most people ignore my messages. But I hope you’ll think about how useful it | |||
is to have unlimited access to reliable, | |||
neutral information. Please help keep Wikipedia online and growing. Thank you. — <i>Jimmy Wales, | |||
Wikipedia Founder</i></p> | |||
<p class="frb-message__minimized"><svg class="frb-message-icon" role="img" | |||
aria-labelledby="frb-message-icon-title" width="25" height="25" viewBox="0 0 25 25" | |||
xmlns="http://www.w3.org/2000/svg"> | |||
<title id="frb-message-icon-title">Information icon</title> | |||
<g fill-rule="nonzero" fill="none"> | |||
<circle fill="#991B1E" cx="10.492" cy="14.492" r="10.492" /> | |||
<path | |||
d="M12.681 11.754l-2.267 7.864c-.125.45-.188.745-.188.885 0 .08.033.156.1.226.066.07.136.105.21.105.125 0 .25-.055.376-.165.332-.273.73-.767 1.194-1.482l.376.22c-1.113 1.94-2.296 2.91-3.55 2.91-.48 0-.86-.135-1.144-.404a1.349 1.349 0 0 1-.426-1.023c0-.273.062-.62.188-1.04l1.537-5.286c.147-.51.221-.892.221-1.15a.566.566 0 0 0-.21-.432c-.14-.125-.332-.188-.575-.188-.11 0-.243.004-.398.011l.144-.442 3.749-.609h.663zm-.685-5.087c.457 0 .842.159 1.156.475.313.318.47.701.47 1.15 0 .45-.16.834-.476 1.15-.317.318-.7.476-1.15.476-.443 0-.822-.158-1.14-.475a1.566 1.566 0 0 1-.475-1.15c0-.45.157-.833.47-1.15a1.549 1.549 0 0 1 1.145-.476z" | |||
fill="#FFF" /> | |||
</g> | |||
</svg>If everyone reading this gave %MINIMUM%, | |||
we could keep Wikipedia thriving for years to come. </p> | |||
</div> | |||
<!--frb-message--> | |||
</div> | |||
<!--frb-main--> | |||
</div> | </div> |
Revision as of 13:37, 10 June 2022
<style>
/* Hide when editing */ .action-edit #centralNotice, .ve-activated #centralNotice { display: none !important; }
/* Border-Box */
.frb *, .frb *:before, .frb *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* Banner wide settings */
.frb input, .frb button { font-size: inherit; font-family: inherit; }
.frb button { cursor: pointer; outline: 0; text-align: center; }
/* --- Main banner wrapper --- */
.frb { display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 110; background: transparent; }
.frb { border-bottom: 1px solid #c8ccd1; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); color: #222; font-size: 16px; line-height: 1.1875; /*19px @16px*/ font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif; font-weight: 500; }
.frb.frb--minimized { position: fixed; }
/* --- Window Styles --- */
.frb-main { position: relative; display: table; width: 100%; padding: 16px 0 16px 8px; background-color: #FFFFFF; transition: background-color 0.5s ease; }
body.rtl .frb-main { padding: 16px 8px 16px 0; }
/* Minimized styles */ .frb--minimized { cursor: pointer; }
.frb--minimized .frb-main:hover { background-color: #eaf3ff; }
/* --- Close button --- */
.frb-controls { display: inline-block; position: absolute; right: 0; top: 0; z-index: 999; font-size: 12px; text-transform: uppercase; cursor: pointer; padding: 8px 16px; color: #72777d; }
body.rtl .frb-controls { right: auto; left: 0; }
.frb-close:hover { color: #000000; }
.frb-close:hover .frb-icon g { stroke: #000000; }
/* -------------- Message -------------- */
.frb-message { position: relative; display: table-cell; width: auto; vertical-align: top; border: 8px solid #990000; border-radius: 12px; background-color: #f8f9fa; padding: 16px 30px; color: #000; font-family: "Linux Libertine", Georgia, Times, serif; font-size: 16px; line-height: 1.4; /*22.4px @16px*/ transition: background-color 0.5s ease; }
@media (min-width: 900px) { .frb-message { font-size: 19px; } }
@media (min-width: 1100px) { .frb-message { font-size: 22px; } }
@media (min-width: 1300px) { html[lang="en"] .frb-message { font-size: 24px; } }
@media (min-width: 1500px) { .frb-message { font-size: 24px; } }
.frb-message-icon { float: left; margin-top: 0.07368421053em; /*1.4px @19px*/ margin-left: calc(-1em + -0.05263157895em); /*-19px + -1px @19px*/ height: 1em; width: 1em; }
body.rtl .frb-message-icon { float: right; margin-right: calc(-1em + -0.2105263158em); /*-19px + -4px @19px*/ }
.frb-message p { margin: 0; }
.frb-highlight { border-bottom: 3px solid #990000; }
/* Minimized styles */ .frb--minimized .frb-message { padding: 16px 10px 16px 30px; cursor: pointer; font-size: 16px; background-color: transparent; }
body.rtl .frb--minimized .frb-message { padding: 16px 30px 16px 10px; }
@media (min-width: 900px) { .frb--minimized .frb-message { font-size: 14px; } }
@media (min-width: 1050px) { .frb--minimized .frb-message { font-size: 16px; } }
@media (min-width: 1200px) { .frb--minimized .frb-message { font-size: 18px; } }
@media (min-width: 1300px) { .frb--minimized .frb-message { font-size: 22px; } }
/* -------------- Form -------------- */
.frb-form { display: table-cell; position: relative; width: 25%; min-width: 300px; height: 100%; vertical-align: middle; padding: 0 8px; background: #fff; }
/* Minimized styles */ .frb--minimized .frb-form { background-color: transparent; }
.frb-form:before { position: absolute; left: 0; top: 50%; content: " "; margin: -10px 0 0 0; border: 10px solid transparent; border-left-color: #990000; pointer-events: none; }
body.rtl .frb-form:before { left: auto; right: 0; border-left-color: transparent; border-right-color: #990000; }
.frb-form fieldset { width: 100%; border: 0; margin: 0 auto; padding: 0 0 8px 0; }
.frb-form fieldset+fieldset legend { border-top: 1px solid #CCC; }
.frb-form legend { position: relative; top: 0; width: calc(100% - 7px); margin: 0; padding: 14px 0 4px 0; font-weight: normal; line-height: 1.2; /*18px @15px*/ text-align: center; font-size: 15px; color: #696969; }
.frb-rml-form legend { font-size: 14px; font-weight: 500; color: #222; line-height: 1.3571428571; /*10px @14px*/ padding: 0 0 8px 0; }
@media (max-width: 1400px) {
fieldset.frb-frequency legend { padding: 14px 15px 4px; }
}
.frb-form fieldset:first-of-type legend { padding-top: 0; }
.frb-form fieldset+fieldset legend:after, .frb-form fieldset+fieldset legend:before { top: -1px; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.frb-form fieldset+fieldset legend:after { border-color: rgba(255, 255, 255, 0); border-top-color: #FFFFFF; border-width: 9px; margin-left: -9px; }
.frb-form fieldset+fieldset legend:before { border-color: rgba(204, 204, 204, 0); border-top-color: #ccc; border-width: 10px; margin-left: -10px; }
.frb-form ul { display: table; table-layout: fixed; width: 100%; margin: 0; padding: 0; list-style: none; }
.frb-amounts ul:first-child { margin-bottom: 3px; }
.frb-form li { display: table-cell; vertical-align: top; padding-left: 4px; }
.frb-form li:first-child { padding-left: 0; }
.frb-form .frb-methods li { padding: 4px !important; }
#frb-form { margin-top: 12px; }
/* --- Common Button Styles --- */
/* Hide radio buttons */ .frb-form .frb-methods input[type="radio"], .frb-amt-other input[type="radio"] { position: absolute; overflow: hidden; height: 1px; width: 1px; clip: rect(0 0 0 0); border: 0; margin: -1px; padding: 0; }
.frb-btn { width: 100%; height: 48px; display: block; background-color: #f8f9fa; color: #222222; font-size: 16px; line-height: 1.25; /*20px @16px*/ padding: 13px 4px 15px 4px; border: 1px solid #9aa0a7; border-radius: 2px; 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; }
.frb-btn:hover { background-color: #fff; color: #444; border-color: #a2a9b1; }
.frb-btn:active { background-color: #d9d9d9; color: #000; border-color: #7d8389; }
.frb-form input[type=radio]:checked+.frb-btn { background-color: #2a4b8d; color: #fff; border-color: #7d8389; }
.frb-radio, .frb-radio-label { font-size: 16px; line-height: 1.375; /*22px @16px*/ }
.frb-radio { float: left; margin: 8px 6px; }
.frb-radio-label { cursor: pointer; display: block; white-space: nowrap; font-weight: bold; padding: 6px 2px; }
.frb-frequency .frb-radio-label { font-size: 16px; line-height: 1.375; /*22px @16px*/ }
/* Focus styles */
.frb-form input[type=radio]:focus { outline: 0; }
.frb a:focus, .frb button:focus, .frb-radio:focus+.frb-radio-label, .frb-btn:focus, .frb-close:focus, .frb-btn-submit:focus, .frb-form input[type=radio]:focus+.frb-btn, .frb-form input[type=radio]:focus+#frb-amt-other-label, #frb-amt-other-input:focus { outline: 0; border-color: #36c !important; box-shadow: inset 0 0 0 1px #36c; }
.frb-form input[type=radio]:focus+.frb-btn, .frb-form input[type=radio]:focus+#frb-amt-other-label, .frb-form input[type=radio]:checked+.frb-btn:focus, .frb-form input[type=radio]:checked+#frb-amt-other-label:focus, .frb-form .frb-btn-submit:focus { box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff; }
.frb-btn img { padding: 0 4px; max-width: 100%; max-height: 20px; /*must equal font line height of frb-btn*/ }
.frb-methods .frb-btn { height: 64px; line-height: 1.125; /*18px @16px*/ }
.frb-methods svg { max-width: 100%; }
.frb-methods .frb-pm-cc .frb-btn { padding: 7px 4px }
.frb-methods .frb-pm-cc svg { max-width: 30%; }
.frb-country-GB .frb-methods .frb-pm-cc svg, .frb-country-IE .frb-methods .frb-pm-cc svg { max-width: 38%; max-height: 24px; }
.frb-country-US .frb-methods .frb-pm-cc svg, .frb-country-AU .frb-methods .frb-pm-cc svg { max-width: 45%; max-height: 23px; }
@media (min-width: 1800px) {
.frb-country-US .frb-methods .frb-pm-cc svg, .frb-country-AU .frb-methods .frb-pm-cc svg { max-width: 22%; } }
.frb-country-US .frb-logo-jcb, .frb-country-CA .frb-logo-jcb, .frb-country-NZ .frb-logo-jcb, .frb-country-AU .frb-logo-discover, .frb-country-CA .frb-logo-discover, .frb-country-GB .frb-logo-discover, .frb-country-IE .frb-logo-discover, .frb-country-NZ .frb-logo-discover { display: none; }
/* Blue text buttons */ .frb-btn.frb-btn-btxt { color: #3366cc; }
.frb-btn.frb-btn-btxt:active { color: #2a4b8d; }
/* Submit/Continue buttons (blue background) */ .frb-btn-submit { width: 100%; display: block; margin-top: 8px; padding: 8px; color: #fff; background-color: #3366cc; border-color: #3366cc; cursor: pointer; border: 0; border-radius: 2px; font-size: 16px; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
.frb-btn-submit:hover { background-color: #447ff5; border-color: #447ff5; }
.frb-btn-submit:active { background-color: #2a4b8d; border-color: #2a4b8d; box-shadow: none; }
/* --- Other Amount --- */
.frb-amt-other-label { display: none; }
.frb-amt-other .frb-btn { display: inline-block; width: 100%; padding: 2px 0 3px 0; }
.frb-amt-other span { display: block; height: auto; margin-bottom: 1px; font-size: 10px; line-height: 1; /*10px @16px*/ cursor: pointer; }
.frb-amt-other #frb-amt-other-input { width: 100%; border: 1px solid #ccc; color: #555; font-size: 16px; padding: 7px 2px; border-radius: 0; direction: ltr; text-align: center; font-family: inherit; }
/* --- Payment method Buttons --- */
/* Hide methods which aren't monthly capable when monthly option is selected */ .form-monthly .no-monthly { display: none !important; }
.frb-form .frb-methods { padding-bottom: 0; }
/* Only where there are 4 methods, display 2x2 */ .frb-methods ul li:first-child:nth-last-child(4), .frb-methods ul li:first-child:nth-last-child(4)~li { float: left; width: 50%; }
.frb-methods ul li:first-child:nth-last-child(4) .frb-btn, .frb-methods ul li:first-child:nth-last-child(4)~li .frb-btn { height: 48px; padding: 13px 4px 15px 4px; }
/* --- Secure Transaction Legend --- */ .frb-secure-transaction { display: block; padding: 5px 12px; margin: 0 auto; color: #000; font-size: 12px; text-transform: uppercase; text-align: center; opacity: .7; }
.frb-secure-transaction img { width: 14px; height: 14px; display: inline-block; }
/* --- Footer / Small Print --- */ .frb-footer { padding: 0 24px 6px; font-size: 12px; color: #555; text-align: center; display: none; font-weight: normal; }
.frb:hover .frb-footer { display: block; }
/* Minimized styles */ .frb.frb--minimized:hover .frb-footer { display: none; }
/* --- Show and Hiding (Minimize and Maximize) --- */ .frb-btn-toggle-size { display: none; /*shows when minimized*/ width: 100%; font-size: 16px; background-color: #2a4b8d; color: #fff; border-color: #2a4b8c; transition: color 0.5s ease; text-transform: uppercase; font-weight: bold; letter-spacing: 0.0375em; /*0.6px @16px*/ }
.frb-btn-toggle-size:hover, .frb-btn-toggle-size:focus { background-color: #2a4b8d; border-color: #2a4b8c; color: #eaf3ff; }
/*Minimized styles*/ .frb--minimized .frb-btn-toggle-size { display: block; margin: 0 auto; width: 97%; }
.frb--minimized:hover .frb-btn-toggle-size { color: #eaf3ff; }
/* Messages */ .frb-message__minimized { display: none; }
.frb-message__maximized { display: block; }
.frb-greeting { display: block; margin-bottom: 4px; }
/* Minimized styles */ .frb--minimized .frb-message__minimized { display: block; }
.frb--minimized .frb-message__maximized, .frb--minimized #frb-form, .frb--minimized .frb-rml { display: none; }
/* --- Maybe later --- */
.frb-rml { position: relative; width: auto; padding: 0; margin-top: 4px; }
.frb-rml-form { display: none; position: absolute; width: 100%; padding: 16px; margin-top: 6px; text-align: center; background: white; border: 1px solid #888888; border-radius: 2px; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); z-index: 10; }
.frb-rml-form:after, .frb-rml-form:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.frb-rml-form:after { border-bottom-color: #fff; border-width: 10px; margin-left: -10px; }
.frb-rml-form:before { border-bottom-color: #888; border-width: 11px; margin-left: -11px; }
.frb-rml-form input { width: 100%; padding: 8px; margin: 0; border: 1px solid #9aa0a7; border-radius: 2px; color: #000; direction: ltr; }
.frb-rml-form input.error { border-color: #ff0000; box-shadow: inset 0 0 0 2px #ff0000; }
.frb-rml-form .frb-rml-error { color: #ff0000; padding-top: 4px; }
.frb-rml-ty { padding: 0 16px; text-align: center; cursor: default; }
</style>