MediaWiki:Centralnotice-template-Fundraiser
Revision as of 13:37, 10 June 2022 by Procurator-Imperii-Romani (talk | contribs)
<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>