MediaWiki:Centralnotice-template-Fundraiser: Difference between revisions

From Imperivm Romanvm
Jump to navigation Jump to search
No edit summary
Tag: Central Notice
No edit summary
Tag: Central Notice
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<!-- Large desktop banner. Must be used with "Large banner limit and switch" mixin -->
<div style="width:100%; background-color:red;">HEllo</div>
<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>
<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>

Latest revision as of 13:39, 10 June 2022

HEllo
Retrieved from "https://wiki.imperivm-romanvm.com/index.php?title=MediaWiki:Centralnotice-template-Fundraiser&oldid=1593"