/* CSS styling for our custom footer See detailed documentation in Dev/mediawiki */ /* ---------------------------------- */ /* 0. Boilerplate and auto-gen footer */ #footer-places-privacy, #footer-places-about, #footer-places-disclaimers { display: none; } .mw-footer-container { display: none; } /* ----------------- */ /* 1. Footer General */ #custom-footer { background: linear-gradient( 90deg, #333, #5a5a5a, #5a5a5a, #333); color: white; left: 0; margin-top: 20px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw + 8px); } #custom-footer > p { display: none; } /* 1.1. Structure */ #custom-footer .content-wrapper { max-width: 960px; margin: auto; padding: 30px 20px; display: flex; } #custom-footer > .content-wrapper > .left { width: calc( 24% - 20px ); } #custom-footer > .content-wrapper > .middle { width: calc( 38% - 20px ); } #custom-footer > .content-wrapper > .right { width: calc( 38% - 20px ); } #custom-footer > .content-wrapper > :not(:last-child) { margin-right: 30px; } @media ( max-width: 750px ) { #custom-footer > .content-wrapper { display: block; } #custom-footer > .content-wrapper > * { width: 80% !important; margin: auto !important; } } /* 1.2. Icon Link */ #custom-footer .icon-link { display: inline-block; position: relative; width: 28px; height: 28px; margin: 0 5px 5px 0; } #custom-footer .icon-link:last-child { margin-right: 0; } #custom-footer .icon-link img { box-shadow: 2px 2px 3px rgba(0,0,0,.3); border-radius: 50%; object-fit: contain; width: 100%; height: 100%; } #custom-footer .icon-link:hover img { transform: scale(1.2); } /* 1.3. Sub Headlines */ #custom-footer > .content-wrapper :not(.main-claim ) > .headline { font-weight: bold; border-bottom: 1px solid white; margin-bottom: 14px; padding-bottom: 9px; } @media ( max-width: 750px ) { #custom-footer > .content-wrapper :not(.main-claim ) > .headline { margin-top: 14px; } } /* -------- */ /* 2. Claim */ #custom-footer .main-claim { padding-bottom: 23px; } #custom-footer .main-claim, #custom-footer .main-claim > * { width: 100%; display: block; } #custom-footer .main-claim > .headline { font-size: 25px; font-weight: bold; line-height: 1em; margin-bottom: 8px; } #custom-footer .main-claim .headline .share-tooltip > * { font-size: 16px !important; } #custom-footer .main-claim .headline .share-tooltip .button { filter: brightness(2); border-radius: 0; background-position: left; margin-top: 5px; } /* ------------------- */ /* 3. Dark Mode switch */ #custom-footer .dark-mode-switch { border: 1px solid #ccc; padding: 8px; width: fit-content; border-radius: 6px; color: #ccc; } @media ( max-width: 750px ) { #custom-footer .dark-mode-switch { position: relative; top: -6px; } } #custom-footer .dark-mode-switch:hover { background: #7f7f7f; } #custom-footer .dark-mode-switch .ext-darkmode-link { color: #ccc; font-size: 14px; padding-left: 25px; position: relative; text-decoration: none; } #custom-footer .dark-mode-switch .ext-darkmode-link:before { position: absolute; left: 4px; font-size: 22px; top: -8px; } html.client-darkmode #custom-footer .dark-mode-switch .ext-darkmode-link:before { left: 1px; font-size: 25px; top: -13px; } /* --------------- */ /* 4. Social Media */ #custom-footer .social { padding-bottom: 15px; } #custom-footer .social .text { margin-bottom: 15px; } /* -------------- */ /* 5. Open Source */ #custom-footer .opensource { font-size: 12px; } @media ( max-width: 750px ) { #custom-footer .opensource { margin-top: 20px; } } #custom-footer .opensource:after { content: ""; clear: both; display: block; } #custom-footer .opensource .images { display: inline-block; float: left; margin-right: 12px } #custom-footer .opensource > .images > a { border: none; display: inline-block; background: white; border-radius: 5px; padding: 3px 7px; width: 60px; } #custom-footer .opensource > .images a:hover { transform: scale(1.2); box-shadow: 0px 0px 6px 3px rgb( 0 0 0 / 20% ); } #custom-footer .opensource > .images > a:first-child { margin-right: 10px; padding: 6px 7px 7px; width: 63px; } #custom-footer .opensource > .images img { height: 55px; } #custom-footer .opensource > .images > a:first-child img { height: 48px; } /* -------- */ /* 6. Legal */ #custom-footer .legal { color: #ababab; margin: 18px auto 0; max-width: 750px; } #custom-footer .legal > span { display: block; font-size: 12px; } #custom-footer .legal a { color: #008CBA !important; } #custom-footer .legal .disclaimer { line-height: 1.4em; margin-bottom: 10px; } #custom-footer .legal .rights { color: #ababab; font-size: 14px; } #custom-footer .legal .rights img { height: 20px; vertical-align: text-bottom; margin-left: 1px; } #custom-footer .legal .rights img:hover { transform: scale(1.3); } /* [[Category:MultiWiki]] */