MediaWiki:Gadget-logoInHeader.css

:root {
  /* wikigg original */
  --topbar--height--base: 35px;
  --hostlogo--height--base: 25px;
  /* local customization */
  --topbar--height--big: 3.5rem;
  --hostlogo--height--big: 2.0rem;
  --topbar--height: var(--topbar--height--base);

  --sitelogo--maxwidth: 70vw;
  --sitelogo--maxheight: 5rem;
  --sitelogo--blur-onetenth: 0;
  --sitelogo-to-header--scale: 0.85;
  --sitelogo-to-header--scale: 1.5;
  --sitelogo--margin: 0.5em;
  --sitelogo--margin: 3px;

  --topbar--blur-onetenth: 7;
  --topbar--opacity: 20%;

  --sitelogo--height: min( var(--sitelogo--maxheight) , var(--sitelogo--maxwidth) / var(--sitelogo--aspectratio) );
  --sitelogo--height--inheader: var(--topbar--height--big);

  --theme--bgcolor: #3f3d50;
  --theme--bgcolor: #434153c0;
  --theme--bgcolor: #434153;  /* ingame header color */
  --topbar--bgcolor: #000538;  /* wikigg branding color required by host */
  --sitelogo--shadowcolor: var(--theme--bgcolor);
  --sitelogo--shadowcolor: hsl(200 50% 43% / 1);
  --sitelogo--shadowcolor: hsl(200 50% 35% / 1);
  --sitelogo--opacity: 1;
  --topbar--shadowcolor: var(--topbar--bgcolor);

  --sitelogo--image: var( --theme-site-logo-image , url(/images/e/e6/Site-logo.png) );
  --sitelogo--aspectratio: (912 / 158);  /* wide-webbed.png */
  --sitelogo--aspectratio: (841 / 139);  /* Site-logo.png */
  --topbar--borderimage: url(https://enshrouded.wiki.gg/images/5/57/WebUI-Header_Border.png);
  --topbar--bgimage: url(/images/c/c5/WebUI-Header_Background.png);
  --topbar--bgimage: url(/images/2/2b/WebUI-Infobox_Background.png);
}
:root {
  --topbar--height: var(--topbar--height--big);
  --logo--transition-delay: 300ms;
}
:root.theme-dark {
  /* --sitelogo-to-header--scale: 1; */
  /* --sitelogo--margin: 0.1em; */
  /* Pass sizes to original dark theme with precedence */
  --layout-topbar-height: var(--topbar--height);
  --layout-logo-scale: "Do not use, can't calculate";
  --layout-logo-box-height: calc( var(--sitelogo--height) + 2 * var(--sitelogo--margin) );
}
/* :root:has( #wikigg-header:is(:hover, :focus-within) ), */
:root:has( #mw-head:is(:hover, :focus-within) )  #wikigg-header {
  /* --sitelogo-to-header--scale: 1; */
  --sitelogo--opacity: 0.4;
  --logo--transition-delay: 0ms;
}




html {
  scroll-padding-top: calc( var(--topbar--height) + 2em );
}


/* TODO remove when fixed at wikigg */
body.theme-stylus header#wikigg-header {
  font-family: nunito, Helvetica, Arial, sans-serif;
}


/**/
header#wikigg-header::before {
  /* background-color: var(--topbar--bgcolor); */
  -background-image: var(--topbar--bgimage);
  background-position-y: bottom;
  background-repeat: repeat;
  filter: blur(calc( var(--topbar--blur-onetenth) * 0.1px ));
  opacity: var(--topbar--opacity);
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
}
/**/

header#wikigg-header {
  /*
  background-color: var(--topbar--bgcolor);
  background-image: var(--topbar--bgimage);
  background-position-y: bottom;
  background-repeat: repeat;
  */
  -border-bottom: 2px solid darkgoldenrod;
  -border-image: var(--topbar--borderimage);
  -border-image-repeat: repeat;
  background-image: var(--topbar--borderimage);
  background-repeat: repeat-x;
  background-position: bottom;
  /* border-image-width: 0 0 2px 0; */
  box-shadow: 0 3px 10px var(--topbar--shadowcolor);
  -position: sticky;
  -top: 0;
  height: var(--topbar--height);
}

header#wikigg-header .mobile-header {
  padding-top: 5px;
}

header#wikigg-header::after {
  top: 0em;
  margin-top: var(--sitelogo--margin);
  inset-inline: 0;
  -left: var(--sidebar--width);
  margin-inline: auto;
  height: var(--sitelogo--height--inheader);
  width: calc( var(--sitelogo--height--inheader) * var(--sitelogo--aspectratio) );
  transform: scale(var(--sitelogo-to-header--scale));
  transform-origin: top;
  transition: opacity var(--zoom--transition-duration);
  transition-delay: var(--logo--transition-delay);
  opacity: var(--sitelogo--opacity);
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: '';
}

#mw-page-base,
header#wikigg-header::after {
  background: var(--sitelogo--image) center no-repeat;
  background-size: contain;
  height: var(--sitelogo--height--inheader);
  width: calc( var(--sitelogo--height--inheader) * var(--sitelogo--aspectratio) );
}

html:not(.theme-dark) #mw-page-base {
  grid-area: logo;
  justify-self: center;
}

#p-logo,
#mw-page-base,
header#wikigg-header::after {
  filter:
    blur(calc( var(--sitelogo--blur-onetenth) * 0.1px ))
    drop-shadow(0px 8px 8px var(--sitelogo--shadowcolor));
  filter:
    blur(calc( var(--sitelogo--blur-onetenth) * 0.1px ))
    drop-shadow(2px 2px 3px var(--sitelogo--shadowcolor))
    drop-shadow(0px 8px 8px var(--sitelogo--shadowcolor));
}



#mw-head {
  margin-block: 0em 0em;
  padding-top: 0em;
}

#p-logo#p-logo {
  height: var(--sitelogo--height);
  --width: calc( var(--sitelogo--height) * var(--sitelogo--aspectratio) );
  width: var(--width);
  background-size: var(--width) auto;
  margin-block: var(--sitelogo--margin);
  margin-inline: auto;
  inset-inline: 0em;
}
#p-logo .mw-wiki-logo {
  height: 100%;
  width: 100%;
}

html:not(.theme-dark) #p-logo {
  display: none;
}



header#wikigg-header .mobile-header {
  padding-top: 0px;
  font-size: 120%;
}

header#wikigg-header img.header-logo {
  height: max( var(--hostlogo--height--big), var(--hostlogo--height--base) );
  width: auto;
  padding-block: 0.25rem 0rem;
}

.promo-header {
  vertical-align: middle;
  /* vertical-align: text-top; */
}

#mw-panel#mw-panel {
  padding-top: 0.3em;
  -margin-top: 1em;
}



@media (width <= 1050px) {
  header#wikigg-header::after {
    display: none;
  }

  html:not(.theme-dark) #mw-page-base {
    display: block;
  }
}
@media (1050px < width) {
  :root:root {
    --layout-logo-scale: 0;
    --layout-logo-box-height: 0.5em;
  }

  #p-logo#p-logo,
  #p-logo .mw-wiki-logo {
    display: none;
  }
}



@media (width <= 1365px) {
  :root {
    --sidebar--width: 0em;
  }
}
@media (1365px < width) {
  :root.theme-dark {
    --sidebar--width: calc( var(--layout-sidebar-width) + 2 * var(--layout-box-gap) );
    /* In center instead on theme-dark */
    --sidebar--width: 0em;
  }
}



@media print {
  header#wikigg-header { display: none; }
}