MediaWiki:Common.css

From Starlight River Mod Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
.theme-Ceiros {
  --theme-site-background:url(https://starlightrivermod.wiki.gg/images/3/3a/Bg.png) center top / cover no-repeat fixed;
  --theme-body-background-color: #334455AA;
  --theme-body-background-blur: 5px;
  --theme-site-logo-height: 32px;
  --theme-site-logo-width: 421px;
  --theme-link-color-redlink: #FF0000;
  --layout-logo-scale: 10;
  --layout-box-gap: 12px;
  --layout-topbar-height: 35px;
  --layout-logo-box-height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale) + var(--layout-box-gap) * 2);

}
html {
  background: var(--theme-site-background);
  overflow-y: scroll;
}
html a {
  color:skyblue;
}
body {
  background:none;
  overflow-y: unset;
}
#bodyContent a {
  color:skyblue;
}
#bodyContent a:visited {
  color:#9999DD;
}

#bodyContent a.new, a.new:visited {
  color: var(--theme-link-color-redlink);
}

.mw-body {
  margin-top: 20px;
  margin-right: 20px;
  background-color: var(--theme-body-background-color);
  backdrop-filter: blur(var(--theme-body-background-blur));
  border:5px outset #669999AA;
  color:white;
}

.mw-body a {
	color:skyblue;
}

.mw-body a:visited {
	color: teal;
}
div#simpleSearch #searchInput {
    color: #e0e0e0;
}
#mw-head {
  background:url(https://starlightrivermod.wiki.gg/images/c/cd/CeirosWall.png);
  background-color:#221511;
  color:white 
}
#mw-head .mw-list-item a{
  background:url(https://starlightrivermod.wiki.gg/images/c/cd/CeirosWall.png);
  background-color:#FFFFFF;
  color:skyblue;
}
#mw-head .vector-search-box-input{
  background-color:#110505;
  border: 2px inset #553C2F;
}

.selected a:link, a:visited{
  color:skyblue;
}

.selected a:active, a:hover{
  color:yellow;
}

#p-navigation {
  background:url(https://starlightrivermod.wiki.gg/images/c/cd/CeirosWall.png);
  border: 4px outset #553C2F;
  color:white;
}

#p-navigation a {
  color: skyblue
}

#p-tb {
  background:url(https://starlightrivermod.wiki.gg/images/c/cd/CeirosWall.png);
  border: 4px outset #553C2F;
  color:white;
  margin-top: 20px;
}

#p-tb a {
  color: skyblue
}

#p-tb h3 {
  color:white;
}



.firstHeading {
  color:white
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color:white
}

.mw-footer li {
	margin-right: 20px;
	color: white;
}

/*** logo block testing ***/
/*
#p-logo {
  position: absolute;
  width: 100%;
  height: var(--layout-logo-box-height);
  left: 0;
  top: var(--layout-topbar-height);
  background: url(https://starlightrivermod.wiki.gg/images/6/6a/LogoLarge_%28Starlight_River%29.png) center center/var(--theme-site-logo-width) auto no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: none
}
#p-logo .mw-wiki-logo {
  width: calc(var(--theme-site-logo-width) * var(--layout-logo-scale));
  height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale));
  margin: auto;
  background: none;  
} */


/* Classic Mode Color */
.tab.normal {
  color: white;
}

/* Expert Mode Color */
.tab.expert {
  color: yellow;
}

/* Master Mode Color */
.tab.master {
  color: red;
}



/* -- Other "plaincollapse" styling --------------------------------- */
/* Removes brackets from collapse/expand links for collapsible elements with "plaincollapse" class specified */
.plaincollapse .mw-collapsible-toggle {
   color:#00d4ed;
}
/* Other "plaincollapse" styling */
.plaincollapse .mw-collapsible-toggle  a,
.plaincollapse .mw-collapsible-toggle  a:link {
	color:#00d4ed;
}
.plaincollapse .mw-collapsible-toggle  a:visited,
.plaincollapse .mw-collapsible-toggle  a:hover {
   font-weight:bold;
   color:#ffffff;
}
/* ------------------------------------------------------------------ */


/* -- Offset linked anchors ----------------------------------------- */
.anchor {
   display: block;
   height: 0; 
   position: relative;
   top: -100px; 
   z-index:-9999;
   visibility: hidden;
}
/* ------------------------------------------------------------------ */

/* -- note text ----------------------------------------------------- */
.note-text{
   color: #ffffff;
}
/* ------------------------------------------------------------------ */

/* -- "terraria" box style. ------------------------------------------*/
.terraria{
	color: #ffffff;
    border: 1px #0094FF solid;
    padding: 8px 12px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    position: relative;
}
.terraria > .heading,
.terraria > .mw-collapsible-content > .heading {
    background: #000000;
    text-align: center;
    font-weight: bold;
    line-height: 2;
    min-height: 1em;
    margin: auto -4px;
    padding: 0;
    font-size: inherit;
    margin-top: 8px;
}
.terraria > .heading:first-child,
.terraria > .mw-collapsible-content > .heading:first-child {
    margin-top: auto;
}
.terraria > .heading + *,
.terraria > .mw-collapsible-content > .heading + * {
    padding-top: 8px;
}
.terraria > .mw-collapsible-toggle {
    position: absolute;
    line-height: 1;
    right: 12px;
    top: 12px;
    font-size: 12px;
}
.terraria > .mw-collapsible-toggle > .mw-collapsible-bracket {
    display: none;
}
.terraria > .mw-collapsible-toggle:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    transform: rotate(45deg);
    position: relative;
    left: -3px;
    border-left: 2px solid #00b4bf;
    border-top: 2px solid #00b4bf;
    border-right: 0;
    border-bottom: 0;
    top: 1px;
}
.terraria > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before {
    border-left: 0;
    border-top: 0;
    border-right: 2px solid #0094FF;
    border-bottom: 2px solid #0094FF;
    top: -2px;
}


/* ------------------------------------------------------------------ */

/* for item infobox */
.item.infobox {
    width: 21em;
}

.item.infobox .images .auto,
.infobox.item .images .stack {
    position: absolute;
    right: 3px;
}

.item.infobox .images .auto {
    top: 3px;
}

.item.infobox .images .stack {
    bottom: 3px;
}

.item.infobox .images ul.inline li {
    display: inline-block;
    padding: 0 8px 0 9px;
    margin: 2px auto;
    position: relative;
    vertical-align: middle;
}

.item.infobox .images ul.inline li::before {
    content: "";
    display: block;
    width: 1px;
    background: #000000;
    height: 80%;
    position: absolute;
    left: 0;
    top: 10%;
}

.item.infobox .images ul.inline li:first-child::before {
    display: none;
}

.item.infobox .images ul.block li {
    display: block;
    padding: 13px 0 0 0;
    margin: auto;
    position: relative;
}

.item.infobox .images ul.block li::before {
    content: "";
    display: block;
    height: 1px;
    background: #000000;
    width: 80%;
    position: absolute;
    left: 10%;
    top: 6px;
}

.item.infobox .images ul.block li:first-child {
    padding-top: 0;
}

.item.infobox .images ul.block li:first-child::before {
    display: none;
}

.item.infobox ul.toolpower {
    padding: 6px 0;
    cursor: pointer;
}

.item.infobox ul.toolpower li {
    display: inline-block;
    padding: 0 0.5em;
}

/* ------------------------------------------------------------------ */

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

/* -- item link ----------------------------------------------------- */
.item-link{
   white-space:nowrap;
   display: inline-block;
}
.item-link > a, 
.item-link > img{ 
   display: inline-block;
   line-height: 0.1;
   vertical-align: middle;
   margin-left: 2px;
}
.item-link > span{
   display: inline-block;
   margin-left: 3px;
   text-align: left;
}
.item-link > a:first-child,
.item-link > img:first-child,
.item-link > span:first-child{
   margin-left: auto;
}
.item-link.-w > span{
   vertical-align: middle;
   line-height: 1.25;
}
.item-link .note{
   color: #ffffff;
   font-size: 85.7142%; /*12px/14px*/
}
.item-link div.note{ /*note2*/
   font-size: 100%;
   line-height: 1;
}
.item-link span.note{
   margin-left: 3px;
}
.item-link.-w span.note:last-child{
   display: block;
   margin-left: auto;
   line-height: 1;
}
.item-link.boldname >span span:first-child{
   font-weight: bold;
}
.item-link.notecolor span.note{
   color: inherit;
}
.item-link.note2color div.note{
   color: inherit;
}
.item-link.block,
.item-link.block > span{
   display: block;
}
.item-link.notesize span.note{
   font-size: 100%;
}
.item-link.note2size div.note{
   font-size: 100%;
   font-size: 85.7142%; /*12px/14px*/
}
.item-link.alignleft{
   text-align: left;
}
.item-link.aligncenter{
   text-align: center;
}
.item-link.alignright{
   text-align: right;
}
.item-link.textleft>span{
   text-align: left;
}
.item-link.textcenter>span{
   text-align: center;
}
.item-link.textright>span{
   text-align: right;
}
/* ------------------------------------------------------------------ */
/* ========================================================================== */
/*		Wiki Table		*/
/* ------------------------------------------------------------------ */

.wikitable{
	color:#FFFFFF;
	background-color:#090c0e;
}


.wikitable>tr>th,
.wikitable>*>tr>th {
	background-color:#090c0e;	
}

/* ------------------------------------------------------------------ */
/* ========================================================================== */
/*		Table		*/
/* ------------------------------------------------------------------ */

/* -- "terraria"-classed tables ------------------------------------- */
table.terraria {
   margin: 1em 1em 1em 0;
   background: #000000;
   border: 1px #0094FF solid;
   padding: 0.2em;
   -moz-border-radius: .7em;
   -webkit-border-radius: .7em;
   border-radius: .7em;
   color: #00e4ff;
}

/* -- Auto line separators for tables ------------------------------- */

table {
    white-space: normal !important;
}
table td.station{
	text-align: center;
}
table.lined td,
table.lined th{
	padding: 6px;
	border-right: 1px #0094FF solid;
}
table.lined th:last-child,
table.lined td:last-child{
	border-right:0;
}
table.lined td,
table.lined th{
   border-bottom:1px #0094FF solid;
   color: #ffffff;
}
table.lined tr:last-of-type td {
   border-bottom:1px #0094FF solid;
}
table tr.bottomline td {
   border-bottom:1px #0094FF solid;
}
table tr.topline td {
   border-top:1px #0094FF solid;
}

/*-------Table Crafts--------*/
table.crafts {
   border-collapse: collapse;
   border: 1px solid #0094FF;
   border-radius: 8px;
   padding: 6px;
   background-color: #0094FF;
   color: white;
   margin: auto 0 0.5em;
}
table.crafts table.inner {
    border-collapse: collapse;
    background:inherit; 
    width:100%;
}
table.crafts table.inner th {
    border:2px solid #0094FF;
    background: #0094FF;
}

.crafts td {
  border: 0;
  padding: 2px;
}

table.crafts table {
  border-collapse: collapse;
  border: 2px solid transparent;
}

.crafts caption {
  font-size: 16px;
  background: #0094FF;
  padding: 6px 8px;
  position: relative;
  font-weight: bold;
  white-space: nowrap;
  margin: 2px;
}

.crafts caption > i,
.crafts caption > b {
  vertical-align: middle;
}

.crafts table th,
.crafts table td {
  padding: 4px 8px;
  border: 1px solid #0094FF;
}

.crafts table th {
  background: #0094FF;
  background-clip: padding-box;
}

.crafts td.result,
.crafts td.ingredients {
  white-space: nowrap;
}

.crafts td.result .version-note {
  margin-bottom: 0.25em;
}

.crafts td.result .result-note {
  margin-top: 0.25em;
}

.crafts td.station {
  text-align: center;
}

.crafts td.station > b,
.crafts td.station > i {
  vertical-align: middle;
}

.crafts td.station span.water {
  display: inline-block;
  vertical-align: middle;
}

.crafts.nostation th.station,
.crafts.nostation td.station {
  display: none;
}

.crafts .ingredients ul,
.crafting-ingredients > ul {
  margin: -3px 0;
  list-style: none;
}

.crafts .ingredients li,
.crafting-ingredients > ul > li {
  margin: 3px auto;
}

/* itemlink default as multiline */
.crafts .i > span,
.crafts .i > span,
.crafts .note-text {
  line-height: 1.25;
  vertical-align: middle;
}

.recipe.compact .result-note {
  margin-left: 2px;
}

/* -- Hack for using "border-collapse" and "border-radius" in the same table display */
/* -- by using one table nested within another ------------------------------------- */
table.outer {
   white-space:nowrap;
}
table.inner {
   border-collapse:collapse; 
   background:inherit; 
   width:100%;
}
table.inner th {
   border:2px solid #0094FF; 
}


/* -- fix 100% width table with border ------------------------------ */
table {
    display: table;
}


/* ========================================================================== */
/* -- Infobox & infobox wrapper template style ---------------------- */
/* --------  some rules just kept for "old" template.  -------------- */
/* ========================================================================== */

.infobox td,
.infobox th{
    border-right: none !important;
}

.infobox caption {
    font-size: larger;
    margin-left: inherit;
}

.infobox.bordered {
    border-collapse: collapse;
}

.infobox.bordered td,
.infobox.bordered th {
    border: 1px #0094FF solid;
}

.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
    border: 0;
}


/* styles for latest template */
.infobox {
    border: 1px solid #0094FF;
    border-radius: 8px;
    padding: 4px;
    float: right;
    font-size: 12px;
    background-color: #000000;
    margin: 0 0 0.5em 1em;
}

@media(max-width:450px) {
    .infobox {
        float: none;
    }
}

.infobox.float-right {
    float: right;
    margin: 0 0 0.5em 1em;
}

.infobox.float-left {
    float: left;
    margin: 0 1em 0.5em 0;
}

.infobox.float-none {
    float: none;
    margin: 0 1em 0.5em 0;
}

.infobox table {
    background-color: #000000;
    width: 100%;
    border-spacing: 0;
}

.infobox table th {
    white-space: nowrap;
    padding: 2px;
    text-align: right;
    border-right: 1px solid #0094FF;
    width: 5em;
    vertical-align: middle;
}

.infobox table td {
    padding: 2px;
    vertical-align: middle;
}

.infobox .title {
    background-color: #00727A;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: 2px 0;
}

.infobox > .title {
    font-size: 15px;
    padding: 6px 3px;
    line-height: 1.2;
}

.infobox > .title > span {
    display: block;
    font-size: 12px;
    color: #ffffff;
    font-style: italic;
}

.infobox > .title > span::before {
    content: "(";
    font-style: normal;
}

.infobox > .title > span::after {
    content: ")";
    font-style: normal;
}

.infobox .content-section {
    padding: 6px 3px;
}

.infobox .variant {
    background-color: #00727A;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    font-size: 12px;
    padding: 4px 0;
    line-height: 1.2;
}

.infobox .images {
    position: relative;
    padding: 6px 0;
    min-height: 40px;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    /* direction=column, for IE11 */
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

.infobox .images > img {
    margin-top: 0.5em;
}

.infobox ul {
    list-style: none;
    margin: auto;
    text-align: center;
}

.infobox .statistics .title {
    margin-bottom: 6px;
}
.infobox .statistics table th,
.infobox .statistics table td {
    padding-top: 3px;
    padding-bottom: 3px;
}


.infobox .stat td > small {
    font-size: 10.5px;
    font-weight: bold;
}

.infobox .stat td > small::before {
    content: "(";
}

.infobox .stat td > small::after {
    content: ")";
}

.infobox tr.buff th, .infobox tr.buff td {
    background-color: rgba(0,115,122,0.29);
    border:none
}

.infobox tr.buff th {
    border-left: 0;
}

.infobox tr.buff td {
    border-right: 0;
    padding-left: 3px;
}

.infobox tr.buff td b {
    font-weight: bold;
}

.infobox .section.ids {
    margin-top: 3px;
    border-top: 1px solid #0094FF;
    text-align: center;
    font-size: 10.5px;
    background-color: #00727A;
    color: #ffffff;
}

.infobox .section.ids li {
    padding: 2px 0;
    border-bottom: 2px solid #0094FF;
    margin: 0;
    font-weight: bold;
}

.infobox .section.ids li:last-child {
    border-bottom: 0;
}

.infobox .variant {
    margin-bottom: 2px;
}

.infobox .drops td:first-child {
    text-align: left;
}

.infobox .drops td:last-child {
    text-align: right;
}

.infobox .drops th:first-child {
    text-align: left;
    border-right: 0;
}

.infobox .section.drops {
    margin-top: 6px;
    margin-bottom: 6px;
}

.infobox .drops.money {
    margin: 2px auto;
}

.infobox .drops.money table th {
    width: 1px;
}

.infobox .imageother {
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid #0094FF;
}

.infobox .drops.items {
    margin-bottom: 1px;
}

.infobox .drops.items li {
    border-bottom: 1px #0094FF solid;
    padding: 3px 0;
    margin-bottom: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

.infobox .drops.items li:first-child {
    background-color: #000000;
    color: #ffffff;
    padding: 2px 3px 0;
}
.infobox .drops.items li:last-child {
    border-bottom: none;
}

.infobox .drops.items li > div {
    display: block;
}

.infobox .drops.items li > div:first-child {
    text-align: left;
}

.infobox .drops.items li > div:last-child {
    text-align: right;
}

.infobox .drops.items li.caption {
    border-top: 2px #0094FF solid;
    margin-top: 2px;
    line-height: 1;
    text-align: center;
    color: #ffffff;
    font-size: 10.5px;
    background: #000000;
    padding-top: 5px;
    display: block;
}
.infobox .drops.items li.caption.group_end {
    padding-bottom: 5px;
}

.infobox .drops.items li.group_end {
    border-bottom: 5px #0094FF solid;
    position: relative;
}

.infobox .drops.items li.group_end::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background-color: #000000;
}


/* for npc infobox */
.npc.infobox {
    width: 23em;
}
.npc.infobox .statistics table th {
    width: 6em;
}
.npc.infobox .map{
   text-align: center;
   padding-top: 3px;
   margin-top: 6px;
   border-top: 1px solid #aaa;
}

/* for version infobox */
.infobox.versionbox {
	font-size: 89%;
	width: 21em;
	-moz-border-radius: .7em;
	-webkit-border-radius: .7em;
	border-radius: .7em;
}
.versionbox-title {
	font-size: 120%;
	padding: 0.5em;
}
.versionbox-image {
	text-align: center;
}

.versionbox-label {	width: 40%; }
.versionbox-data  { width: 60%; }

.versionbox-title,
.versionbox-caption,
.versionbox-heading,
.version-history,
th.versionbox-prev,
th.versionbox-curr,
th.versionbox-next {
	background-color: #000000;
	color: #ffffff;
	padding: 0;
}
td.versionbox-prev,
td.versionbox-curr,
td.versionbox-next {
	text-align: center;
	width: 33%;
}
/* ========================================================================== */
/* infobox wrapper */
/* ========================================================================== */

.infobox-wrapper.float-right {
    float: right;
    margin-left: 0.5em;
}

.infobox-wrapper.float-left {
    float: left;
    margin-right: 0.5em;
}

.infobox-wrapper.float-none {
    float: none;
}

@media(max-width:450px) {
    .infobox-wrapper.float-right {
        float: none;
        margin-left: auto;
    }

    .infobox-wrapper.float-left {
        float: none;
        margin-right: auto;
    }
}

.infobox-wrapper.float-right.direction-row .infobox,
.infobox-wrapper.float-right.direction-row-reverse .infobox,
.infobox-wrapper.float-right.direction-row .infobox.float-left,
.infobox-wrapper.float-right.direction-row-reverse .infobox.float-left,
.infobox-wrapper.float-right.direction-row .infobox.float-right,
.infobox-wrapper.float-right.direction-row-reverse .infobox.float-right,
.infobox-wrapper.float-right.direction-row .infobox.float-none,
.infobox-wrapper.float-right.direction-row-reverse .infobox.float-none {
    float: none;
    margin: 0 0 0.5em 0.5em;
}

.infobox-wrapper.float-left.direction-row .infobox,
.infobox-wrapper.float-left.direction-row-reverse .infobox,
.infobox-wrapper.float-left.direction-row .infobox.float-left,
.infobox-wrapper.float-left.direction-row-reverse .infobox.float-left,
.infobox-wrapper.float-left.direction-row .infobox.float-none,
.infobox-wrapper.float-left.direction-row-reverse .infobox.float-none,
.infobox-wrapper.float-left.direction-row .infobox.float-right,
.infobox-wrapper.float-left.direction-row-reverse .infobox.float-right,
.infobox-wrapper.float-none.direction-row .infobox,
.infobox-wrapper.float-none.direction-row-reverse .infobox,
.infobox-wrapper.float-none.direction-row .infobox.float-left,
.infobox-wrapper.float-none.direction-row-reverse .infobox.float-left,
.infobox-wrapper.float-none.direction-row .infobox.float-none,
.infobox-wrapper.float-none.direction-row-reverse .infobox.float-none,
.infobox-wrapper.float-none.direction-row .infobox.float-right,
.infobox-wrapper.float-none.direction-row-reverse .infobox.float-right {
    float: none;
    margin: 0 0.5em 0.5em 0;
}

.infobox-wrapper.float-left.direction-column .infobox,
.infobox-wrapper.float-left.direction-column-reverse .infobox,
.infobox-wrapper.float-left.direction-column .infobox.float-left,
.infobox-wrapper.float-left.direction-column-reverse .infobox.float-left,
.infobox-wrapper.float-left.direction-column .infobox.float-none,
.infobox-wrapper.float-left.direction-column-reverse .infobox.float-none,
.infobox-wrapper.float-left.direction-column .infobox.float-right,
.infobox-wrapper.float-left.direction-column-reverse .infobox.float-right {
    float: left;
    margin: 0 0.5em 0.5em 0;
}

.infobox-wrapper.float-none.direction-column .infobox,
.infobox-wrapper.float-none.direction-column-reverse .infobox,
.infobox-wrapper.float-none.direction-column .infobox.float-right,
.infobox-wrapper.float-none.direction-column-reverse .infobox.float-right {
    float: right;
    margin: 0 0 0.5em 0.5em;
}

.infobox-wrapper.float-none.direction-column .infobox.float-left,
.infobox-wrapper.float-none.direction-column-reverse .infobox.float-left,
.infobox-wrapper.float-none.direction-column .infobox.float-none,
.infobox-wrapper.float-none.direction-column-reverse .infobox.float-none {
    float: left;
    margin: 0 0.5em 0.5em 0;
}

.infobox-wrapper.float-right.direction-column .infobox,
.infobox-wrapper.float-right.direction-column-reverse .infobox,
.infobox-wrapper.float-right.direction-column .infobox.float-left,
.infobox-wrapper.float-right.direction-column-reverse .infobox.float-left,
.infobox-wrapper.float-right.direction-column .infobox.float-none,
.infobox-wrapper.float-right.direction-column-reverse .infobox.float-none,
.infobox-wrapper.float-right.direction-column .infobox.float-right,
.infobox-wrapper.float-right.direction-column-reverse .infobox.float-right {
    float: right;
    margin: 0 0 0.5em 0.5em;
}
/* ========================================================================== */
/* -- drops-infobox tabs -------------------------------------------- */
/* Template:npc infobox */
/* ========================================================================== */

.drop.infobox .headerSort * {
	background-image: unset;
}
.drop.infobox table {
	margin-top: 6px;
	margin-bottom: 6px;
}
.drop.infobox td {
	border-top: 1px solid #0094FF;
}

.drop.infobox th:first-child, .drop.infobox td:first-child {
	text-align: left;
	width: 0;
}
.drop.infobox td:first-child s {
	display: none;
}
.drop.infobox th:nth-child(2), .drop.infobox td:nth-child(2) {
	text-align: center;
	width: 0;
	min-width: 3em;
}
.drop.infobox th:last-child, .drop.infobox td:last-child {
	text-align: right;
	width: 0;
	min-width: 4em;
}
.drop.infobox th {
	background-color: #000000;
	color: #ffffff;
	border-right: 0;
	padding: 2px 5px;
}
.drop.infobox th:first-child.headerSort {
	padding-left: 21px;
	background-position-x: left;
}
.drop.infobox th:nth-child(2).headerSort {
	padding-left: 21px;
	text-align: left;
	background-position-x: left;
}
.drop.infobox th:last-child.headerSort {
	padding-right: 21px;
}
.drop.infobox .entity-img img {
	width: auto;
	height: auto;
	max-width: 90px;
	max-height: 90px;
}
.drop.infobox .nodrop-note {
	text-align: center;
	padding-top: 6px;
}

.drop.infobox > .mw-collapsible-toggle {
	background-color: #000000;
	margin-right: 3px;
}
.drop.infobox > .mw-collapsible-toggle:before {
	content: "";
	vertical-align: middle;
	display: inline-block;
	width: 4px;
	height: 4px;
	transform: rotate(45deg);
	position: relative;
	left: -3px;
	border-left: 2px solid #0094FF;
	border-top: 2px solid #0094FF;
	border-right: 0;
	border-bottom: 0;
	top: 1px;
}
.drop.infobox > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before {
	border-left: 0;
	border-top: 0;
	border-right: 2px solid #0094FF;
	top: -2px;
}
.drop.infobox > .mw-collapsible-toggle:after {
	content: "";
}

.infobox .modetabs{
	display: flex;
	padding: 0 4px;
	margin: 6px -6px;
}
.infobox .modetabs .tab{
	margin: 0 2px -1px;
	flex: 1 1 33.33333333%;
	border: 1px solid #0094FF;
	border-radius: 3px 3px 0 0;
	background: #000000;
	padding: 4px 0 3px;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s;
}
.infobox .modetabs .tab.current{
	background: #000000;
	transition: all 0.2s;
}
.infobox.c-normal .m-expert,
.infobox.c-normal .m-master,
.infobox.c-normal .m-expert-master{
	display: none !important;
}
.infobox.c-expert .m-normal,
.infobox.c-expert .m-master,
.infobox.c-expert .m-normal-master{
	display: none !important;
}
.infobox.c-master .m-normal,
.infobox.c-master .m-expert,
.infobox.c-master .m-normal-expert{
	display: none !important;
}
.infobox.expertonly .m-normal,
.infobox .expertonly .m-normal{
	display: none !important;
}
.infobox.masteronly .m-normal,
.infobox.masteronly .m-expert{
	display: none !important;
}


/* ========================================================================== */
/* Recipes */
/* ========================================================================== */
.heading-1{
	background-color:#0094FF;
	color:#FFFFFF;
}

.recipes caption > b, .recipes caption > i {
  vertical-align: middle;
}
.recipes .ib {
  display: inline-block;
  vertical-align: middle;
}
.recipes th, .recipes td {
  padding: 4px 8px;
}
.recipes td.result,
.recipes td.ingredients {
  white-space: nowrap;
}
.recipes td.result .version-note {
  margin-bottom: 4px;
}
.recipes td.result .result-note {
  margin-top: 4px;
}
.recipes td.station {
  text-align: center;
}
.recipes td.station > b, .recipes td.station > i {
  vertical-align: middle;
}
.recipes.nostation th.station, .recipes.nostation td.station {
  display: none;
}
.recipes .i > span,
.recipes .am {
  /* itemlink default as multiline */
  line-height: 18px;
  vertical-align: middle;
}
.recipes .am {
  color: #0094FF;
}
.recipes .am::before {
  /* thin spaces around multiplication sign */
  content: " × ";
}
.recipes .ingredients ul {
  margin: -3px 0;
  list-style: none;
}
.recipes .ingredients ul > li {
  margin: 3px auto;
}


/* ========================================================================== */
/* itemlist */
/* ========================================================================== */

.itemlist > ul {
    list-style: none;
    margin: 0 0.25em -0.25em 0;
}

.itemlist > ul > li {
    width: 10em;
    /* default width */
    margin: auto 1em 0.5em auto;
    display: inline-block;
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}
/* ========================================================================== */
/********* Infocard *********/
/* ========================================================================== */

.infocard {
  --infocard-padding: 1em;
  --infocard-padding-negative: calc(var(--infocard-padding) * -1);
  --infocard-padding-half: calc(var(--infocard-padding) * 0.5);
  --infocard-padding-half-negative: calc(var(--infocard-padding-negative) * 0.5);
  --infocard-icon-right-offset: -2em;
  --infocard-box-title-font-size: 1.5em;
  --infocard-box-title-font-weight: lighter;
  --infocard-main-heading-font-size: 2em;
  padding: var(--infocard-padding);
  border: 1px solid var(--theme-box-border-color);
  border-radius: 6px;
  width: 100%;
  min-width: 300px;
  position: relative;
  background: var(--template-background-color-1);
}
.infocard + .infocard {
  /* gap between subsequent infocard elements */
  margin-top: 0.5em;
}
.infocard.compact {
  --infocard-padding: 0.5em;
  --infocard-icon-right-offset: -2.5em;
  --infocard-box-title-font-size: 100%;
  --infocard-box-title-font-weight: bold;
  --infocard-main-heading-font-size: 1.25em;
  min-width: 240px;
}
.infocard > .intro {
  margin: 1em 0;
  min-width: 200px;
}
@media screen and (max-width: 720px) {
  .infocard .outro .content {
    overflow-x: auto;
  }
}
.infocard .heading {
  margin: 1em 0 var(--infocard-padding-half);
  font-weight: bold;
}
.infocard .main-heading {
  border-right: 3em solid transparent;
  position: relative;
  line-height: 1;
  padding-left: var(--infocard-padding);
  margin: var(--infocard-padding) var(--infocard-padding-negative);
  background: #00727a 
}
@media screen and (max-width: 450px) {
  .infocard .main-heading {
    padding-right: 0 !important;
  }
}
.infocard .main-heading .hgroup {
  display: inline-block;
  margin-left: 4px;
  padding: 0 var(--infocard-padding);
  background: #0e191a;;
}
.infocard .main-heading .hgroup > .main {
  font-size: var(--infocard-main-heading-font-size);
  color: var(--theme-text-color-highlight);
}
.infocard .main-heading .hgroup > .main > .namenote {
  font-size: 62.5%;
  color: var(--theme-text-color-note);
}
.infocard .main-heading .icon {
  position: absolute;
  right: var(--infocard-icon-right-offset);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: var(--iconsize);
  height: var(--iconsize);
}
.infocard .main-heading .icon.frame {
  border: 1px solid var(--theme-box-border-color);
  border-radius: 4px;
  background: var(--theme-page-background-color);
}
.infocard .main-heading .icon.frame.round {
  border-radius: 100%;
}
.infocard > .card {
  float: right;
  margin: -1em 1em 0.75em 0.75em;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 450px) {
  .infocard > .card {
    float: none;
    margin: 0;
  }
}
.infocard > .card .image {
  background: var(--theme-box-border-color);
  border-left: 1px solid var(--theme-box-border-color);
  border-right: 1px solid var(--theme-box-border-color);
  box-shadow: var(--theme-widget-shadow);
}
@media screen and (max-width: 450px) {
  .infocard > .card .image {
    width: 100% !important;
    text-align: center;
  }
}
.infocard > .card .content {
  border: 1px solid var(--theme-box-border-color);
  border-top: 0;
  background: var(--template-background-color-1);
  border-radius: 0 0 4px 4px;
  padding: 0 0.75em;
  box-shadow: var(--theme-widget-shadow);
}
@media screen and (max-width: 450px) {
  .infocard > .card .content {
    width: 100% !important;
  }
}
@media screen{
	.toc, .toccolours{
		background-color:#090c0e;
	}
	.tocnumber{
		color:#FFFFFF;
	}
	div.thumbinner{
		background-color:#090c0e;	
	}
	.catlinks{
		background-color:#090c0e;	
	}
	li.gallerybox div.thumb{
		background-color:#0d1f31;
	}
}

.infocard > .card .content > .intro {
  margin-top: 0.75em;
}
.infocard > .card .content > dl {
  margin: 0.75em 0;
}
.infocard > .card .content dt {
  font-weight: bold;
  margin-top: 0.75em;
}
.infocard > .card .content dd {
  margin: 0;
}
.infocard > .card .content > .outro {
  margin-bottom: 0.75em;
}
.infocard .box {
  padding: var(--infocard-padding);
  margin: 1em 0;
  background-color: var(--theme-box-background);
  border: 1px solid var(--theme-widget-border-color);
  border-radius: 4px;
}
.infocard .box > .title {
  line-height: 1;
  display: inline-block;
  margin-left: var(--infocard-padding-negative);
  padding: 0 1em 0 var(--infocard-padding-half);
  min-width: 5em;
  border-left: var(--infocard-padding-half) solid transparent;
  border-left-color: transparent;
}
.infocard .box > .title > span {
  font-weight: var(--infocard-box-title-font-weight);
  font-size: var(--infocard-box-title-font-size);
}
.infocard .box > .content {
  margin-top: 4px;
}
.infocard.biome .main-heading + div {
  display: flex;
  flex-wrap: wrap;
  margin: 0 var(--infocard-padding-half-negative) var(--infocard-padding-negative);
}
.infocard.biome .main-heading + div > .box {
  margin: 0 var(--infocard-padding-half) var(--infocard-padding);
  flex: 1 1 auto;
}
.infocard.biome .main-heading + div > .box:last-child, .infocard.biome .main-heading + div > .box.last {
  flex: 10 10 auto;
}
.infocard.biome .main-heading + div > .box .dotlist {
  margin-top: -2px;
}
.infocard.biome .main-heading + div > .box .dotlist li {
  margin-top: 2px;
}


/* ========================================================================== */
/*dotlist */
/* ========================================================================== */

.dotlist {
  margin: auto;
}
.dotlist > .title {
  font-weight: bold;
}
.dotlist > .title::after {
  content: "";
  display: inline-block;
  width: 0.25em;
}
.dotlist.nobold > .title {
  font-weight: normal;
}
.dotlist > ul {
  display: inline;
  list-style: none;
  margin: auto; /* please don't delete this line, we need it to remove default ul margin setting. */
}
.dotlist > ul > li {
  display: inline-block;
}
.dotlist > ul > li::after {
  content: "•";
  padding: 0 0.25em;
  word-break: break-all;
}
.dotlist > ul > li:last-child::after {
  display: none;
}
.dotlist.nodot > ul > li::after {
  content: "　";
  padding: 0;
  margin: 0;
}
.dotlist.inline {
  display: inline;
}
.dotlist.inline > ul > li {
  display: inline;
}
.dotlist.l > .title {
  margin-right: 0.4em;
}
.dotlist.l > ul > li::after {
  margin-left: 0.25em;
  margin-right: 0.25em;
}
.dotlist.xl > .title {
  margin-right: 0.8em;
}
.dotlist.xl > ul > li::after {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.dotlist.xxl > .title {
  margin-right: 1.2em;
}
.dotlist.xxl > ul > li::after {
  margin-left: 0.75em;
  margin-right: 0.75em;
}
.dotlist.xxxl > .title {
  margin-right: 1.6em;
}
.dotlist.xxxl > ul > li::after {
  margin-left: 1em;
  margin-right: 1em;
}
.dotlist.xxxxl > .title {
  margin-right: 2em;
}
.dotlist.xxxxl > ul > li::after {
  margin-left: 1.25em;
  margin-right: 1.25em;
}
Retrieved from "https://starlightrivermod.wiki.gg/index.php?title=MediaWiki:Common.css&oldid=9103"