/* CSS styling for fully JS EndofYear Sitenotice, init events etc See detailed documentation in Dev/mediawiki */ html.client-nojs #donate-end-of-year { display: none !important; } #donate-end-of-year { height: 415px; border: 4px solid #fff; border-radius: 15px; max-width: 1000px; margin: 0 auto; background: #f6f5f4; box-shadow: 2px 2px 4px rgb(0 0 0 / 10%); } #donate-end-of-year .h1 { text-align: center; font-size: 21px; margin-bottom: 15px; color: white; background-color: #0080cf; padding: 10px 40px 10px 20px; border-radius: 12px 12px 0 0; position: relative; } #donate-end-of-year .h1 .dismiss { position: absolute; right: 20px; top: 12px; color: white; opacity: .7; cursor: pointer; } #donate-end-of-year .h1 .dismiss:hover { opacity: 1; } #donate-end-of-year .h2 { font-size: 18px; color: white; font-weight: bold; background: #c3c3c3; text-align: center; padding: 7px 0; border-radius: 8px 0 0 8px; } /* Slides */ #donate-end-of-year .slideshow { width: calc( 100% - 270px ); display: inline-block; vertical-align: top; margin-right: 9px; padding: 0 50px 0; text-align: justify; color: #555; position: relative; font-size: 19px; } #donate-end-of-year .slideshow .content { display: table-cell; vertical-align: middle; } #donate-end-of-year .slideshow .content > :not(.active) { display: none; } #donate-end-of-year .slideshow .content i { font-size: 64px; float: left; margin-right: 25px; padding: 8px 12px; } #donate-end-of-year .slideshow .control { text-align: center; width: max-content; margin: 5px auto 15px; } #donate-end-of-year .slideshow .progress { display: block; height: 3px; width: 0; background: white; box-shadow: 1px 1px 3px rgb(0 0 0 / 10%); margin-bottom: 6px; } #donate-end-of-year .slideshow .slide-buttons { display: inline-block; } #donate-end-of-year .slideshow .slide-buttons span { display: inline-block; width: 13px; height: 13px; background-color: #fff; box-shadow: 1px 1px 3px rgb(0 0 0 / 20%); border-radius: 100px; margin: 0 8px; cursor: pointer; } #donate-end-of-year .slideshow .slide-buttons span:hover, #donate-end-of-year .slideshow .slide-buttons span.active { background-color: #32b1ff; } #donate-end-of-year .slideshow .flow { text-shadow: 2px 2px rgb(0 0 0 / 10%); color: #32b1ff; margin-left: 10px; display: inline-block; } #donate-end-of-year .slideshow .flow i:not(.active) { display: none; } #donate-end-of-year .slideshow .flow i { cursor: pointer; } #donate-end-of-year .slideshow .flow i:hover { transform: scale(1.1); } /* Payment */ #donate-end-of-year .payment { width: 250px; display: inline-block; position: relative; opacity: 0; } #donate-end-of-year .pay-via-paypal-module span { padding: 1px 0; } #donate-end-of-year .pay-via-paypal-module .error { font-size: 14px; } #donate-end-of-year .pay-via-paypal-module .amount, #donate-end-of-year .pay-via-paypal-module .interval { margin-bottom: 5px; } #donate-end-of-year .pay-via-paypal-module .submit { margin: 0 0 12px; } #donate-end-of-year .payment .h2.crypto { display: inline-block; font-weight: normal; font-size: 14px; line-height: 18px; padding: 8px 7px; position: absolute; right: 0; } #donate-end-of-year .payment .crypto-container { text-align: center; margin: 16px 73px 0 0; height: 38px; } #donate-end-of-year .payment .crypto-container > div { margin: 0 5px; } #donate-end-of-year .payment a { color: #0080cf; text-decoration: none; padding: 3px 5px 4px; display: block; text-align: center; border-radius: 5px; font-size: 14px; border: 1px solid #93b3cf; margin: 20px auto 9px; width: 100%; } #donate-end-of-year .payment a:hover { border-color: #024ca1; color: #024ca1; } /* Mobile */ #donate-end-of-year .content .mobile-donate-button { display: block; text-align: center; background: #32b1ff; color: white; font-weight: bold; width: max-content; margin: 20px auto; padding: 2px 16px; cursor: pointer; border-radius: 3px; } #donate-end-of-year .content .mobile-donate-button:hover { background: #009eff; } @media (max-width: 820px) { #donate-end-of-year .slideshow .content { font-size: 17px; } } @media (max-width: 730px) { #donate-end-of-year .slideshow { padding-top: 11px; } } @media (max-width: 660px ) { #donate-end-of-year { height: 335px; } #donate-end-of-year .h1 { font-size: 18px; } #donate-end-of-year .h2 { border-radius: 8px; } #donate-end-of-year .payment .h2.crypto { margin-top: -5px; } #donate-end-of-year .slideshow { width: 100%; padding-left: 25px; padding-right: 25px; } #donate-end-of-year .slideshow .content { font-size: 16px; } #donate-end-of-year .payment { width: 92%; margin: 10px auto 20px; display: none; } } @media (max-width: 550px ) { #donate-end-of-year .slideshow .content { font-size: 14px; } } @media (max-width: 450px ) { #donate-end-of-year { height: 380px; } } /* [[Category:MultiWiki]] */