/* Donation Panel for various donation options*/ /* ---------- */ /* 1. General */ #donation-panel { width: 350px; background: white; border-radius: 8px; padding: 25px; } #donation-panel .headline { background: white; border: 1px solid #bbb; padding: 6px 5px; border-radius: 10px; margin: 29px -2px 24px; font-size: 20px; text-align: center; } #donation-panel > div:first-child > .headline { margin-top: 1px; } /* --------- */ /* 2. Crypto */ #donation-panel .crypto .payitem.line { font-size: 0; margin: 15px 0; position: relative; } #donation-panel .crypto .payitem * { vertical-align: middle; } #donation-panel .crypto .payitem.line .qr-button { display: inline-block; width: 58%; } #donation-panel .crypto .payitem .qr-button .icon { margin-right: 7px; height: 26px; } #donation-panel .crypto .payitem .expand-checkbox { opacity: 0; position: absolute; left: 0; top: 0; width: 58%; height: 30px; cursor: pointer; z-index: 10; } #donation-panel .crypto .payitem .qr-button .name { font-size: 20px; line-height: 30px; } #donation-panel .crypto .payitem .qr-button .name:before { content: ''; height: 25px; width: 25px; display: inline-block; background-image: url('/w/images/c/ca/Qr-logo-v2.png'); background-size: 23px; background-repeat: no-repeat; vertical-align: middle; margin-right: 5px; } #donation-panel .crypto .payitem .qr-button .name:after, #donation-panel .crypto .payitem.symbols .qr-button:after { content: '▼'; height: 25px; width: 15px; display: inline-block; margin-left: 4px; font-size: 14px; } #donation-panel .crypto .payitem .qr-button .name:after { position: relative; top: -2px; } #donation-panel .crypto .payitem.line .code-select { display: inline-block; width: 42%; padding-left: 13px; padding-right: 38px; } #donation-panel .crypto .payitem.line .code-select:not(.js-fully-loaded), #donation-panel .crypto .payitem.line .code-select .code { overflow: hidden; text-overflow: ellipsis; } #donation-panel .crypto .payitem.line .code-select .cbutton { left: unset; right: 8px; } #donation-panel .crypto .payitem.line .code-select .tooltip2 { left: unset; right: -1px; } #donation-panel .crypto .payitem.line .code-select .tooltip2:after { left: unset; right: 14px; } #donation-panel .crypto .payitem .expand { display: none; font-size: initial; text-align: center; } #donation-panel .crypto .payitem .expand a { word-break: break-word; } #donation-panel .crypto .payitem .expand-checkbox:checked ~ .expand { display: block; } #donation-panel .crypto .payitem .expand-checkbox:hover ~ .qr-button .icon { transform: scale(1.2); } #donation-panel .crypto .payitem .expand .qr-code-image { width: 100%; height: auto; } #donation-panel .crypto .payitem .expand div { font-weight: bold; } #donation-panel .crypto .payitem .expand pre { overflow: auto; margin-bottom: 35px; } #donation-panel .crypto .payitem.symbols { position: relative; margin-top: 22px; } #donation-panel .crypto .payitem.symbols .qr-button { width: max-content; margin: auto; } #donation-panel .crypto .payitem.symbols .expand-checkbox { width: 100%; } #donation-panel .crypto .payitem.symbols .qr-button .icon:last-child { margin-right: 0; } /* --------- */ /* 3. PayPal */ #donation-panel .paypal .headline img { width: 100px; margin-left: 3px; } #donation-panel .paypal .account-info { text-align: center; display: block; margin-bottom: 2px; font-size: 12px; color: #0645ad; } #donation-panel .paypal .submit { margin-bottom: 0; } /* more see: Mediawiki:PayViaPaypal.css */ /* -------- */ /* 4. Other */ #donation-panel .other .content { font-size: 0; text-align: center; } #donation-panel .other .content a { display: inline-block; } #donation-panel .other .content a img { width: 54px; margin: 0 4px 6px;; } #donation-panel .other .content a img:hover { transform: scale(1.2); } #donation-panel .other .more { position: relative; } #donation-panel .other .more .expand-checkbox { position: absolute; top: 0; left: 0; width: 100%; height: 30px; opacity: 0; cursor: pointer; } #donation-panel .other .more .more-button { font-size: 18px; margin-top: 10px; color: #555; padding-bottom: 3px; } #donation-panel .other .more .expand-checkbox:hover ~ .more-button { color: black; background: #f8f8f8; } #donation-panel .other .more .expand-checkbox:checked, #donation-panel .other .more .expand-checkbox:checked ~ .more-button { display: none; } #donation-panel .other .more .expand-checkbox:checked ~ .more-content { display: block; } #donation-panel .other .more .more-content { display: none; padding-top: 20px; } #donation-panel .other .more .more-content a img { width: 69px; } #donation-panel .other .more .more-content .spacer { height: 25px; } #donation-panel .other .more .more-content p { margin: 0; } /* ------- */ /* 5. Help */ #donation-panel .help .content { text-align: center; } #donation-panel .help a { color: #0645ad; } /* ------- */ /* 6. Info */ #donation-panel .info { border-top: 1px solid #ccc; margin: 30px 0 5px; padding: 7px 1px 0; color: #777; font-size: 11px; text-align: justify; } #donation-panel .info a { font-size: 11px; color: #444; } /* [[Category:MultiWiki]] */