/* Custom Header - CSS styling See detailed documentation in Dev/mediawiki */ /* ---------- */ /* 1. General */ #custom-header { position: fixed; /* makes position: fixed work on old mobile web browsers */ -webkit-backface-visibility: hidden; height: 50px; top: 0; left: 0; width: 100vw; z-index: 1000; } #custom-header .style-wrapper { width: 100%; max-width: 960px; background: transparent; margin: auto; height: 100%; position: relative; } #custom-header .style-wrapper > * { vertical-align: top; } /* 1.1. Header related page styles */ .mw-notification { top: 100px; border-color: #ddd; box-shadow: 2px 2px 5px rgba(0,0,0,.1); border-radius: 8px; } /* 1.2. Header Menu (nav-menu and super-menu) */ #custom-header .header-menu > .menu-trigger { width: 50px; height: 50px; position: absolute; opacity: 0; z-index: 10; } #custom-header .header-menu > .menu-button > img { display: none; width: 36px; height: 53px; margin-left: 7px; padding: 0 5px; object-fit: contain; object-position: 0 12px; } #custom-header .header-menu > .menu-button > img:hover { filter: brightness(0); } #custom-header .header-menu { display: inline-block; } #custom-header .header-menu > .menu-content { display: inline; vertical-align: top; position: relative; } #custom-header .super-menu .menu-trigger { cursor: pointer; } /* For JS: NO menu trigger checkbox used */ html.client-js #custom-header .header-menu .menu-trigger { display: none; } html.client-nojs #custom-header .header-menu .menu-trigger:hover + .menu-button > img, html.client-js #custom-header .header-menu .menu-button:hover > img { filter: brightness(0); transform: scale( 1.2 ); } html.client-nojs #custom-header .header-menu > .menu-trigger:not(:checked) + .menu-button img.off, html.client-nojs #custom-header .header-menu > .menu-trigger:checked + .menu-button img.on, html.client-js #custom-header .header-menu:not(.active) .menu-button img.off, html.client-js #custom-header .header-menu.active .menu-button img.on { display: inline-block; } html.client-nojs #custom-header .header-menu > .menu-trigger:checked ~ .menu-content, html.client-js #custom-header .header-menu.active .menu-content { display: block; } /* ------------ */ /* 2. Logo left */ #custom-header a.home { position: relative; height: 50px; display: inline-block; vertical-align: top; } #custom-header a.home:hover { transform: scale(1.1); } /* ------------ */ /* 3. Register symbol */ #custom-header a.register-symbol { position: relative; height: 50px; display: inline-block; vertical-align: top; font-size: 20px; /* Adjust as needed */ text-decoration: none; color: black; /* Adjust color as needed */ } #custom-header a.register-symbol:hover { transform: scale(1.2); color: blue; /* Adjust hover color as needed */ } @media(min-width: 806px) { #custom-header a.register-symbol { margin-left: -12px; } } @media(max-width: 806px) { #custom-header a.register-symbol { margin-left: -5px; } } /* ------------ */ /* 4. Menu left */ #custom-header .nav-menu > .menu-button { display: none; } #custom-header .nav-menu .menu-content > div { display: inline-block; position: relative; } #custom-header .nav-menu .menu-content > div > .button { height: 53px; cursor: pointer; display: inline-block; color: #333; text-decoration: none; } #custom-header .nav-menu .menu-content > div > a.button:hover { transform: scale(1.1); } #custom-header .nav-menu .menu-content > div > .menu { display: none; position: absolute; top: 50px; background: #e0e0e0; padding: 10px 0; column-count: 2; column-gap: 1px; column-rule: 1px solid #858585; width: max-content; border-radius: 0 0 10px 10px; border: 1px solid #aaa; border-width: 0 1px 1px 1px; max-width: 450px; } #custom-header .nav-menu .menu-content > div > .button:hover + .menu, #custom-header .nav-menu .menu-content > div > .menu:hover { display: block; } #custom-header .nav-menu .menu-content > div > .menu > a { display: flex; align-items: flex-start; font-size: 16px; padding: 1em 1.4em; color: #333; line-height: 1.4em; text-decoration: none; break-inside: avoid; overflow: hidden; } #custom-header .nav-menu .menu-content > div > .menu > a > i { width: 1em; height: 1em; margin-right: 1em; flex-shrink: 0 } #custom-header .nav-menu .menu-content > div > .menu > a:hover { background: #eee; } /* ------------- */ /* 5. Menu right */ #custom-header .menu-right { display: inline-block; float: right; height: 52px; } #custom-header .menu-right > * { vertical-align: top; } /* ----------- */ /* 6. Search */ #custom-header .search {FONT-WEIGHT width: 30px; height: 50px; display: inline-block; cursor: pointer; text-align: center; } #custom-header .search > img { width: 26px; height: auto; position: relative; top: 11px; } #custom-header .search:hover img { transform: scale(1.1); filter: brightness(0); } /* --------------- */ /* 7. Super Menu */ #custom-header .super-menu { width: 50px; height: 52px; display: inline-block; position: relative; } #custom-header .super-menu .menu-content { padding: 0 10px 20px; width: max-content; position: absolute; right: -136px; top: 50px; text-align: left; border-radius: 0 0 10px 10px; border-top: none; display: none; } #custom-header .super-menu .menu-content > * { display: inline-block; vertical-align: top; padding: 0 3px; } #custom-header .super-menu .menu-content > * > * { display: block; padding: 4px 8px 3px 30px; text-decoration: none; color: #555; position: relative; } #custom-header .super-menu .menu-content > * > *:before { position: absolute; font-family: "Font Awesome 6 Free"; font-weight: 900; top: 3px; left: 0; width: 29px; text-align: center; } #custom-header .super-menu .menu-content > * > .headline { background: #f0f0f0; border-radius: 4px; cursor: default; padding: 8px 0 9px; padding-bottom: 9px; margin: 5px 3px; text-align: center; } #custom-header .super-menu .menu-content .headline.user { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: pre; } #custom-header .super-menu .menu-content > * > *:not(.headline):hover { color: black; } #custom-header .super-menu a i { position: absolute; left: 2px; top: calc( 50% - 7px ); width: 20px; display: inline-block; text-align: center; } /* ----------------------- */ /* 7.1. User not logged in */ body:not(.user-logged-in) #custom-header .super-menu .user-logged-in { display: none; } body.user-logged-in #custom-header .super-menu .user-logged-out { display: none; } body.user-logged-in #custom-header .super-menu .headline.user { background-color: #c2dff9; } body.page-is-watched #custom-header .super-menu .watch { display: none; } body:not(.page-is-watched) #custom-header .super-menu .unwatch { display: none; } /* ---------------- */ /* 8. Donate button */ #custom-header .donate { height: 40px; font-weight: bold; line-height: 40px; color: #686868; text-decoration: none; display: inline-block; text-align: center; margin-top: 5px; } #custom-header .donate:hover { background-size: 32px !important; background-color: #f8f8f8 !important; color: black !important; } #custom-header .donate img { width: 27px; position: relative; } /* ---------------- */ /* 9. Media Queries */ @media( max-width: 840px ) { #custom-header .nav-menu > div > .menu { max-width: 350px; } #custom-header .nav-menu > div > .menu > a { font-size: 14px; } } @media (max-width: 700px) { #custom-header .nav-menu > .menu-button { display: inline-block; } #custom-header .nav-menu > .menu-content { position: fixed; left: 0; top: 50px; overflow: hidden; display: none; width: 100%; background: #e0e0e0; border-width: 0 1px 1px; height: calc(100% - 50px); } #custom-header .nav-menu > .menu-content > div { padding: 0 15px; width: 100%; display: block; margin: 0; } #custom-header .nav-menu > .menu-content > div > .button { border-bottom: 1px solid #858585; font-weight: bold; height: 30px; padding: 0 0 0 4px; } #custom-header .nav-menu > .menu-content > div > .menu { max-width: unset; display: block; width: 100%; position: static; border: none; } #custom-header .nav-menu > .menu-content > div > .menu > a { padding: .3em .4em; } } @media (max-width: 460px) { #custom-header a.home { font-size: 16px; } #custom-header .search { background-position-x: 2px; } #custom-header div.super-menu { width: 34px; } #custom-header div.super-menu .menu-button { background-position: 4px 17px; } #custom-header .super-menu .menu-content { right: -114px; } #custom-header .super-menu .menu-content > * { padding: 0 !important; } #custom-header .super-menu .menu-content > * > * { font-size: 13px; margin-top: 7px; margin-bottom: 7px; } } /* [[Category:MultiWiki]] */