MediaWiki:Common.css
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.
/* CSS placed here will be applied to all skins */
/* Import common CSS from the vanilla Terraria Wiki */
@import url(https://terrariamods.wiki.gg/index.php?title=MediaWiki:Common.css/terraria.common.css&action=raw&ctype=text/css);
/* Import CSS for specific mod wikis on the Terraria Mods Wiki */
@import url(https://terrariamods.wiki.gg/index.php?title=MediaWiki:Common-mods.css&action=raw&ctype=text/css);
:root{
--theme-site-logo-image: url(https://fargosmods.wiki.gg/images/e/e6/Site-logo.png);
--theme-body-background: #111 url(/images/5/57/Site-background.png) center center / cover no-repeat fixed;
}
:root{
--theme-site-logo-width: 234px;
--theme-site-logo-height: 150px;
}
#p-logo{
position: absolute;
width: 100%;
height: var(--main-layout-logo-height);
left: 0;
top: var(--main-layout-topbar-height);
background: var(--theme-site-logo-image) center center / var(--theme-site-logo-width) auto no-repeat;
}
#p-background{
background: var(--theme-body-background);
}
@media screen and (min-width: 1367px){
body{
background: var(--theme-body-background);
grid-template-rows: [body-start] calc( var(--layout-topbar-height) + 24px) [page-start nav-start aside-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [aside-end page-end] 0fr [body-end];
}
div#p-logo{
position: static;
background-size: 100% auto;
height: 110px;
margin-top: -8px;
}
div#p-logo .mw-wiki-logo{
width: 100%;
height: 100%;
}
body.content-size-expanded #mw-panel{
display: none;
}
}
@media screen and (max-width: 1366px){
body{
background: var(--theme-body-background);
}
#p-logo {
margin-bottom: 20
left: 50%;
transform: translateY(-4px);
}
}
@media screen and (max-width: 900px){
:root{
--layout-logo-scale: 1;
}
body{
background: var(--theme-body-background);
}
#p-logo {
margin-bottom: 20
left: 0;
transform: translateY(-4px);
}
#mw-panel #p-logo + .portal .body, #mw-panel .portal:last-child .body{
left: auto;
right: 0;
}
}
/* Hide the links to base pages (below the page title) but only in namespaces "(Main)" and "User" */
.ns-0 #contentSub .subpages,
.ns-2 #contentSub .subpages {
display: none;
}
/* Custom list style for use in miniature bullet lists within infobox drop tables */
span.dropSub ul {
list-style: none;
margin-top: 0;
margin-left: 0;
padding-left: 0;
}
span.dropSub li {
padding-left: 1em;
text-indent: -1em;
}
span.dropSub li:before {
content: "•";
}
/* ================================================================== */
/* Template styles */
/* ================================================================== */
/* Template:Summoned */
.summoned.infobox {
text-align: center;
padding-bottom: 12px;
}
.summoned.infobox .title {
font-size: 12px;
}
.summoned.infobox .p {
font-size: 14px;
}
/* ================================================================== */
/* Responsive mod front page styles */
/* ================================================================== */
/* all sections */
.modfp-box {
border: 1px solid var(--custom-accent-border-color);
border-radius: 5px;
-moz-border-radius: 5px;
padding: 7px;
}
/* header section */
.modfp-section-header {
margin-bottom: 0.5em;
}
.modfp-section-header > div {
flex-grow: 1;
}
.modfp-header {
background: var(--theme-accent-color);
padding: 8px;
margin: 3px;
text-align: center;
color: var(--theme-accent-label-color);
}
.modfp-header .modfp-highlightbox {
border: 1px solid var(--custom-accent-border-color);
margin-top: 5px;
padding: 5px;
text-align: center;
background: var(--theme-page-background-color);
}
.modfp-title {
margin-bottom: 1em;
}
.modfp-title .modfp-big {
font-size: 160%;
}
/* mod info section */
.modfp-section-info {
margin-bottom: 0.5em;
}
.modfp-section-info, .modfp-section-content {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
flex-wrap: wrap;
column-gap: 0.25em;
row-gap: 0.5em;
}
.modfp-section-info > .modfp-box:first-child {
flex-grow: 1;
flex-basis: 70%;
}
.modfp-section-info > .modfp-box:last-child {
flex-grow: 1;
flex-basis: 29%;
}
.modfp-versionbox-content, .modfp-versionbox-content-sub {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
flex-wrap: wrap;
-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-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
.modfp-versionbox-content-sub > div:first-child {
font-weight: bold;
}
.modfp-versionbox-content-sub:not(div:last-child)::after {
content: "";
width: 100%;
border-top: 1px var(--custom-accent-border-color) solid;
margin: 0.25em 0;
}
/* content section */
.modfp-section-content {
margin-bottom: 0.5em;
}
.modfp-section-content > div {
flex-grow: 1;
}
/* ================================================================== */
/* Main page styles */
/* ================================================================== */
/* Hide page title */
body.page-Terraria_Mods_Wiki h1.firstHeading {
display: none;
}
#section-main .infocard,
#section-misc .infocard {
margin: 2px;
}
#mainpage-wrapper .box {
border: 1px solid #AFCFE2;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
margin: 3px;
}
#mainpage-wrapper .box .boxcontent {
padding: 10px;
}
#mainpage-wrapper #box-header .boxcontent,
#mf-wikiheader .box {
background: var(--theme-accent-color);
padding: 8px;
margin: 3px;
text-align: center;
color: var(--theme-text-color);
}
#mainpage-wrapper #box-header {
padding: 7px;
margin: 2px;
}
#mainpage-wrapper #box-header > div {
background: var(--theme-page-background-color);
}
#mainpage-wrapper #box-header .heading {
font-size: 162%;
}
#mainpage-wrapper #box-header .linksbox,
#mf-wikiheader .linksbox {
margin-top: 5px;
padding: 5px;
text-align: center;
background: var(--theme-highlight-background);
}
#mainpage-wrapper #box-description {
flex: 10 0 240px;
}
#mainpage-wrapper #box-description .boxcontent > div:not(:last-child) {
margin-bottom: 30px;
}
#mainpage-wrapper #box-featuredmods {
flex: 1 1 240px;
}
#mainpage-wrapper #box-featuredmods .allmods-link {
margin-top: 1em;
}
#mainpage-wrapper #box-externalwikis .boxcontent div:first-child {
margin-bottom: 1.5em;
}
#mainpage-wrapper #box-externalwikis .boxcontent > ul {
list-style-image: none;
list-style-type: none;
}
#mainpage-wrapper #box-newmods {
flex: 1 0 240px;
}
#mainpage-wrapper #box-newmods .newmods-list {
column-count: 2;
margin-bottom: 1.75em;
}
#mainpage-wrapper #box-wikicommunity {
flex: 2 0 240px;
}
#mainpage-wrapper .footer {
margin: 0.75em 2px 0;
}
#mainpage-wrapper .footer > div {
margin: auto;
max-width: 25em;
text-align: center;
border: 1px solid var(--theme-border-color);
-moz-border-radius: 5px;
border-radius: 5px;
background: var(--theme-highlight-background);
padding: 0.5em;
}
.mp-heading {
background: var(--theme-accent-color);
padding: 5px 20px;
margin: 3px;
font-weight: bold;
text-align: center;
font-size: 120%;
color: var(--theme-accent-label-color);
}
.externalwikis-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
place-items: center;
row-gap: 1.25em;
margin: 1.25em 0;
}
.externalwikis-grid-container div {
transition: transform .15s linear;
}
.externalwikis-grid-container div:hover,
.externalwikis-grid-container div:focus {
transform: scale(1.1);
}
/* -- Infobox & infobox wrapper template style ---------------------- */
/* some rules just kept for "old" template. */
.infobox td, .infobox th {
vertical-align: top;
}
.infobox caption {
font-size: larger;
margin-left: inherit;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px #000 solid;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
/* styles for latest template */
.infobox{
border: 1px solid #000;
border-radius: 8px;
padding: 6px;
float: right;
font-size: 12px;
background-color: #343031;
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: transparent;
width: 100%;
border-spacing: 0;
}
.infobox table th{
white-space: nowrap;
padding: 2px;
text-align: right;
border-right: 1px solid #343031;
width: 5em;
vertical-align: middle;
}
.infobox table td{
padding: 2px;
vertical-align: middle;
}
.infobox .title{
background-color: #333033;
color: #FFF;
font-weight: bold;
text-align: center;
padding: 2px 0;
}
.infobox > .title{
font-size: 15px;
padding: 8px 0;
line-height: 1.2;
}
.infobox > .title span{
display: block;
font-size: 12px;
color: slategray;
font-style: italic;
}
.infobox > .title span::before{
content: "(";
font-style: normal;
}
.infobox > .title span::after{
content: ")";
font-style: normal;
}
.infobox .variant{
background-color: #343031;
color: #FFF;
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 ul{
list-style: none;
margin: auto;
text-align: center;
}
.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: #333033;
border: 1px solid #000000;
}
.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 .variant{
margin-bottom: 2px;
white-space: nowrap;
}
.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;
}
.npc.infobox .map{
text-align: center;
padding-top: 3px;
margin-top: 6px;
border-top: 1px solid #000;
}
.infobox .image2{
text-align: center;
padding-top: 3px;
margin-top: 6px;
border-top: 1px solid #000;
}
.infobox .proj,
.infobox .ib_sound,
.infobox .cooldown {
text-align: center;
padding-top: 3px;
margin-top: 6px;
}
.infobox .drops.items{
margin-bottom: 1px;
}
.infobox .drops.items li{
border-bottom: 1px #1f1c1e 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: #343031;
color: #FFF;
padding: 2px 3px 0;
}
.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:last-child{
border-bottom: none;
}
.infobox .drops.items li.caption{
border-top:2px #1f1c1e solid;
margin-top: 2px;
line-height:1;
text-align: center;
color:#ffffff;
font-size: 10.5px;
background:#343031;
padding-top: 5px;
display: block;
}
.infobox .drops.items li.group_end{
border-bottom:5px #1f1c1e 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: #343031;
}
/* for item infobox */
.item.infobox{
width: 21em;
}
.item.infobox .images .auto, .infobox.item .images .stack{
position: absolute;
right: 3px;
}
.item.infobox .images .instrument {
position: absolute;
left: 3px;
}
.item.infobox .images .auto{
top: 3px;
}
.item.infobox .images .stack, .item.infobox .images .instrument{
bottom: 3px;
}
.item.infobox .images ul.inline li{
display: inline-block;
padding: 0 8px 0 9px;
margin: 2px auto;
position: relative;
}
.item.infobox .images ul.inline li::before{
content: "";
display: block;
width: 1px;
background: #ccc;
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: #ccc;
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;
}
/* for npc infobox */
.npc.infobox{
width: 23em;
}
.npc.infobox .statistics table th{
width: 6em;
}
/* 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;
}
.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;
}
/* Auto line separators for tables */
table.lined td {
border-bottom: 1px #666 solid;
}
table.lined tr:last-of-type td {
border-bottom: 0;
}
table tr.bottomline td {
border-bottom: 1px #000 solid;
}
table tr.topline td {
border-top: 1px #000 solid;
}
table tr.bottomline:last-of-type td {
border-bottom: 0;
}
.mw-collapsible-toggle-default .mw-collapsible-text
{
color: var(--theme-link-color);
}
/* REGION: Theme */
.hp > div .text-red {
/* high contrast */
color: #fe7c7c;
}
.hp > div .text-golden {
/* high contrast */
color: #db9d40;
}
/*** Underground theme ***/
:root {
/*** link text color ***/
--theme-link-color--rgb: 156, 255, 253;
/* common */
--theme-border-color--rgb: 0, 0, 0;
--theme-highlight-background: rgba(20,20,20, 0.25);
--theme-box-border-color-invert: rgba(255,255,255, 0.1);
--theme-button-background: linear-gradient(rgba(20,20,20, 0.2), rgba(20,20,20, 0.2)), var(--theme-button-background-active);
--theme-button-border-color: rgba(120, 118, 162, 0.7) rgba(63, 44, 92, 0.7) rgba(63, 44, 92, 0.7) rgba(120, 118, 162, 0.7);
--theme-button-background-active: #3e393d var(--theme-image-button-background) center center / cover repeat-x;
--theme-button-border-color-active: rgb(120, 118, 162) rgb(63, 44, 92) rgb(63, 44, 92) rgb(120, 118, 162);
/* sidebar/content common */
--theme-box-shadow: 0px 0px 15px 0px rgba(10,10,10, 0.7);
/*** sidebar ***/
--theme-sidebar-box-background: linear-gradient(rgba(20,20,20, 0.1), rgba(20,20,20, 0.1)),
#60473b url(https://terraria.wiki.gg/images/8/84/Content-background-underground.jpg);
--theme-sidebar-box-border-style: solid;
--theme-sidebar-box-border-color: var(--theme-content-border-color); /* set it to "transparent" for no border */
--theme-sidebar-box-shadow: var(--theme-box-shadow);
--theme-sidebar-heading-text-color: var(--theme-text-color);
--theme-sidebar-heading-arrow-color: rgba(234,227,209, 0.5);
--theme-sidebar-heading-arrow-color-hover: rgb(234,227,209);
--theme-sidebar-heading-background: rgba(20,20,20, 0.15);
--theme-sidebar-heading-background-hover: var(--theme-sidebar-heading-background); /* for hover effect */
/* following 3 values will affect the space between the heading and the list */
--theme-sidebar-heading-border-bottom: 1px solid rgb(10,10,10);
--theme-sidebar-list-border-top: 1px solid rgba(255,255,255, 0.1); /* will be hidden when collapsed */
--theme-sidebar-list-padding-top: 4px;
--theme-sidebar-list-item-background: none;
--theme-sidebar-list-item-hover-mask: rgba(20,20,20, 0.25);
--theme-sidebar-list-item-text-color: var(--theme-text-color-em);
--theme-sidebar-list-item-text-color-hover: var(--theme-text-color-em);
/* responsive */
--theme-sidebar-box-background-2: #60473b url(https://terraria.wiki.gg/images/a/ae/Navbar-background-underground.jpg);
--theme-sidebar-dropdown-background: #60473b url(https://terraria.wiki.gg/images/8/84/Content-background-underground.jpg);
/*** content box ***/
--theme-content-background: #3e393d;
--theme-content-border-bottom-width: 0;
--theme-content-border-style: solid;
--theme-content-border-color: rgba(255,255,255, 0.1) rgba(13, 4, 2, 0.2) rgba(13, 4, 2, 0.2) rgba(255,255,255, 0.1);
--theme-content-subpage-icon-color: rgba(234,227,209,0.4); /* color for "<" */
/** category: box **/
--theme-content-category-background: rgba(20,20,20, 0.25);
--theme-content-category-border-style: solid;
--theme-content-category-border-color: rgba(13, 4, 2, 0.5) rgba(255,255,255, 0.1) rgba(255,255,255, 0.1) rgba(13, 4, 2, 0.5);
/** notification **/
--theme-notification-background: url(https://terraria.wiki.gg/images/c/c0/Notification-background-underground.png);
--theme-notification-border-color: #cdab7b #562f21 #562f21 #cdab7b;
--theme-notification-shadow: 0px 0px 10px 0px rgb(var(--theme-shadow-color-rgb));
/* ------------------------------------------------------------------------- */
/* ========================================================================= */
/* OOUI variables start */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* These helper variables are defined for reuse in the variable definitions below */
--oouihelper--red: #b32424;
--oouihelper--red-darker: #551111;
--oouihelper--red-lighter: #f04848;
--oouihelper--red-lighter-transparent: rgba(240, 72, 72, 0.6); /* #f0484899 */
--oouihelper--red-lightest: #ff5959;
--oouihelper--yellow: #ac6600;
--oouihelper--yellow-darker: #4d2e00;
--oouihelper--yellow-lighter: #ffcc33;
--oouihelper--green: #006633;
--oouihelper--green-darker: #00331a;
--oouihelper--green-lighter: #00e673;
--oouihelper--progressive: var(--theme-link-color);
--oouihelper--progressive-transparent: rgba(var(--theme-link-color--rgb), 0.6);
--oouihelper--progressive-lighter: rgba(var(--theme-link-color--rgb), 0.8);
--oouihelper--disabled: var(--theme-text-color-note);
--oouihelper--disabled-lighter-transparent: rgba(196, 196, 196, 0.5);
--oouihelper--disabled-darker-transparent: rgba(128, 128, 128, 0.5);
--oouihelper--borderdark: var(--theme-border-color);
--oouihelper--borderdark-lighter: rgba(var(--theme-border-color--rgb), 0.85);
--oouihelper--borderdark-hover: rgba(var(--theme-border-color--rgb), 0.9);
--oouihelper--borderdark-focus: var(--oouihelper--progressive);
--oouihelper--textinput-background: rgba(20, 20, 20, 0.65);
--oouihelper--textinput-background-lighter: rgba(30, 30, 30, 0.65);
--oouihelper--textinput-background-darker: rgba(20, 20, 20, 0.9);
--oouihelper--placeholdertext: var(--theme-text-color-note);
--oouihelper--themerelated: #8696b6;
--oouihelper--themerelated-lighter: #9caccc;
--oouihelper--themerelated-lighter-transparent: rgba(156, 172, 204, 0.6);
--oouihelper--themerelated-lightest: #b7c7e6;
--oouihelper--themerelated-darker: #62708a;
--oouihelper--themerelated-darkest: #4b586e;
--oouihelper--themerelated-disabled: rgba(134, 150, 182, 0.1);
--oouihelper--themerelated-disabled-lighter: rgba(156, 172, 204, 0.6);
--oouihelper--text-background: #2c2421;
--oouihelper--text-deeper: var(--theme-text-color);
/* Actual OOUI variables, grouped by element type */
/* misc */
--ooui--inlinehelp-color: var(--theme-text-color-note);
--ooui--disabled-color: var(--oouihelper--disabled);
/* all buttons */
--ooui--button-background--hover: #7b573d url(https://terraria.wiki.gg/images/0/0a/Button-background-underground.jpg) center center / cover repeat-x;
--ooui--button-background: linear-gradient(rgba(20, 20, 20, 0.2), rgba(20, 20, 20, 0.2)), var(--ooui--button-background--hover);
--ooui--button-box-shadow: rgba(10, 10, 10, 0.5) 2px 2px 3px;
--ooui--button-box-shadow--focus: inset var(--oouihelper--themerelated-lighter-transparent) 0 0 0 2px;
/* "normal" button */
--ooui--button-border-top: 1px solid rgba(120, 118, 162, 0.7);
--ooui--button-border-right: 1px solid rgba(63, 44, 92, 0.7);
--ooui--button-border-bottom: var(--ooui--button-border-right);
--ooui--button-border-left: var(--ooui--button-border-top);
--ooui--button-border-top--hover: 1px solid rgb(120, 118, 162);
--ooui--button-border-right--hover: 1px solid rgb(63, 44, 92);
--ooui--button-border-bottom--hover: var(--ooui--button-border-right--hover);
--ooui--button-border-left--hover: var(--ooui--button-border-top--hover);
--ooui--button-color: var(--theme-text-color);
--ooui--button-color--hover: var(--oouihelper--text-deeper);
/* "progressive" button */
--ooui--button-progressive-color: var(--oouihelper--progressive);
--ooui--button-progressive-color--hover: var(--oouihelper--progressive-lighter);
--ooui--button-progressive-box-shadow--focus: inset var(--oouihelper--progressive-transparent) 0 0 0 2px;
--ooui--button-progressive-primary-border-color: var(--oouihelper--progressive);
--ooui--button-progressive-primary-border-color--hover: var(--oouihelper--progressive-lighter);
/* "destructive" button */
--ooui--button-destructive-color: var(--oouihelper--red-lighter);
--ooui--button-destructive-color--hover: var(--oouihelper--red-lightest);
--ooui--button-destructive-box-shadow--focus: inset var(--oouihelper--red-lighter-transparent) 0 0 0 2px;
--ooui--button-destructive-primary-border-color: var(--oouihelper--red-lighter);
--ooui--button-destructive-primary-border-color--hover: var(--oouihelper--red-lightest);
/* disabled button */
--ooui--button-disabled-color: var(--oouihelper--disabled);
--ooui--button-disabled-background: linear-gradient(var(--oouihelper--disabled-darker-transparent), var(--oouihelper--disabled-darker-transparent)), var(--ooui--button-background--hover);
--ooui--button-disabled-border-top: 1px solid rgba(126, 109, 93, 0.7);
--ooui--button-disabled-border-right: 1px solid rgba(70, 53, 47, 0.7);
--ooui--button-disabled-border-bottom: var(--ooui--button-disabled-border-right);
--ooui--button-disabled-border-left: var(--ooui--button-disabled-border-top);
/* frameless button */
--ooui--button-frameless-on-color: var(--oouihelper--text-deeper);
/* textarea */
--ooui--textarea-background-color: var(--oouihelper--textinput-background);
--ooui--textarea-placeholder-color: var(--oouihelper--placeholdertext);
--ooui--textarea-border-color: var(--oouihelper--borderdark);
--ooui--textarea-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--textarea-border-color--focus: var(--oouihelper--borderdark-focus);
--ooui--textarea-invalid-border-color: var(--oouihelper--red-lighter);
--ooui--textarea-readonly-background-color: var(--oouihelper--textinput-background-darker);
--ooui--textarea-disabled-color: var(--oouihelper--disabled);
--ooui--textarea-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
--ooui--textarea-disabled-background-color: var(--oouihelper--disabled-darker-transparent);
--ooui--textarea-pending-background-color-1: rgba(20, 20, 20, 0.9);
--ooui--textarea-pending-background-color-2: #000;
/* checkbox */
--ooui--checkbox-border-color: var(--oouihelper--themerelated);
--ooui--checkbox-border-color--hover: var(--oouihelper--themerelated-lighter);
--ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%238696b6%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E"); /* set the part between "fill=%22%23" and "%22" to the desired hexcode */
--ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cg fill=%22%239caccc%22%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
--ooui--checkbox-box-shadow--focus: var(--oouihelper--themerelated-darkest);
--ooui--checkbox-disabled-background-color: var(--oouihelper--themerelated-disabled);
--ooui--checkbox-disabled-icon: var(--ooui--checkbox-icon);
/* radiobutton */
--ooui--radiobutton-border-color: var(--oouihelper--themerelated);
--ooui--radiobutton-border-color--hover: var(--oouihelper--themerelated-lighter);
--ooui--radiobutton-box-shadow--focus: var(--oouihelper--themerelated-darkest);
--ooui--radiobutton-disabled-background-color: var(--oouihelper--themerelated-disabled);
/* toggleswitch */
--ooui--toggleswitch-border-color: var(--oouihelper--themerelated);
--ooui--toggleswitch-border-color--hover: var(--oouihelper--themerelated-lighter);
--ooui--toggleswitch-color--active: var(--oouihelper--themerelated-darker);
--ooui--toggleswitch-grip-color: var(--oouihelper--themerelated-lightest);
--ooui--toggleswitch-box-shadow--focus: var(--oouihelper--themerelated-darkest);
--ooui--toggleswitch-disabled-background-color: var(--oouihelper--themerelated-disabled);
--ooui--toggleswitch-disabled-grip-color: var(--oouihelper--themerelated-disabled-lighter);
/* dropdown */
--ooui--dropdown-background-color: var(--oouihelper--textinput-background);
--ooui--dropdown-background-color--hover: var(--oouihelper--textinput-background-lighter);
--ooui--dropdown-border-color: var(--oouihelper--borderdark);
--ooui--dropdown-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--dropdown-border-color--focus: var(--oouihelper--borderdark-focus);
--ooui--dropdown-disabled-color: var(--oouihelper--disabled);
--ooui--dropdown-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
--ooui--dropdown-disabled-background-color: var(--oouihelper--disabled-darker-transparent);
/* selectfile */
--ooui--selectfile-border-color: #72777d;
--ooui--selectfile-background-color: var(--oouihelper--textinput-background);
--ooui--selectfile-candrop-background-color: #514743;
/* tag item */
--ooui--tagitem-background-color: rgba(20, 20, 20, 0.75);
--ooui--tagitem-border-color: var(--oouihelper--borderdark);
--ooui--tagitem-border-color--hover: var(--oouihelper--borderdark-hover);
--ooui--tagitem-border-color--focus: var(--oouihelper--themerelated-darkest);
--ooui--tagitem-invalid-border-color: var(--oouihelper--red-lighter);
--ooui--tagitem-color--hover: var(--theme-link-color-hover);
--ooui--tagitem-disabled-color: var(--oouihelper--disabled);
--ooui--tagitem-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
--ooui--tagitem-disabled-background-color: rgba(20, 20, 20, 0.5);
/* multioption */
--ooui--multioption-disabled-color: var(--oouihelper--disabled);
/* progressbar */
--ooui--progressbar-border-color: var(--oouihelper--themerelated);
--ooui--progressbar-bar-background-color: var(--oouihelper--themerelated);
--ooui--progressbar-disabled-border-color: var(--oouihelper--themerelated-disabled);
--ooui--progressbar-pending-background-color-1: rgba(var(--theme-link-color--rgb), 0.5);
--ooui--progressbar-pending-background-color-2: rgba(var(--theme-border-color--rgb), 0.5);
/* messagewidget */
--ooui--messagewidget-notice-background-color: #343031;
--ooui--messagewidget-notice-border-color: #1f1c1e;
--ooui--messagewidget-error-background-color: var(--oouihelper--red);
--ooui--messagewidget-error-border-color: var(--oouihelper--red-darker);
--ooui--messagewidget-error-color: var(--oouihelper--red-lighter);
--ooui--messagewidget-warning-background-color: var(--oouihelper--yellow);
--ooui--messagewidget-warning-border-color: var(--oouihelper--yellow-darker);
--ooui--messagewidget-success-background-color: var(--oouihelper--green);
--ooui--messagewidget-success-border-color: var(--oouihelper--green-darker);
--ooui--messagewidget-success-color: var(--oouihelper--green-lighter);
/* menuselectwidget */
--ooui--menuselect-background-color: var(--oouihelper--text-background);
--ooui--menuselect-selected-background-color: var(--oouihelper--textinput-background-darker);
--ooui--menuselect-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
--ooui--menuselect-border-color: var(--oouihelper--borderdark);
--ooui--menusectionoption-color: var(--oouihelper--placeholdertext);
/* tabselectwidget */
--ooui--tabselect-background-color: var(--oouihelper--text-background);
--ooui--tabselect-selected-background-color: var(--theme-content-background);
--ooui--tabselect-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
--ooui--tabselect-frameless-box-shadow-color: var(--oouihelper--borderdark-lighter);
--ooui--tabselect-frameless-selected-color: var(--theme-link-color);
--ooui--tabselect-frameless-selected-box-shadow-color: var(--theme-link-color);
--ooui--tabselect-frameless-highlighted-color: #bcd1d2;
--ooui--tabselect-frameless-highlighted-box-shadow-color: #bcd1d2;
--ooui--taboption-color: var(--oouihelper--placeholdertext);
/* outlineselectwidget */
--ooui--outlineselect-box-shadow--focus: inset var(--oouihelper--themerelated-lighter-transparent) 0 0 0 2px;
--ooui--outlineoption-background-color: var(--oouihelper--text-background);
--ooui--outlineoption-border-color: var(--oouihelper--borderdark);
--ooui--outlineoption-selected-background-color: var(--oouihelper--textinput-background-darker);
--ooui--outlineoption-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
--ooui--outlineoption-pressed-background-color: #22292a;
/* popupwidget */
--ooui--popup-background-color: var(--oouihelper--text-background);
--ooui--popup-border-color: var(--oouihelper--borderdark);
/* layouts */
--ooui--bookletlayout-border-color: var(--oouihelper--borderdark);
--ooui--panellayout-border-color: var(--oouihelper--borderdark);
/* dialog */
--ooui--dialog-border-color: var(--oouihelper--borderdark);
--ooui--dialog-border-color--lighter: var(--oouihelper--borderdark-lighter);
/* window */
--ooui--window-background-color: var(--oouihelper--text-background);
--ooui--window-border-color: var(--oouihelper--borderdark);
/* indicators */
/* tools like https://isotropic.co/tool/hex-color-to-css-filter/ allow converting the desired color into a filter */
--ooui--indicator-filter: brightness(0) invert(90%) sepia(28%) saturate(107%) hue-rotate(5deg) brightness(96%) contrast(93%);
--ooui--indicator-invert-filter: brightness(0);
/* icons */
--ooui--icon-normal-filter: brightness(0) invert(90%) sepia(28%) saturate(107%) hue-rotate(5deg) brightness(96%) contrast(93%);
--ooui--icon-progressive-filter: brightness(0) invert(90%) sepia(18%) saturate(662%) hue-rotate(140deg) brightness(99%) contrast(91%);
--ooui--icon-destructive-filter: brightness(0) invert(33%) sepia(27%) saturate(2948%) hue-rotate(329deg) brightness(116%) contrast(91%);
--ooui--icon-invert-filter: brightness(0);
--ooui--icon-success-filter: brightness(0) invert(76%) sepia(47%) saturate(4832%) hue-rotate(101deg) brightness(101%) contrast(101%); /* #00e673 */
--ooui--icon-warning-filter: brightness(0) invert(81%) sepia(89%) saturate(585%) hue-rotate(323deg) brightness(96%) contrast(112%); /* #ffcc33 */
--ooui--icon-error-filter: brightness(0) invert(56%) sepia(62%) saturate(4943%) hue-rotate(329deg) brightness(91%) contrast(108%); /* #f04848 */
/* ------------------------------------------------------------------------- */
/* ========================================================================= */
/* OOUI variables end */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/******* "real" wiki content ********/
--theme-widget-toc-arrow-color: rgba(234,227,209, 0.5);
--theme-widget-toc-arrow-color-hover: rgba(234,227,209);
--theme-widget-toc-item-hover-background: rgba(20,20,20, 0.25);
--theme-collapsible-toggle-icon-color: var(--theme-text-color-note);
--theme-collapsible-toggle-icon-color-hover: var(--theme-link-color-hover);
/* temp */
--theme-image-button-background: url(https://terraria.wiki.gg/images/0/0a/Button-background-underground.jpg);
}
:root {
--theme-background: #3e393d;
}
:root {
--theme-top-background: url(https://fargosmods.wiki.gg/images/f/ff/Theme_Border.png) top left repeat-x; /* the "grass" */
--theme-top-background-height: 0px; /* height of the image above. */
--theme-top-background-offset: -3px
}
:root {
--theme-text-color: #f7e8d1; /* main text color. 234,227,209 */
--theme-text-color-note: #b5bdb2; /* note text */
--theme-text-color-em: #f7e8d1; /* 196,235,208 */
--theme-text-color-green: #00be00;
--theme-text-color-red: #fe7c7c;
}
:root {
--theme-link-color: #9cfffd;
--theme-link-color-hover: #9cfffd;
--theme-link-color-visited: #9cfffd;
}
:root {
--theme-widget-background: linear-gradient(rgba(20,20,20, 0.1), rgba(20,20,20, 0.1)),
#444041 url(https://terraria.wiki.gg/images/8/84/Content-background-underground.jpg);
}
:root {
--theme-dropdown-background: #444041 url(https://terraria.wiki.gg/images/8/84/Content-background-underground.jpg);
}
#mw-panel {
--theme-background: linear-gradient(rgba(20,20,20, 0.3), rgba(20,20,20, 0.3)), #40404a url(https://fargosmods.wiki.gg/images/2/2f/Theme_Top_Background_Wood.png);
}
#mw-head {
--theme-background: linear-gradient(rgba(20,20,20, 0.3), rgba(20,20,20, 0.3)), #40404a url(https://fargosmods.wiki.gg/images/2/2f/Theme_Top_Background_Wood.png);
--theme-tab-background-selected: #3e393d; /* same as #content background */
--theme-tab-background: linear-gradient(rgba(20,20,20, 0.4), rgba(20,20,20, 0.4)), #3e393d;
}
#footer {
--theme-background: linear-gradient(rgba(20,20,20, 0.3), rgba(20,20,20, 0.3)), #40404a url(https://fargosmods.wiki.gg/images/2/2f/Theme_Top_Background_Wood.png);
}
/* END REGION: Theme */