MediaWiki:Theme-common.css

/*
The default theme moved to [[MediaWiki:Theme-dark-v1.css]]:
https://enshrouded.wiki.gg/wiki/MediaWiki:Theme-dark-v1.css
with a redirect through [[MediaWiki:Theme-dark.css]]:
https://enshrouded.wiki.gg/wiki/MediaWiki:Theme-dark.css

The styling of content that should be the same among themes are kept here,
such as layout of boxes, infoboxes, Main Page.
These will be applied to all skins and themes.

Colors (if any) should be set to var(--variables),
with the --variables defined in each theme.
*/


/** Color defaults **/
:root {
  --box--bgcolor: transparent;
  --box--bordercolor: #585858;
  --box--radius: 0.5em;
  --content--textcolor--em: #fff55b;
  --hoverzoom: 1.1;
  --zoom--transition-duration: 200ms;
}



/** Settings for Druid infobox **/
:root {
  /* portable infobox */
  --pi-background: none;
  --pi-border-color: rgba(30,30,30,0.9);
  --pi-secondary-background: #1E252F;
  --pi-secondary-background--label: #000;
  --pi-item-spacing: 8px 10px;
}
.druid-container {
	/* These variables are designed to inherit from your wiki's color variables.
	   If your wiki uses a different naming scheme, change the inner names to match yours.
	   If your wiki doesn't use color variables you should consider doing so,
	   otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
	*/
  --druid-background-color: transparent;
  --druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
  
  --druid-secondary-background-color: var(--wiki-accent-color, #36c);
  --druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 51, 102, 204);
  --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
  --druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
  
  --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
  --druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
  
  --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
  --druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
  
  --druid-link-color: var(--wiki-content-link-color, #0645ad);
  --druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
  --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
  --druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
}




/**** Infobox ****/

.druid-container {
  border: 55px solid;
  border-image: url(/images/3/3b/WebUI-Infobox_Border.png) 100;
  width: 300px;
  /* background: transparent; */
  float: right;
  clear: right;
  /* margin: 0 0 1em 1em; */
  /* width: 16.875em; */
  box-sizing: border-box;
  /* border-collapse: collapse; */
}

.druid-main-image {
  text-align:center;
}

.druid-title,
.druid-section {
  color:var(--druid-secondary-background-label-color);
  text-align:center;
  font-size:1.5em;
}

.druid-section,
.druid-title {
  padding-bottom:30px;
  background-image:url(/images/0/04/WebUI-Infobox_Horizontal_Rule.png);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100%;
}

.druid-label {
  font-weight:bold;
}

.druid-main-images {
  padding:5px;
}

.druid-main-images img {
  max-width:100%;
  height:auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.druid-main-images-labels {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
  justify-content: space-evenly;
  margin:0.25em;
  gap:0.25em;
}

.druid-main-images-label {
  cursor:pointer;
  flex:1 1 auto;
  text-align:center;
  transition:.1s ease-in;
  outline:1px solid #131313;
  border-radius: 5px;
}

.druid-main-images-label.focused {
	background: rgb(11, 11, 11);
  color:var(--druid-link-label-color);
}

.druid-main-images-label:not(.focused):hover {
  background:rgba(var(--druid-link-color--rgb), 0.25);
}

.druid-toggleable-data,
.druid-main-images-file {
	display:none;
}

.druid-toggleable-data.focused,
.druid-main-images-file.focused {
	display:block;
}

.druid-grid {
	display:grid;
}

.druid-row-description {
	text-align:center;
}
.druid-grid-item {
  background:var(--druid-tertiary-background-color);
  margin:0.25em;
  padding:0.25em;
  border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
}



.druid-data ul.pi-ingredients-list ul.pi-drops-list,
.pi-item ul.pi-ingredients-list ul.pi-drops-list {
  list-style:none;
  margin: 0;
  padding: 0;
}

ul.pi-ingredients-list li {
  padding:var(--pi-item-spacing);
  list-style-type: none;
}

ul.pi-ingredients-list li:not(:first-of-type) {
  border-top:1px solid var(--pi-border-color);
}

ul.pi-ingredients-list li:first-of-type {
  margin-top:-8px;
}

ul.pi-ingredients-list li:last-of-type {
  margin-bottom:-8px;
}

.druid-container .druid-data:has(.pi-ingredients-list),
.portable-infobox .pi-item-spacing:has(.pi-ingredients-list) {
  padding-left:0;
  padding-right:0;
}




/**** Map - DataMaps */

/** Map container **/
.ext-datamaps-container-content .ext-datamaps-container-leaflet {
	background: var(--wiki-content-background-color--secondary);
}

/** Legend **/
.ext-datamaps-container .ext-datamaps-control-expandable[aria-expanded="true"] {
	background: rgba(var(--wiki-content-background-color--secondary--rgb), 0.95);
}
.ext-datamaps-container .oo-ui-tabOptionWidget {
	color: var(--wiki-content-link-color);
}
.ext-datamaps-container .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
  background: var(--wiki-content-link-color);
	box-shadow: none;
	color: var(--wiki-content-link-label-color);
}

/** Popups **/
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: #1F1F1F;
	color: var(--wiki-content-text-color);
}
.ext-datamaps-popup-buttons a,
.leaflet-popup-close-button {
	filter: var(--wiki-icon-general-filter);
}

/** Controls */
.ext-datamaps-container .leaflet-bar {
  background-color: var(--wiki-content-background-color--secondary);
  border-color: rgba(var(--wiki-content-link-color--rgb), 0.5);
}
.ext-datamaps-container .leaflet-bar button:hover {
  background-color: rgba(var(--wiki-content-dynamic-color--rgb), 0.25);
}
.ext-datamaps-container .leaflet-control {
  color: var(--wiki-content-text-color);
}
.ext-datamaps-container .leaflet-control button {
  border-bottom-color: var(--wiki-content-text-color);
  color: var(--wiki-content-text-color);
}
/* HACK: awful selector, v1.0 will prolly use a standard class on these */
.ext-datamaps-control span[class^="oo-ui-icon"] {
  filter: var(--wiki-icon-general-filter);
}

/** Search */
.ext-datamaps-container .ext-datamaps-control-search ul.ext-datamaps-control-search-results {
	background: var(--wiki-content-background-color--secondary);
}
.ext-datamaps-container .ext-datamaps-control-search ul.ext-datamaps-control-search-results li:focus,
.ext-datamaps-container .ext-datamaps-control-search ul.ext-datamaps-control-search-results li[data-highlighted="true"] {
  background: rgba(var(--wiki-content-link-color--rgb),0.15);
  color: var(--wiki-content-link-color);
}

.ext-datamaps-container .ext-datamaps-container-status > :not(.oo-ui-widget) {
  background:var(--wiki-content-background-color--secondary);
  color:var(--wiki-content-text-mix-color);
}

/** Background colour for images to hide placeholders during load */
.ext-datamaps-container .leaflet-container .leaflet-tile-pane img,
.ext-datamaps-container .leaflet-container img.leaflet-image-layer,
.ext-datamaps-container .leaflet-container .leaflet-tile {
	background-color: var(--wiki-content-background-color--secondary);
}




/**** Editors ****/

/** Source editor: plain old wikitext editor **/

.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif {
  font-size: unset;
  tab-size: 2;
}


/** 2015 visual editor **/

.oo-ui-toolbar {
    position: sticky;
    top: var(--topbar--height);
    height: unset !important;
    z-index: 10;
}

.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
    position: unset;
}




/**** Content styles ****/

/** Table width **/
.fullwidth, .full-width {
  width: 100%;
}



/** Text wrap, size, alignment */

.hidden {
  display: none;
}

.nowrap {
  white-space: nowrap;
}

/* Hide list dots */
.ew-itemlist,  /* [[Template:DataQuery/Ingredients]] and [[Template:DataQuery/WhatsMadeFrom]] */
.nolist {
  list-style: none;
  margin: unset;
}

.ew-itemlist > li,
.nolist > li {
  margin-bottom: unset;
  /* display: block;  /* alternative to list-style: none */
}

.small {
  font-size: 85%;
}

/* ".center" has width=100% rule, we don't want it, so use a different class name. */
.aligncenter,
.align-center {
  text-align: center;
}

.alignleft,
.align-left {
  text-align: left;
}

.alignright,
.align-right {
  text-align: right;
}


/*× Basic layout **/
.responsive-image {
  max-width: 100%;
  height: auto;
}

/* Terminate float */
.clearfix::after {
  clear: both;
}
.clearfix::before,
.clearfix::after {
  display: table;
  content: "";
}

div.floatleft,
table.floatleft {
  margin: 0em 1.0em 0.5em 0em;
}
div.floatright,
table.floatright {
  margin: 0 0 0.5em 1em;
}

.flexrow {
  display: flex;
}
.column {
  display: flex;
  flex-direction: column;
}
.wrap {
  flex-wrap: wrap;
}
.flexbreak {
  width: 100%;
}

.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}

.page-content .vertical-align-top * {
  vertical-align: top;
}
.page-content .vertical-align-bottom * {
  vertical-align: bottom;
}

hr.space {
  height: 4px;
  background: none;
  border: 0;
}


/* Box layout */
.box {
  background-color: var(--box--bgcolor);
  padding: 0.5em 1em;
  border-radius: var(--box--radius);
}
.theme-dark .box {
  border: 1px solid var(--box--bordercolor);
}
.box.box h2 {
  width: fit-content;
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0.7em;
  /* border-bottom: 0; */
  line-height: 1.2;
}
.box h2:first-child {
  margin-top: 0.5em;
}
.box h2:not(:first-child) {
  margin-top: 2em;
}

.box .tabber__tabs {
  justify-content: center;
}


/* Item row layout */
.bigiconrow {
  gap: 2.5em;
  display: flex;
  /* line up text below icons */
  align-items: end;
  justify-content: space-around;
  justify-content: space-evenly;
  justify-content: center;
}
.bigiconrow img {
  border-radius: 1em;
}


/* Item grid layout */
.cardgrid {
  --card--width: calc(90px + 1em);
  display: grid;
  grid-template-columns: repeat( auto-fit, var(--card--width) );
  gap: 1em;
  text-align: center;
  align-items: center;
  justify-items: end;
  justify-content: center;
  justify-content: space-evenly;
}

.cardgrid > h2 {
  /* Compact, headings left from cards */
  grid-column: 1;
  /* Full-width headings */
  grid-column: 1 / -1;
}
.cardgrid.cardgrid > h2 {
  margin-block: unset;
  /* border-bottom: unset; */
}

.itemcard {
  display: flex;
  flex-direction: column;
}

.hoverzoom,
.itemcard {
  transition: transform var(--zoom--transition-duration);

  &:is( :hover, :focus-within ) {
    transform: scale( var(--hoverzoom) );
  }
}


.cardgrid .itemcard {
  --radius: 0.3em;
  border-radius: var(--radius);
  box-shadow: 1px 1px 10px 2px #0006;
  width: var(--card--width);
  height: 100%;
  box-sizing: border-box;
  align-items: center;
}
.cardgrid .itemcard a {
  width: 100%;
  padding-inline: 0em;
}
.cardgrid .itemcard a:first-child {
  background-color: #fff1;
  padding-top: 0.3em;
  border-radius: var(--radius) var(--radius) 0em 0em;
  overflow: clip;
  flex-grow: 1;
  /* center (overflowing) image */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cardgrid .itemcard a:last-child {
  padding-bottom: 0.1em;
}



/** [[Template:DataQuery/Ingredients]] and [[Template:DataQuery/WhatsMadeFrom]] **/
.ew-itemlist,
.itemlist {
  column-width: 15em;
}

.tabber__tabs {
	flex-wrap: wrap;
}

/* Anchor with image inside */
a:has(img) {
  /* The height should include the whole image */
  display: inline-block;
}



/* Hide empty paragraph at the start and end */
div.mw-parser-output > p:first-child:has( > br:only-child),
div.mw-parser-output > p:last-child:has( > br:only-child) {
  display: none;
}

/* Facilitate inline scary transclusion */
.scary-transclusion p, .scary-transclusion .mw-parser-output {
  display: inline;
}

/* Fix empty parameter descriptions on api.php having no height, causing misalignments that seriously impede readability */
.apihelp-parameters dd:empty::before {
  content: " ";
}

/* Gadget description length */
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
  max-width: unset;
}

/* [[File:*]] image pages */
.pixel img, .pixel,
#mw-imagepage-section-filehistory img {
  image-rendering: pixelated; /*for chrome*/
  image-rendering: crisp-edges; /*for firefox*/
}




/**** Specific pages ****/

/** Mark redirects in Special:Allpages and Special:Watchlist **/
.allpagesredirect {
  font-style: italic;
}
.allpagesredirect:after {
  color: #808080; content: " (redirect)"
}
.watchlistredir {
  font-style: italic;
}




/** MediaWiki:Sidebar **/
#mw-panel a[href="https://discord.gg/FZ4bpqbwmj"] {
  /* To center image below text */
  width: fit-content;

  &::after {
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: contain; */
    display: inline-block;
    display: block;
    min-width: 9em;
    /* Enforce 1 line-height with Unicode Em Space:   =   */
    /* https://www.compart.com/en/unicode/U+2003 */
    content: ' ';
    min-height: 1.3em; /* in case Em Space is lost */
  }
}
#mw-panel a[href="https://discord.gg/FZ4bpqbwmj"]::after {
  background-image: url(https://discordapp.com/api/guilds/1204090139773505597/widget.png);
}

#mw-panel a[href="https://discord.gg/enshrouded"] > span::after {
  background-color: #697ec4;
  background-image: url( https://enshrouded.wiki.gg/images/b/be/WebUI-Discord-mark-white.svg );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.8em;
  width: 1.6em;
  height: 1.3em;
  padding-right: 2px; /* for symmetry */
  border-radius: 4px;
  margin-left: 0.5em;
  vertical-align: middle;
  display: inline-block;
  content: '';
}



/** Main page **/

#mainpage-wrap .footer {
  text-align: right;
  font-size: 12px;
  line-height: 22px;
}

#mainpage-wrap .content-wrap,
.main-w-sidebar-layout {
  display: flex;
  width: fit-content;
  gap: 1em;
  align-items: stretch;
  margin-bottom: 1em;
}
@media (max-width: 1200px) {
  #mainpage-wrap .content-wrap,
  .main-w-sidebar-layout {
    flex-direction: column;
  }
}

.main-w-sidebar-layout > .column {
  gap: 1em;
  /* width: fit-content; */
}
.main-w-sidebar-layout > .column:first-child {
  /* max-width: 60em; */
}
.main-w-sidebar-layout > .column:last-child {
  min-width: 25em;
}

.left-column,
#mainpage-wrap .content-wrap .l {
  flex: 3 3 800px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.right-column,
#mainpage-wrap .content-wrap .r {
  flex: 1 1 100px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.box.header {
  text-align: center;
  margin-bottom: 1em;
}
.box.header .welcome h2 {
  font-size: 2em;
}
.box.header ul {
  display: inline-flex;
  align-items: center;
  margin: 1.5em auto 0.5em;
  gap: 1em;
}
.box.header ul li {
  list-style: none;
}
@media (max-width: 600px) {
  .box.header img {
    max-width: 200px;
  }
}

#mainpage-wrap .box.quicklinks {
	display: flex;
    gap: 1em;
    align-items: center;
}
#mainpage-wrap .box.game > div {
  display: flex;
  gap: 1em;
  align-items: center;
}
@media (max-width: 640px) {
  #mainpage-wrap .box.game > div {
    flex-direction: column;
  }
}
#mainpage-wrap .box.game img {
  width: 100%;
  height: auto;
  max-width: 320px;
  max-height: 180px;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.25);
}
#mainpage-wrap .box.game p {
  font-size: 16px;
  line-height: 28px;
}
#mainpage-wrap .box.feature b:first-child {
  color: var(--content--textcolor--em);
}