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.
/* import Konstanting font*/
@font-face {
font-family: "Konstanting";
src: url(https://commons.wiki.gg/images/c/c6/Konstanting.woff2) format("woff2");
}
/* import Belisa plumilla font*/
@font-face {
font-family: "Belisa_plumilla";
src: url(https://commons.wiki.gg/images/9/9a/Belisa_plumilla.woff2) format("woff2");
}
:root {
--icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
}
/***********************************************************************************************************
* css reset for browser default rules and MediaWiki internal rules
***********************************************************************************************************/
* {
outline: 0;
}
table {
white-space: unset; /* be set to `no-wrap` in MW internal css */
}
html {
font-size: 16px; /* reset rem size */
}
body {
overflow-y: unset;
}
pre {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
border: 0 solid transparent;
}
table {
display: table;
white-space: unset;
}
body, code {
background: none;
}
/***********************************************************************************************************
* css for wiki.gg top bar and footer bar
***********************************************************************************************************/
/********* wiki.gg header *********/
header#wikigg-header #p-personal ul {
white-space: nowrap; /* for "log out" */
}
header#wikigg-header #p-personal .vector-menu-content #pt-anonuserpage, header#wikigg-header #p-personal .vector-menu-content #pt-userpage a {
/* user avatar icon position fix */
padding-top: 0;
background-position: left center;
}
@media screen and (max-width: 720px) {
header#wikigg-header #p-personal li#p-themes > span {
display: inline-block;
}
}
/********* wiki.gg footer *********/
footer#wikigg-footer .footer-right, footer#wikigg-footer .footer-left {
margin: 0;
text-align: center;
}
@media screen and (max-width: 479px) {
footer#wikigg-footer .footer-right, footer#wikigg-footer .footer-left {
width: auto;
}
}
@media screen and (max-width: 359px) {
footer#wikigg-footer .footer-middle {
/* hide wiki.gg logo to make room to avoid text wrapping */
display: none;
}
}
/***********************************************************************************************************
* base css styles for both interface and content box: font, color, etc.
***********************************************************************************************************/
/** Font **/
html, body {
font-family: Helvetica, Arial, sans-serif;
color: var(--theme-text-color);
}
html {
background: var(--theme-site-background);
}
body {
font-size: 14px;
line-height: 1.5;
}
ul, ol {
margin: 2px 0 2px 1.5em;
}
li {
margin: 0 0 2px 0;
}
pre, code, .mw-code {
color: var(--theme-text-color);
border: 1px solid var(--theme-border-color);
background: var(--theme-background);
}
/** link color **/
/* Self-links aren't real links, they're not clickable.
* Hence, they shouldn't change color when hovered over like real links, as that is counter-intuitive.
* We should not use :not(.selflink) since it increases the priority and make it is difficult to override
* link styles for certain elements (e.g. in wiki.gg header).
*/
a,
a.selflink:hover, a.selflink:active {
text-decoration: none;
color: var(--theme-link-color);
}
a:visited {
color: var(--theme-link-color-visited);
}
a:hover, a:active {
text-decoration: underline;
color: var(--theme-link-color-hover);
}
/** red link **/
/* we don't really need to mark you have "visited" an inexistent page */
a.new, a.new:visited {
color: var(--theme-link-color-redlink);
}
/*********************************************************************************************************/
input, button {
color: var(--theme-control-text-color);
caret-color: var(--theme-text-color);
}
input[type=submit] {
color: var(--theme-control-text-color);
}
::placeholder {
color: var(--theme-text-color-placeholder);
}
/* Removes VisualEdit button */
#ca-ve-edit {
display: none;
}
/* Link color */
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: var(--theme-link-color);
}
/* Text color */
.i .note,
.note-text {
color: var(--theme-text-color-note);
}
.pixel img, .pixel,
#mw-imagepage-section-filehistory img {
image-rendering: pixelated; /*for chrome*/
image-rendering: crisp-edges; /*for firefox*/
}
.small {
font-size: 85%;
}
.fullwidth, .full-width {
width: 100%;
}
.nowrap {
white-space: nowrap;
}
/* ".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;
}
/* clear fix for float block */
.clearfix {
*zoom: 1;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* References smaller text than main */
.references {
font-size: 90%;
}
/* Larger font for Module: code display (default is smaller than other code pages) */
pre.lua.source-lua {
font-size: 14px !important;
}
/* Facilitate inline scary transclusion */
.scary-transclusion p, .scary-transclusion .mw-parser-output {
display: inline;
}
/* hide last empty paragraph at the end */
div.mw-parser-output > p:last-child > br:only-child {
display: none;
}
/* Fix empty parameter descriptions on api.php having no height, causing misalignments that seriously impede readability */
.apihelp-parameters dd:empty::before {
content: " ";
}
.block {
display: block;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
hr.space {
height: 4px;
background: none;
border: 0;
}
.page-content .vertical-align-top * {
vertical-align: top;
}
.page-content .vertical-align-bottom * {
vertical-align: bottom;
}
/* Drowning Table No Border */
.drowning-table-no-border {
border: none;
}
/* 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;
}
/* Box at the top of all pages when the user has a new message on their User_talk: page */
.usermessage {
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
}
img.max100 {
max-width: 100%;
height: auto;
}
/***********************************************************************************************************
* interface layout and styles for widgets outside of content box
***********************************************************************************************************/
:root {
--layout-topbar-height: 35px; /* height of wiki.gg topbar */
--layout-sidebar-width: 180px; /* width of side navbar, without gap */
--layout-sidespace: 24px; /* whitespace width on most left and most right */
--layout-box-gap: 2px;
--layout-box-border-radius: 5px;
--layout-logo-scale: 1;
--layout-logo-box-height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale) + var(--layout-box-gap));
--dropdown-item-padding-x: 12px;
--dropdown-item-padding-y: 4px;
}
/**** Main Layout START ***********************************************************/
/**
* Note: wiki.gg topbar is position:fixed. So we don't need to consider it in grid layout
*/
html, body {
min-height: 100%;
}
html {
height: 100%;
scroll-padding-top: calc(var(--layout-topbar-height) + 10px);
}
body {
height: auto;
}
/*** main grid container ***/
body {
/* self */
box-sizing: border-box;
/* grid */
display: grid;
grid-template-columns: [body-left] var(--layout-sidespace) [aside-left] var(--layout-sidebar-width) [aside-right nav-left content-left footer-left] minmax(0, 1fr) [nav-right content-right footer-right] var(--layout-sidespace) [body-right];
grid-template-rows: [body-start] var(--layout-topbar-height) [page-start logo-start] var(--layout-logo-box-height) [logo-end 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];
gap: 0 var(--layout-box-gap);
}
/*** grid items ***/
/* Flatten DOM structure. Therefore we have following grid items under body grid container:
* div#mw-page-base, div#mw-head-base, #mw-navigation>h2, div#mw-head, div#mw-panel, div#content.mw-body, div#footer, footer.
*/
body > .content-wrapper,
#mw-navigation {
display: contents;
}
/** unused, hide them **/
#mw-head-base,
#mw-navigation > h2 {
display: none;
}
/** side nav bar **/
#mw-panel {
grid-column: aside-left/aside-right;
grid-row: aside-start/aside-end;
margin-bottom: var(--layout-box-gap);
float: none;
width: unset;
padding: 0;
}
/** nav **/
#mw-head {
grid-column: nav-left/nav-right;
grid-row: nav-start/nav-end;
}
/** content **/
.mw-body {
grid-column: content-left/content-right;
grid-row: content-start/content-end;
}
/* For some page such as api.php, .mw-body is the only child, so take up all space. */
.mw-body:first-child {
grid-column: body-left/body-right;
grid-row: page-start/page-end;
}
/** #footer: content footer **/
#footer {
grid-column: footer-left/footer-right;
grid-row: footer-start/footer-end;
margin: 0;
z-index: 0;
}
/** used to gen box shadow for main box (nav + content + #footer) **/
#mw-page-base {
grid-column: content-left/content-right;
grid-row: nav-start/footer-end;
height: 100%;
}
/** wiki.gg footer bar **/
body > footer {
grid-column: body-left/body-right;
grid-row: page-end/body-end;
}
/*** logo block. It is absolute position ***/
#p-logo {
position: absolute;
width: 100%;
height: var(--layout-logo-box-height);
left: 0;
top: calc(var(--layout-topbar-height) + 8px);
background: var(--theme-site-logo-image) calc(var(--layout-sidespace) + var(--layout-box-gap)) center/var(--theme-site-logo-width) auto no-repeat;
display: flex;
align-items: center;
justify-content: center;
filter: var(--theme-site-logo-filter);
margin-bottom: 0;
}
/* use logo image as <a>'s background will sometime flicker when hovered on Firefox,
* I still don't know why, but move background to #p-logo can avoid this issue.
*/
#p-logo .mw-wiki-logo {
width: var(--theme-site-logo-width);
height: var(--theme-site-logo-height);
margin: auto auto auto calc(var(--layout-sidespace) + var(--layout-box-gap));
background: none; /* logo flicker fix */
}
/**** Main Layout END ***********************************************************/
/********* side panel START *********/
#mw-panel {
--list-body-font-size: 14px;
--list-body-padding-x: 6px;
--list-body-padding-y: 3px;
}
.theme-dark #mw-panel {
padding-top: 10px;
}
#mw-panel a {
text-decoration: none;
}
/* section box */
#mw-panel .portal {
border-image-source: url(https://dontstarve.wiki.gg/images/9/97/Sidebar.png);
border-image-slice: 47 32 43 38 fill;
border-image-width: auto;
padding: 32px 28px 32px 34px;
border-image-outset: 2px;
font-family: "Belisa_plumilla";
margin: 0;
}
.theme-dark #mw-panel .portal {
border-image-source: url(https://dontstarve.wiki.gg/images/b/ba/Sidebar-dark.png);
border-image-slice: 52 62 fill;
--border-image-scale: 0.5;
border-image-width: calc(52px * var(--border-image-scale)) calc(62px * var(--border-image-scale));
padding: 16px 20px;
margin-bottom: 8px;
}
#mw-panel .portal .vector-menu-heading {
/* section heading */
background: none;
margin: 0;
padding: 6px 10px;
font-size: 28px;
line-height: 36px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--theme-header-color);
text-shadow: var(--theme-header-shadow);
}
/* show the heading of first section */
#mw-panel #p-logo + .portal .vector-menu-heading {
display: flex;
}
/* arrow icon */
#mw-panel .portal .vector-menu-heading::after {
content: "";
display: block;
background: url(https://dontstarve.wiki.gg/images/f/fb/Arrow-down.png) center center/contain no-repeat;
width: 14px;
height: 14px;
flex: 0 0 auto;
transform: scaleY(-1);
}
.theme-dark #mw-panel .portal .vector-menu-heading::after {
filter: invert(100%);
}
#mw-panel .portal .vector-menu-heading:hover::after {
border-color: var(--theme-icon-color-hover) transparent;
}
#mw-panel .portal.collapsed .vector-menu-heading::after {
transform: scaleY(1);
}
/* list body */
#mw-panel .portal .body {
background: none;
border: 0;
padding: 0;
margin: 0 0 0 0;
border-top: var(--theme-border-width) solid var(--theme-border-color);
}
#mw-panel .portal .body ul {
padding: var(--theme-gap) 4px 4px;
}
#mw-panel .portal .body li {
margin: 0;
padding: 0;
font-size: 22px;
line-height: 28px;
text-shadow: var(--theme-text-shadow);
}
#mw-panel .portal .body li:hover {
background: var(--theme-highlight-background);
}
#mw-panel .portal .body li a {
display: block;
padding: var(--list-body-padding-y) var(--list-body-padding-x);
color: var(--theme-link-color);
}
#mw-panel .portal .body li a:visited {
color: var(--theme-link-color-visited);
}
#mw-panel .portal .body li a:hover {
color: var(--theme-link-color-hover);
}
/* "Atom" RSS Feed */
#mw-panel .portal .body li a.feedlink {
text-indent: calc(var(--list-body-font-size) + 2px);
background-position: var(--list-body-padding-x) center; /* align icon with other text */
}
/********* side panel END *********/
/********* main content box *********/
/**** background box for nav+content+#footer ****/
#mw-page-base {
--border-image-scale: 0.5;
border-image-source: url(https://dontstarve.wiki.gg/images/e/e7/Main-box.png);
border-image-slice: 90 68 84 72 fill;
border-image-width: calc(90px * var(--border-image-scale)) calc(68px * var(--border-image-scale)) calc(84px * var(--border-image-scale)) calc(72px * var(--border-image-scale));
z-index: -1;
position: relative;
background: none;
}
.theme-dark #mw-page-base {
border-image-source: url(https://dontstarve.wiki.gg/images/5/58/Main-box-dark.png);
border-image-slice: 76 60 62 60 fill;
border-image-width: calc(76px * var(--border-image-scale)) calc(60px * var(--border-image-scale)) calc(62px * var(--border-image-scale)) calc(60px * var(--border-image-scale));
border-image-repeat: repeat round;
}
#mw-page-base::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(https://dontstarve.wiki.gg/images/e/e9/Main-box-top.png) center top/auto calc(60px * var(--border-image-scale)) no-repeat, url(https://dontstarve.wiki.gg/images/b/bc/Main-box-bottom.png) center bottom/calc(172px * var(--border-image-scale)) auto no-repeat;
}
.theme-dark #mw-page-base::before {
background: url(https://dontstarve.wiki.gg/images/e/e0/Main-box-top-dark.png) center top/auto calc(50px * var(--border-image-scale)) no-repeat;
}
#mw-head, #content, #footer {
box-sizing: border-box;
background-clip: padding-box;
border: 0;
margin: 0;
}
#mw-head {
border-bottom-width: 0;
}
#content {
border-top-width: 0;
border-bottom-width: 0;
}
#footer {
border-top-width: 0;
}
/****** navbar (#mw-head) ******/
/* reset */
#mw-head * {
float: unset;
font-size: unset;
line-height: unset;
}
/* tabs layout */
#mw-head {
--layout-padding: 12px;
--layout-gap: 12px;
--tab-padding-x: 12px;
--tab-padding-y: 5px;
--icon-size: 1em;
position: relative;
display: flex;
justify-content: space-between;
align-items: stretch;
width: auto;
padding: var(--layout-padding) 0 2px;
margin: 30px 28px 0 27px;
background: var(--theme-background);
}
.theme-dark #mw-head {
margin: 23px 16px 0 16px;
}
#mw-head::after {
content: "";
display: block;
width: 100%;
height: 4px;
position: absolute;
bottom: -4px;
left: 0;
background: url(https://dontstarve.wiki.gg/images/a/a8/Nav-hr.png) center center/100% 100% no-repeat;
}
.theme-dark #mw-head::after {
display: none;
}
#mw-head #left-navigation, #mw-head #right-navigation {
float: none;
flex: 1 1 auto;
margin: 0;
display: flex;
align-items: flex-end;
}
#mw-head #left-navigation::before, #mw-head #left-navigation::after, #mw-head #right-navigation::before, #mw-head #right-navigation::after {
content: "";
display: block;
height: 100%;
border-bottom: 0;
background: none;
}
#mw-head #left-navigation {
justify-content: flex-start;
}
#mw-head #right-navigation {
justify-content: flex-end;
}
#mw-head #left-navigation::before, #mw-head #right-navigation::after {
flex: 0 0 var(--layout-padding);
}
#mw-head #left-navigation::after, #mw-head #right-navigation::before {
flex: 1 1 auto;
}
/*** tabs of navbar ***/
/* reset */
#mw-head .vector-menu,
#mw-head .vector-menu * {
background: none;
}
/* tabs list */
#mw-head .vector-menu-tabs {
height: unset;
padding: unset;
}
#mw-head .vector-menu-tabs .vector-menu-content-list {
display: flex;
align-items: flex-end;
}
/* tab */
#mw-head {
--theme-tab-border-style: solid;
--theme-tab-border-width: 1px;
--theme-border-bottom-style: solid;
--theme-border-bottom-width: 1px;
--theme-border-bottom-color: var(--theme-tab-border-color-selected);
--theme-border-bottom-color-selected: transparent;
}
#mw-head .vector-menu-tabs .mw-list-item,
#mw-head .vector-menu-dropdown {
/* outer box */
background: var(--theme-tab-background);
border-bottom: 0;
border-radius: var(--theme-box-border-radius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: relative;
margin-right: var(--layout-gap); /* make space for gap */
}
#mw-head .vector-menu-tabs .mw-list-item::after,
#mw-head .vector-menu-dropdown::after {
/* gap */
content: "";
display: block;
width: var(--layout-gap);
height: 100%;
border-bottom: 0;
position: absolute;
left: 100%;
bottom: calc(0px - var(--theme-border-bottom-width));
background: var(--theme-background-shadow);
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
/* inner box */
height: auto;
margin: 0;
padding: var(--tab-padding-y) var(--tab-padding-x);
border: 0;
--border-image-scale: 0.5;
border-image-source: url(https://dontstarve.wiki.gg/images/2/26/Nav-tab-background.png);
border-image-slice: 8 12;
border-image-width: calc(8px * var(--border-image-scale)) calc(12px * var(--border-image-scale));
border-image-outset: 2px 3px;
background: var(--theme-tab-background);
color: var(--theme-link-color);
}
#mw-head .vector-menu-tabs .mw-list-item a:hover,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover {
color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-list-item a.new,
#mw-head .vector-menu-dropdown .vector-menu-heading.new {
color: var(--theme-link-color-redlink);
}
#mw-head .vector-menu-tabs .mw-list-item.selected {
/* outer box: selected */
--border-image-scale: 0.5;
border-image-source: url(https://dontstarve.wiki.gg/images/6/63/Nav-tab-background-selected.png);
border-image-slice: 8 12;
border-image-width: calc(8px * var(--border-image-scale)) calc(12px * var(--border-image-scale));
border-image-outset: 2px 3px;
background: var(--theme-tab-background-selected);
}
#mw-head .vector-menu-tabs .mw-list-item.selected:after {
/* gap */
bottom: 0;
padding-left: var(--theme-tab-border-width); /* x-position offset */
}
#mw-head .vector-menu-tabs .mw-list-item.selected a {
/* inner box: selected */
border: 0;
border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color-selected);
background: none;
color: var(--theme-text-color);
}
/* dropdown menu*/
#mw-head .vector-menu-dropdown .vector-menu-heading {
/* tab label */
position: relative;
display: flex;
align-items: center;
gap: 3px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
/* arrow icon */
background: none;
opacity: unset;
content: "";
display: block;
background: url(https://dontstarve.wiki.gg/images/f/fb/Arrow-down.png) center center/contain no-repeat;
width: 14px;
height: 14px;
}
.theme-dark #mw-head .vector-menu-dropdown .vector-menu-heading::after {
filter: invert(100%);
}
#mw-head .vector-menu-dropdown:hover .vector-menu-heading::after {
/* .vector-menu-heading is covered by .vector-menu-checkbox, therefore we can't use .vector-menu-heading:hover::after */
border-color: var(--theme-icon-color-hover) transparent;
}
#mw-head .vector-menu-dropdown .vector-menu-content {
/* dropdown list body */
border: var(--theme-dropdown-border);
border-radius: var(--theme-box-border-radius);
background: var(--theme-dropdown-background);
backdrop-filter: var(--theme-box-back-backdrop-filter);
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0; /* reset */
z-index: 8; /* over the edit area */
}
#mw-head .vector-menu-dropdown .vector-menu-content ul {
padding: 4px;
}
#mw-head .vector-menu-dropdown .vector-menu-content li:hover {
background: var(--theme-highlight-background);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a {
display: block;
padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
text-decoration: none;
color: var(--theme-link-color);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:visited {
color: var(--theme-link-color-visited);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:hover {
color: var(--theme-link-color-hover);
}
/* "more" menu in #right-navigation */
#mw-head #right-navigation .vector-menu-dropdown {
margin-right: 0;
}
#mw-head #right-navigation .vector-menu-dropdown::after {
display: none;
}
#mw-head #right-navigation .vector-menu-dropdown .vector-menu-content {
left: auto;
right: 0;
}
/* watch/unwatch star */
#mw-head .vector-menu-tabs .mw-watchlink.icon a {
--theme-link-color-hover: var(--theme-icon-color-hover);
width: 1.5em; /* same as line height */
height: 1.5em;
box-sizing: content-box;
padding: var(--tab-padding-y);
color: transparent; /**<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. **/
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a::before {
content: "";
display: block;
position: unset;
width: var(--icon-size);
height: var(--icon-size);
margin: calc((1.5em - var(--icon-size)) / 2);
background-size: 100% 100%;
background-position: center center;
}
.theme-dark #mw-head .vector-menu-tabs .mw-watchlink.icon a::before {
width: calc(var(--icon-size) + 2px);
height: calc(var(--icon-size) + 2px);
margin: calc((1.5em - var(--icon-size) - 2px) / 2);
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a span {
display: none;
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a::before {
transform-origin: 50% calc(var(--icon-size) / 2 * 1.125);
}
#mw-head .vector-menu-tabs #ca-watch.icon a::before {
/* line star */
background-image: url(https://dontstarve.wiki.gg/images/1/11/Star_off.png);
}
#mw-head .vector-menu-tabs #ca-unwatch.icon a::before {
/* solid star */
background-image: url(https://dontstarve.wiki.gg/images/8/85/Star_on.png);
}
/*** search form ***/
#mw-head #p-search {
border-image-source: url(https://dontstarve.wiki.gg/images/d/d4/Search-background.png);
border-image-slice: 12 26 11 26 fill;
border-image-width: auto;
padding: 8px 14px 0px 28px;
position: absolute;
top: -102px;
z-index: 90;
margin: 0;
align-self: stretch;
}
.theme-dark #mw-head #p-search {
border-image-source: url(https://dontstarve.wiki.gg/images/1/1a/Search-background-dark.png);
border-image-slice: 8 8 19 19 fill;
border-image-repeat: stretch;
padding: 6px 20px 2px 24px;
}
#mw-head #p-search .vector-search-box-inner {
width: 45vw;
max-width: 480px;
}
#mw-head #p-search form {
margin: 0;
}
#mw-head #p-search .vector-search-box-input {
font-size: 16px;
border: none;
background: none;
color: var(--theme-text-color);
height: 36px;
padding: 2px 28px 2px 0;
}
#mw-head #p-search .vector-search-box-input:hover {
border-color: var(--theme-border-color-hover);
}
#mw-head #p-search .vector-search-box-input:focus {
border-color: var(--theme-border-color-focus);
box-shadow: var(--theme-shadow-focus);
outline: 0;
z-index: 1100; /* .suggestions: 1099 */
}
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
z-index: 1101;
}
#mw-head #p-search .vector-search-box-input::placeholder {
color: var(--theme-text-color-placeholder);
font-family: "Belisa_plumilla";
font-size: 24px;
}
#mw-head #p-search .mw-searchButton {
opacity: 0;
}
#mw-head #p-search .searchButton {
width: 26px;
min-width: unset;
opacity: 1;
background: url(https://dontstarve.wiki.gg/images/1/14/Search-icon.png) center center/85% auto no-repeat;
}
/*** search result suggestions ***/
.suggestions {
background: var(--theme-background);
box-sizing: border-box;
margin-top: 0;
box-shadow: var(--theme-box-shadow);
backdrop-filter: var(--theme-box-back-backdrop-filter);
}
.suggestions .suggestions-results,
.suggestions .suggestions-special {
background: none;
}
.suggestions .suggestions-results {
border: 1px solid var(--theme-border-color);
border-top: 0;
border-bottom-color: var(--theme-rule-color);
}
.suggestions .suggestions-results:empty {
border-bottom: 0;
}
.suggestions .suggestions-result,
.suggestions .suggestions-special .special-label,
.suggestions .suggestions-special .special-query {
color: var(--theme-text-color);
}
.suggestions .suggestions-result {
padding: 1px 4px;
}
.suggestions .suggestions-special {
margin: 0;
padding: 2px 4px 4px;
border: 1px solid var(--theme-border-color);
border-top: 0;
border-radius: var(--theme-box-border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus {
color: var(--theme-link-color);
}
.suggestions .suggestions-result-current {
background: var(--theme-highlight-background);
color: var(--theme-link-color-hover);
}
.suggestions .suggestions-result-current .special-label, .suggestions .suggestions-result-current .special-query {
color: var(--theme-link-color-hover);
}
/**** main content box ****/
/* font */
.vector-body {
font-size: unset; /* reset */
line-height: 1.7142857143;
}
/** layout **/
#content {
color: var(--theme-text-color);
padding: 0;
display: flex;
flex-direction: column;
background: none;
margin: 0 30px;
--theme-heading-rule-color-h1: var(--theme-border-color);
--theme-heading-rule-color-h2: var(--theme-border-color);
--layout-padding-x: 24px;
--layout-padding-y: 16px;
}
.theme-dark #content {
margin: 0 16px;
}
.content-body {
flex: 1 1 auto;
}
.content-body > main {
align-self: stretch;
padding: var(--layout-padding-y) var(--layout-padding-x);
}
#bodyContent {
display: flex;
flex-direction: column;
position: unset;
}
/** main heading section **/
#firstHeading {
overflow: hidden; /* override mw internal css, fix scroll-x issue for narrow width */
}
/** the " < rootpage < page " crumb **/
#contentSub, #contentSub2 {
margin: 0;
color: var(--theme-text-color-note);
font-size: 12px;
line-height: 20px;
}
#contentSub .subpages {
color: transparent;
line-height: 20px;
font-size: 0;
}
#contentSub .subpages a {
font-size: 12px;
vertical-align: middle;
display: inline-flex;
align-items: center;
padding-left: 4px;
}
#contentSub .subpages a::before {
content: "";
display: inline-block;
height: 4px;
width: 4px;
border-color: var(--theme-icon-color);
border-style: solid;
border-width: 0 0 2px 2px;
margin: 0 2px 0 0;
transform: rotate(45deg);
}
#contentSub::after {
/* the spacing and line between heading section and content body box */
content: "";
display: block;
height: 0;
border-bottom: 1px solid var(--theme-heading-rule-color-h2);
margin-top: 4px;
margin-bottom: var(--layout-padding-y);
}
/** content body box **/
#mw-content-text {
flex: 1 1 auto;
min-height: 30em;
}
li.gallerybox div.thumb {
border: 1px solid var(--theme-border-color);
background: none;
}
/*** "category:" box ***/
#catlinks {
background: none;
border-width: 0;
border-image-source: url(https://dontstarve.wiki.gg/images/e/eb/Box-border.png);
border-image-slice: 10;
border-image-width: 5px;
padding: 12px 20px;
}
/*** ads ***/
div.games-showcase-header {
margin: 0;
padding: var(--layout-padding-y) var(--layout-padding-x) 0;
}
div.games-showcase-footer {
margin: 0;
padding: 0 var(--layout-padding-x) var(--layout-padding-y);
}
.content-body > .games-showcase-sidebar {
margin: 0;
padding: var(--layout-padding-y) var(--layout-padding-x) 0 0;
}
.games-showcase-header img, .games-showcase-footer img {
height: 100%;
width: auto;
object-fit: contain;
}
@media screen and (max-width: 1100px) {
.games-showcase-header img, .games-showcase-footer img {
height: auto !important;
width: 100% !important;
object-fit: contain;
}
}
@media screen and (max-width: 926px) {
.games-showcase-header img, .games-showcase-footer img {
object-position: 50%;
height: 105px !important;
width: 100% !important;
object-fit: none !important;
}
}
aside.games-showcase-sidebar div.sidebar-showcase {
padding: 0 0 var(--layout-padding-y) 0;
}
/**** #footer (copyright info) ****/
#footer {
background: none;
margin: 0 30px 36px;
padding: 16px 24px;
border-radius: 0 0 var(--theme-box-border-radius) var(--theme-box-border-radius);
position: relative;
/* grid */
display: grid;
grid-template-columns: [l] 1fr 0fr [r];
grid-template-rows: [t] auto auto [b];
z-index: 0; /* covered by content */
}
.theme-dark #footer {
margin: 0 16px 28px 16px;
}
.mw-footer li {
color: var(--theme-text-color);
}
#footer a {
color: var(--theme-link-color);
}
#footer a:hover {
color: var(--theme-link-color-hover);
}
#footer-info {
font-size: 12px;
display: contents;
}
#footer ul li {
font-size: inherit;
line-height: 1.5;
padding: 0;
}
#footer-icons {
grid-column: span 1/r;
grid-row: t/b;
place-self: end;
}
#footer #footer-info-lastmod {
grid-column: l/span 1;
grid-row: t/span 1;
place-self: start;
margin-bottom: 1em;
}
#footer #footer-info-copyright {
grid-column: l/span 1;
grid-row: span 1/b;
place-self: end stretch;
position: relative;
padding-right: 100px;
}
#footer-info-copyright img {
position: absolute;
right: 0;
bottom: 0;
height: 31px;
width: auto;
}
#footer-places,
#footer > div {
display: none;
}
/****** responsive Layout ******/
@media screen and (max-width: 1800px) {
:root {
--layout-sidespace: 0px; /* whitespace width on most left and most right,must with "px" */
}
} /* screen and (max-width: 1800px) */
@media screen and (max-width: 1365px) {
:root {
--layout-logo-scale: 0.75;
--layout-logo-box-width: calc(var(--theme-site-logo-width) * var(--layout-logo-scale) + var(--layout-box-gap) + 18px);
--layout-logo-box-margin-left: 8px;
--layout-logo-box-height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale) + var(--layout-box-gap) + 12px);
}
/* change layout */
body {
grid-template-columns: [body-left] 0 [aside-left nav-left content-left footer-left] minmax(0, 1fr) [content-right aside-right nav-right footer-right] 0 [body-right];
grid-template-rows: [body-start] var(--layout-topbar-height) [page-start logo-start aside-start] var(--layout-logo-box-height) [logo-end aside-end nav-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [page-end] 0fr [body-end];
}
/* re-style navbar */
#mw-panel {
align-self: end;
display: flex;
align-items: flex-end;
margin-left: var(--layout-logo-box-width);
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
/* Make #p-logo be positioned relative to #mw-panel. By this way, we can safely apply filter/backdrop-filter on #mw-panel */
position: relative;
z-index: 1;
--border-image-scale: 0.25;
border-image-source: url(https://dontstarve.wiki.gg/images/e/e7/Main-box.png);
border-image-slice: 90 68 84 72 fill;
border-image-width: calc(90px * var(--border-image-scale)) calc(68px * var(--border-image-scale)) calc(84px * var(--border-image-scale)) calc(72px * var(--border-image-scale));
background: none;
box-shadow: none;
border-image-outset: 12px 0 10px;
padding: 0 16px;
margin-right: 6px;
}
.theme-dark #mw-panel {
--border-image-scale: 0.5;
border-image-source: url(https://dontstarve.wiki.gg/images/5/58/Main-box-dark.png);
border-image-slice: 76 60 62 60 fill;
border-image-width: calc(76px * var(--border-image-scale)) calc(60px * var(--border-image-scale)) calc(62px * var(--border-image-scale)) calc(60px * var(--border-image-scale));
padding: 0 12px;
border-image-outset: 14px 0 8px;
margin-right: 0;
}
#mw-panel .portal, .theme-dark #mw-panel .portal {
background: none;
box-shadow: none;
border: 0;
margin: 0;
padding: 0;
position: relative;
}
#mw-panel .portal .vector-menu-heading, .theme-dark #mw-panel .portal .vector-menu-heading {
padding: 9px 12px;
border: 0;
border-radius: 0;
background: none;
}
#mw-panel .portal .vector-menu-heading::after, .theme-dark #mw-panel .portal .vector-menu-heading::after {
border-width: 6px 5px 0; /* change arrow direction */
margin-left: 4px;
}
#mw-panel .portal .body, .theme-dark #mw-panel .portal .body {
display: none !important; /* !important is required, since there is inline-css from sidebar collapse/expand */
position: absolute;
left: 0;
top: 100%;
width: max-content;
min-width: 8em;
border: var(--theme-dropdown-border);
border-radius: var(--theme-box-border-radius);
background: var(--theme-dropdown-background);
backdrop-filter: var(--theme-box-back-backdrop-filter);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#mw-panel .portal .body li a, .theme-dark #mw-panel .portal .body li a {
padding: 6px 12px;
}
#mw-panel .portal.expanded .vector-menu-heading, #mw-panel .portal:hover .vector-menu-heading, .theme-dark #mw-panel .portal.expanded .vector-menu-heading, .theme-dark #mw-panel .portal:hover .vector-menu-heading {
background: var(--theme-highlight-background);
border-radius: 0;
}
#mw-panel .portal.expanded .vector-menu-heading::after, #mw-panel .portal:hover .vector-menu-heading::after, .theme-dark #mw-panel .portal.expanded .vector-menu-heading::after, .theme-dark #mw-panel .portal:hover .vector-menu-heading::after {
transform: scaleY(-1);
}
#mw-panel .portal.expanded .body, #mw-panel .portal:hover .body, .theme-dark #mw-panel .portal.expanded .body, .theme-dark #mw-panel .portal:hover .body {
display: block !important;
}
/* logo: smaller, and position relative to #mw-panel */
#p-logo {
background-size: calc(var(--theme-site-logo-width) * var(--layout-logo-scale)) auto;
background-position: 0 center;
top: unset;
bottom: calc(0px - var(--layout-box-gap) / 2);
left: calc(var(--layout-logo-box-margin-left) - var(--layout-logo-box-width));
width: auto;
height: auto;
}
#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 auto auto 0;
}
#mw-head #p-search {
top: -140px;
right: -8px;
font-size: 14px;
}
#mw-head #p-search .vector-search-box-input {
height: 28px;
padding: 2px 26px 2px 4px;
}
#mw-head #p-search .vector-search-box-inner {
width: 30vw;
max-width: 480px;
}
} /* screen and (max-width: 1365px) */
@media screen and (max-width: 900px) {
:root {
--layout-logo-scale: 0.666666666;
--layout-box-gap: 6px;
--layout-logo-box-height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale) + var(--layout-box-gap) + 20px);
}
/* change layout */
body {
grid-template-columns: [body-left aside-left nav-left content-left footer-left] minmax(0, 1fr) [content-right aside-right nav-right footer-right body-right];
}
#mw-page-base,
#mw-head, #content, #footer {
border-radius: 0;
border-left: 0;
border-right: 0;
}
#mw-panel {
margin-left: calc(var(--theme-site-logo-width) * var(--layout-logo-scale) + var(--layout-box-gap) * 3);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
#p-logo {
left: calc(0px - var(--theme-site-logo-width) * var(--layout-logo-scale) - var(--layout-box-gap) * 2);
}
#mw-head #p-search {
top: -144px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
#mw-head #p-search .vector-search-box-inner {
width: 40vw;
max-width: 360px;
}
} /* screen and (max-width:900px) */
@media screen and (max-width: 720px) {
#content {
--layout-padding-x: 12px;
--layout-padding-y: 12px;
}
/* icon navbar tabs */
#mw-head {
top: unset; /* reset */
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='none' height='24' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none' stroke='none'/%3E%3Cpath d='M4 4l4 16l4 -14l4 14l4 -16'/%3E%3C/svg%3E");
--icon-size: 1.5em;
--layout-gap: 8px;
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
--theme-link-color-hover: var(--theme-icon-color-hover);
width: 1.5em; /* same as line height */
height: 1.5em;
box-sizing: content-box;
padding: var(--tab-padding-y);
color: transparent; /**<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. **/
}
#mw-head .vector-menu-tabs .mw-list-item a::before,
#mw-head .vector-menu-dropdown .vector-menu-heading::before {
content: "";
display: block;
position: unset;
background-image: none;
width: var(--icon-size);
height: var(--icon-size);
margin: calc((1.5em - var(--icon-size)) / 2);
--mask: var(--icon) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-link-color);
}
#mw-head .vector-menu-tabs .mw-list-item a:hover::before,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover::before {
background-color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-list-item a span,
#mw-head .vector-menu-dropdown .vector-menu-heading span {
display: none;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
display: none;
}
#ca-edit {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M29.12,6.05,26,2.88a3,3,0,0,0-4.24,0L6.29,18.29a3.06,3.06,0,0,0-.72,1.18L2.08,29.92l10.46-3.49a3.15,3.15,0,0,0,1.17-.72L29.12,10.29a3,3,0,0,0,0-4.24Zm-21,13.28,8.75-8.74,1.58,1.58L9.67,20.92ZM18.24,9.17l1.59-1.58,4.58,4.58-1.58,1.59ZM7.1,21.19l3.72,3.71L5.25,26.75Zm5.57,2.73-1.59-1.59,8.75-8.74,1.58,1.58Zm15-15-1.88,1.88L21.24,6.17l1.88-1.88A1,1,0,0,1,23.83,4a1,1,0,0,1,.71.29l3.17,3.18a1,1,0,0,1,.29.7A1,1,0,0,1,27.71,8.88Z'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-view,
#ca-view-foreign {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M30.89,15.54A17,17,0,0,0,16,6,17,17,0,0,0,1.11,15.54L.87,16l.24.46A17,17,0,0,0,16,26a17,17,0,0,0,14.89-9.54l.24-.46ZM24,16a8,8,0,1,1-8-8A8,8,0,0,1,24,16ZM3.14,16a16.47,16.47,0,0,1,4.14-4.89,10,10,0,0,0,0,9.78A16.47,16.47,0,0,1,3.14,16Zm21.58,4.89a10,10,0,0,0,0-9.78A16.47,16.47,0,0,1,28.86,16,16.47,16.47,0,0,1,24.72,20.89Z'/%3E%3Cpath d='M16,20a4,4,0,1,0-4-4A4,4,0,0,0,16,20Zm0-6a2,2,0,1,1-2,2A2,2,0,0,1,16,14Z'/%3E%3C/g%3E%3C/svg%3E");
}
#left-navigation li[id^=ca-nstab-] {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpolygon points='12 15 11 15 11 17 12 17 20 17 21 17 21 15 20 15 12 15'/%3E%3Cpolygon points='12 19 11 19 11 21 12 21 15 21 16 21 16 19 15 19 12 19'/%3E%3Cpath d='M20.41,3H5V26a3,3,0,0,0,3,3H24a3,3,0,0,0,3-3V9.59ZM20,5.41,24.59,10H21a1,1,0,0,1-1-1ZM24,27H8a1,1,0,0,1-1-1V5H18V9a3,3,0,0,0,3,3h4V26A1,1,0,0,1,24,27Z'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-history {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z'/%3E%3Cpath d='M17,7H15v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-talk {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M26,12H24V6a3,3,0,0,0-3-3H6A3,3,0,0,0,3,6V24.41l5.12-5.12A1.05,1.05,0,0,1,8.83,19H12v3a3,3,0,0,0,3,3h8.17a1.05,1.05,0,0,1,.71.29L29,30.41V15A3,3,0,0,0,26,12ZM12,15v2H8.83a3,3,0,0,0-2.12.88L5,19.59V6A1,1,0,0,1,6,5H21a1,1,0,0,1,1,1v6H15A3,3,0,0,0,12,15ZM27,25.59l-1.71-1.71A3,3,0,0,0,23.17,23H15a1,1,0,0,1-1-1V15a1,1,0,0,1,1-1H26a1,1,0,0,1,1,1Z'/%3E%3C/g%3E%3C/svg%3E");
}
#t-contributions {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg enable-background='new 0 0 32 32' id='Stock_cut' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdesc/%3E%3Cpath d='M27,12V5h-7v0 c0-2.209-1.791-4-4-4h0c-2.209,0-4,1.791-4,4v0H1v7h0c2.209,0,4,1.791,4,4v0c0,2.209-1.791,4-4,4h0v11h11v0c0-2.209,1.791-4,4-4h0 c2.209,0,4,1.791,4,4v0h7V20h0c2.209,0,4-1.791,4-4v0C31,13.791,29.209,12,27,12L27,12z' fill='none' stroke='%23000000' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E");
}
#ca-addsection {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpolygon points='29 15 17 15 17 3 15 3 15 15 3 15 3 17 15 17 15 28 17 28 17 17 29 17 29 15'/%3E%3C/g%3E%3C/svg%3E");
}
#ca-viewsource {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='heroicon-ui' d='M20.59 12l-3.3-3.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4l3.3-3.3zM3.4 12l3.3 3.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L3.4 12zm7.56 8.24a1 1 0 0 1-1.94-.48l4-16a1 1 0 1 1 1.94.48l-4 16z'/%3E%3C/svg%3E");
}
#p-variants {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm8,13a24.28,24.28,0,0,0-.41-3.62c2.19.91,3.75,2.19,4.25,3.62Zm-2,0H17V10a20.9,20.9,0,0,1,4.34.63A20.26,20.26,0,0,1,22,15ZM17,8V4.19c1.43.5,2.71,2.06,3.62,4.25A24.28,24.28,0,0,0,17,8ZM15,4.19V8a24.28,24.28,0,0,0-3.62.41C12.29,6.25,13.57,4.69,15,4.19ZM15,10v5H10a20.26,20.26,0,0,1,.63-4.34A20.9,20.9,0,0,1,15,10ZM8,15H4.19c.5-1.43,2.06-2.71,4.25-3.62A24.28,24.28,0,0,0,8,15Zm0,2a24.28,24.28,0,0,0,.41,3.62C6.25,19.71,4.69,18.43,4.19,17Zm2,0h5v5a20.9,20.9,0,0,1-4.34-.63A20.26,20.26,0,0,1,10,17Zm5,7v3.84c-1.43-.5-2.71-2.06-3.62-4.25A24.28,24.28,0,0,0,15,24Zm2,3.84V24a24.28,24.28,0,0,0,3.62-.41C19.71,25.75,18.43,27.31,17,27.81ZM17,22V17h5a20.26,20.26,0,0,1-.63,4.34A20.9,20.9,0,0,1,17,22Zm7-5h3.84c-.5,1.43-2.06,2.71-4.25,3.62A24.28,24.28,0,0,0,24,17Zm2.87-6.12A15.11,15.11,0,0,0,23,9a15.11,15.11,0,0,0-1.85-3.87A12.12,12.12,0,0,1,26.84,10.88Zm-16-5.72A15.11,15.11,0,0,0,9,9a15.11,15.11,0,0,0-3.87,1.85A12.12,12.12,0,0,1,10.88,5.16Zm-5.72,16A15.11,15.11,0,0,0,9,23a15.11,15.11,0,0,0,1.85,3.87A12.12,12.12,0,0,1,5.16,21.12Zm16,5.72A15.11,15.11,0,0,0,23,23a15.11,15.11,0,0,0,3.87-1.85A12.12,12.12,0,0,1,21.12,26.84Z'/%3E%3C/g%3E%3C/svg%3E");
}
#p-cactions {
--icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,13a3,3,0,1,0,3,3A3,3,0,0,0,16,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,16,17Z'/%3E%3Cpath d='M24,13a3,3,0,1,0,3,3A3,3,0,0,0,24,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,24,17Z'/%3E%3Cpath d='M8,13a3,3,0,1,0,3,3A3,3,0,0,0,8,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,8,17Z'/%3E%3C/g%3E%3C/svg%3E");
}
:root {
--search-height: 54px; /* space for search form. */
}
body {
grid-template-rows: [body-start] var(--layout-topbar-height) [page-start logo-start] var(--layout-logo-box-height) [logo-end aside-start] auto [aside-end nav-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [page-end] 0fr [body-end];
}
/* footer */
#footer #footer-icons {
float: none;
}
#footer #footer-info-copyright {
grid-column: l/span 2;
padding-right: 0;
padding-bottom: 40px;
}
#footer #footer-info-copyright img {
right: auto;
left: 0;
}
div#p-logo {
left: 0;
top: calc(0px - var(--layout-logo-box-height) - var(--search-height));
width: 100%;
height: var(--layout-logo-box-height);
background-position: center center;
}
div#p-logo .mw-wiki-logo {
margin: auto;
}
#mw-panel {
border-left: 0;
border-radius: 0;
border-bottom: 0;
margin: var(--search-height) 6px 6px;
padding: 0 20px;
align-items: flex-start;
}
#mw-panel::before {
display: none;
}
#mw-panel #p-logo + .portal .vector-menu-heading span,
#mw-panel #p-lang .vector-menu-heading span {
display: none;
}
#mw-panel #p-logo + .portal .vector-menu-heading::before,
#mw-panel #p-lang .vector-menu-heading::before {
content: "";
display: block;
width: calc(1em + 2px + 10px);
height: calc(1em + 2px + 10px);
margin: -5px;
}
#mw-panel #p-logo + .portal .vector-menu-heading::before {
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-category-2' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M14 4h6v6h-6z'%3E%3C/path%3E%3Cpath d='M4 14h6v6h-6z'%3E%3C/path%3E%3Cpath d='M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3Cpath d='M7 7m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: calc(1em + 6px) calc(1em + 6px);
mask-size: calc(1em + 6px) calc(1em + 6px);
-webkit-mask-position: center calc(50% + 1px);
mask-position: center calc(50% + 1px);
background-color: var(--theme-heading-color);
}
#mw-panel #p-lang .vector-menu-heading::before {
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-language' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 5h7'%3E%3C/path%3E%3Cpath d='M9 3v2c0 4.418 -2.239 8 -5 8'%3E%3C/path%3E%3Cpath d='M5 9c0 2.144 2.952 3.908 6.7 4'%3E%3C/path%3E%3Cpath d='M12 20l4 -9l4 9'%3E%3C/path%3E%3Cpath d='M19.1 18h-6.2'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: calc(1em + 6px) calc(1em + 6px);
mask-size: calc(1em + 6px) calc(1em + 6px);
-webkit-mask-position: center calc(50% + 1px);
mask-position: center calc(50% + 1px);
background-color: var(--theme-heading-color);
}
#mw-head #p-search {
width: 90%;
box-sizing: border-box;
top: -144px;
z-index: unset;
max-width: 400px;
left: 50%;
transform: translateX(-50%);
}
#mw-head #p-search::before {
display: none;
}
#mw-head #p-search .vector-search-box-inner {
width: 100%;
max-width: unset;
}
} /* screen and (max-width:720px) */
/***** Notification area *****/
.mw-notification-area-overlay {
position: fixed;
z-index: 9999;
}
.mw-notification-area {
font-size: 14px;
line-height: 1.7142857143;
}
.mw-notification {
color: var(--theme-text-color);
box-sizing: border-box;
border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
backdrop-filter: var(--theme-box-back-backdrop-filter);
box-shadow: var(--theme-box-shadow);
background: var(--theme-box-background), var(--theme-box-back-background);
transform: none;
}
/* Notification boxes on the right, e.g. after patrolling an edit */
.mw-notification.mw-notification-type-error {
color: var(--theme-notice-red-text-color);
border-color: var(--theme-notice-red-text-color);
}
.mw-notification.mw-notification-type-warn {
color: var(--theme-notice-orange-text-color);
border-color: var(--theme-notice-orange-text-color);
}
/****** postedit notification ******/
.postedit-container {
top: 4em;
}
/***********************************************************************************************************
* Over-width table floating-scroll
***********************************************************************************************************/
/*
css for floating-scroll v3.2.0
https://amphiluke.github.io/floating-scroll/
(c) 2022 Amphiluke
*/
.fl-scrolls {
overflow: auto;
position: fixed;
}
.fl-scrolls div {
overflow: hidden;
pointer-events: none;
}
.fl-scrolls div:before {
content: " ";
}
.fl-scrolls, .fl-scrolls div {
font-size: 1px;
line-height: 0;
margin: 0;
padding: 0;
}
.fl-scrolls-hidden div:before {
content: " ";
}
.fl-scrolls-viewport {
position: relative;
}
.fl-scrolls-body {
overflow: auto;
}
.fl-scrolls-viewport .fl-scrolls {
position: absolute;
}
.fl-scrolls-hoverable .fl-scrolls {
opacity: 0;
transition: opacity 0.5s 0.3s;
}
.fl-scrolls-hoverable:hover .fl-scrolls {
opacity: 1;
}
.fl-scrolls:not([data-orientation]), .fl-scrolls[data-orientation=horizontal] {
bottom: 0;
min-height: 17px;
}
.fl-scrolls:not([data-orientation]) div, .fl-scrolls[data-orientation=horizontal] div {
height: 1px;
}
.fl-scrolls-hidden.fl-scrolls:not([data-orientation]), .fl-scrolls-hidden.fl-scrolls[data-orientation=horizontal] {
bottom: 9999px;
}
.fl-scrolls-viewport .fl-scrolls:not([data-orientation]), .fl-scrolls-viewport .fl-scrolls[data-orientation=horizontal] {
left: 0;
}
.fl-scrolls[data-orientation=vertical] {
right: 0;
min-width: 17px;
}
.fl-scrolls[data-orientation=vertical] div {
width: 1px;
}
.fl-scrolls-hidden.fl-scrolls[data-orientation=vertical] {
right: 9999px;
}
.fl-scrolls-viewport .fl-scrolls[data-orientation=vertical] {
top: 0;
}
/*css for wide table */
.table-wide {
clear: both;
position: relative;
}
.mw-parser-output > .table-width {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.table-wide-inner {
overflow-x: auto;
}
.table-wide-inner > table {
margin: 0 !important;
}
.table-wide:before {
box-shadow: inset -15px 0 20px -15px var(--theme-wide-table-shadow-color);
content: "";
display: block;
width: 20px;
height: 100%;
pointer-events: none;
position: absolute;
right: 0;
z-index: 2;
}
/***********************************************************************************************************
* Styles for "real" wiki page content. (in div.mw-parser-output)
***********************************************************************************************************/
/* remove external link icon. */
.mw-parser-output a.external,
.link-https {
padding-right: 0;
background: none;
}
.mw-parser-output > :first-child {
margin-top: 0;
}
/** headings **/
.mw-body h1, .mw-body-content h1, .mw-body-content h2,
.vector-body h3, .vector-body h4,
.vector-body h5, .vector-body h6 {
margin: 0;
color: var(--theme-heading-color);
font-family: inherit;
font-weight: normal;
line-height: 1.25;
}
.mw-body h1, .mw-body-content h1 {
font-size: 32px;
line-height: 40px;
}
.mw-body-content h2 {
font-size: 24px;
line-height: 30px;
margin-top: 18px;
margin-bottom: 9px;
border-bottom: 1px solid var(--theme-heading-rule-color-h2);
padding-bottom: 3px;
}
.vector-body h3 {
font-size: 20px;
line-height: 26px;
margin-top: 14px;
margin-bottom: 7px;
}
.vector-body h4 {
font-size: 16px;
line-height: 22px;
margin-top: 14px;
margin-bottom: 7px;
}
.vector-body h5 {
line-height: 22px;
font-size: 14px;
font-weight: bold;
margin-top: 10px;
margin-bottom: 7px;
}
.vector-body h6 {
line-height: 20px;
font-size: 12px;
font-weight: bold;
margin-top: 7px;
margin-bottom: 7px;
}
/* reduce heading font size: */
@media (max-width: 900px) {
.mw-body h1, .mw-body-content h1 {
font-size: 24px;
line-height: 32px;
}
.mw-body-content h2 {
font-size: 20px;
line-height: 28px;
}
.vector-body h3 {
font-size: 18px;
line-height: 24px;
}
}
/* section edit link */
.mw-editsection {
white-space: nowrap;
color: var(--theme-text-color-note);
}
/** ToC **/
/* base common style */
.toc {
background: none;
border-radius: 4px;
border: 1px solid var(--theme-border-color);
margin-top: 18px;
margin-bottom: 18px;
padding: 0;
font-size: 1em;
min-width: 12em;
}
.toc a {
color: var(--theme-text-color);
}
.toc .tocnumber {
color: var(--theme-text-color-note);
}
.toc .tocnumber:after {
content: ".";
}
/* header */
.toc {
/* arrow */
/* do not change ToC box width when toggle show/hide. */
}
.toc .toctitle {
position: relative;
overflow: hidden;
text-align: left;
padding: 8px;
}
.toc .toctitle h2 {
line-height: 20px;
font-weight: normal;
margin: 0;
border: 0;
display: flex;
align-items: center;
padding: 0 0.5em;
}
.toc .toctitle h2::before {
content: "";
display: block;
width: 12px;
height: 12px;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-text-color);
margin: 0 6px 0 0;
}
.toc .toctogglelabel {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
box-sizing: border-box;
padding-right: 1em;
display: flex;
align-items: center;
justify-content: flex-end;
}
.toc .toctogglespan::before,
.toc .toctogglespan::after,
.toc .toctogglelabel::after {
display: none;
}
.toc .toctogglelabel::before {
content: "";
display: inline-block;
background: none;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-color: var(--theme-icon-color) transparent;
border-width: 0 5px 6px 5px;
vertical-align: middle;
flex: 0 0 auto;
}
.toc .toctogglelabel:hover::before {
border-color: var(--theme-icon-color-hover) transparent;
}
.toc .toctogglecheckbox:checked + .toctitle .toctogglelabel::before {
border-width: 6px 5px 0 5px;
}
.toc .toctogglecheckbox:checked ~ ul {
overflow: hidden;
display: block;
height: 0;
border: 0;
padding-top: 0;
padding-bottom: 0;
}
/* content list */
.mw-content-ltr .toc ul ul,
.mw-content-rtl .toc ul ul {
margin: 0 0 0 1em;
}
.toc > ul {
padding: 0.5em;
border-top: 1px solid var(--theme-border-color);
margin: 0;
}
.toc > ul a {
display: block;
padding: 2px 0.5em;
border-radius: 4px;
transition: background 0.1s;
}
.toc > ul a:hover {
text-decoration: none;
background: var(--theme-highlight-background);
}
.toc > ul li {
margin: 0;
}
/********* Tables *********/
table {
/* fix 100% width table with border */
box-sizing: border-box;
}
table.lined,
table.bordered,
table.cellborder {
border-collapse: collapse;
border-style: solid;
border-color: var(--theme-border-color);
}
table.lined th,
table.lined td {
border-width: 0 0 1px 0;
}
table tfoot:empty,
table thead:empty {
display: none;
}
table.lined td.noline, table.lined tr.noline td {
border-bottom-width: 0;
}
table tr.bottomline td {
border-bottom-width: 1px;
}
table tr.topline td {
border-top-width: 1px;
}
table td.bottomline, table.lined tr.noline td.bottomline {
border-bottom-width: 1px;
}
table td.topline {
border-top-width: 1px;
}
/* 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 var(--theme-border-color);
}
.wikitable,
.wikitable > tr > th,
.wikitable > * > tr > th {
color: inherit;
}
.wikitable {
border-color: var(--theme-border-color);
background: none;
}
.wikitable > tr > th,
.wikitable > * > tr > th,
.wikitable th {
background: var(--theme-th-background);
}
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
border-color: var(--theme-border-color);
}
table.cargoTable.noMerge tr:nth-child(2n) {
background: rgba(127, 127, 127, 0.25);
}
table.cargoTable.noMerge tr:nth-child(2n+1) {
background: none;
}
/*** infobox ***/
/* Styles for all portable infoboxes */
.pi-image-collection .pi-image-collection-tabs {
margin: 6px 0 8px 0;
}
.portable-infobox {
padding: 2px;
border-radius: 3px;
border: 1px solid var(--pi-border-color);
box-sizing: border-box;
margin-bottom: 8px;
margin-left: var(--layout-box-gap);
}
.portable-infobox .pi-title, .portable-infobox .pi-header {
font-size: 18px;
text-align: center;
font-weight: bold;
line-height: 1;
padding: 12px 8px;
}
.portable-infobox .pi-title a:link, .portable-infobox .pi-title .pi-title a:visited, .portable-infobox .pi-header a:link, .portable-infobox .pi-header .pi-title a:visited {
color: var(--theme-text-color) !important;
}
.portable-infobox .pi-image {
margin: 6px auto;
height: auto;
}
.portable-infobox .pi-image + .pi-data, .portable-infobox .pi-image-collection + .pi-data, .portable-infobox .pi-secondary-background + .pi-data, .portable-infobox > .pi-data:first-child, .portable-infobox .pi-secondary-background + * > .pi-data:first-child {
border-top: 0;
}
.portable-infobox code {
border: 0;
background: unset;
}
.portable-infobox .pi-secondary-background, .portable-infobox .pi-title {
background: var(--pi-secondary-background);
color: var(--pi-secondary-background--label);
}
.portable-infobox .pi-data {
border: 0;
}
.portable-infobox .pi-data-label, .portable-infobox .pi-data-value {
font-size: 12px;
line-height: 1.5;
}
.portable-infobox div.pi-data-value {
display: flex;
align-items: center;
width: 65%;
flex-wrap: wrap;
flex: 1 1 auto;
}
.description {
text-align: center;
color: grey;
font-size: 89%;
}
.portable-infobox h3.pi-data-label {
display: flex;
align-items: center;
font-weight: bold;
justify-content: center;
width: 35%;
flex-wrap: wrap;
flex: 1 1 auto;
}
.portable-infobox .mw-collapsible .mw-collapsible-toggle::after {
content: "";
display: inline-block;
pointer-events: none;
width: 12px;
height: 12px;
margin: 0 0 2px 4px; /* offset */
vertical-align: middle;
--mask: var(--icon-chevron-down) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-icon-color);
transform: scaleY(-1);
}
.portable-infobox .mw-collapsible.mw-collapsed .mw-collapsible-toggle::after {
transform: none;
}
.portable-infobox .mw-collapsible .mw-collapsible-toggle-default::before, .portable-infobox .mw-collapsible .mw-collapsible-toggle-default a {
display: none;
}
.portable-infobox.pi-theme-item .pi-image-thumbnail {
width: 68px;
height: 68px;
padding: 5px !important;
box-sizing: border-box;
}
.pi-theme-structure .pi-image img, .pi-theme-mob .pi-image img, .pi-theme-object .pi-image img {
max-width: 60% !important;
}
.pi-theme-biome .pi-image img {
width: 100% !important;
}
/* Food */
.pi-theme-food.portable-infobox {
min-width: 320px !important;
}
.pi-theme-food div.icon-frame, .pi-theme-food div.icon-frame2 {
margin: 6px;
}
.pi-theme-food .pi-data-value {
text-align: center;
}
/* The thing about the thing with the other thing:
How to make the background framing element
in {{Item Infobox}} wrap around the icon */
.portable-infobox.pi-theme-item .pi-image-thumbnail {
background: url("https://dontstarve.wiki.gg/images/f/fa/Inventory_slot_background.png") no-repeat;
padding: 2px;
}
.portable-infobox.pi-theme-item .pi-image .pi-caption, .portable-infobox.pi-theme-structure .pi-image .pi-caption, .portable-infobox.pi-theme-mob .pi-image .pi-caption {
margin: auto;
text-align: center;
}
image.icon-frame,
div.icon-frame,
div.icon-frame2 {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 68px;
height: 68px;
background: url("https://dontstarve.wiki.gg/images/f/fa/Inventory_slot_background.png") center;
z-index: 1;
}
div.icon,
div.icon2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 68px;
height: 68px;
z-index: 5;
}
.pi-navigation {
text-align: center;
/*padding: 5px 0px 0px 0px !important;*/
background-color: #FFFFFF;
}
.pi-image img {
max-width: 100%;
height: auto;
}
.pi-group {
border-bottom: 0;
}
.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
border-left: 0;
}
.portable-infobox .pi-horizontal-group th.pi-data-label, .portable-infobox .pi-horizontal-group td.pi-data-value {
padding: 4px 2px;
}
/* imagewidth for infoboxes fix per queron */
.portable-infobox.pi-theme-64x .pi-image-thumbnail {
max-width: 64px;
height: auto;
}
.portable-infobox.pi-theme-80px .pi-image-thumbnail {
max-width: 80px;
height: auto;
}
.portable-infobox.pi-theme-90px .pi-image-thumbnail {
max-width: 90px;
height: auto;
}
.portable-infobox.pi-theme-100px .pi-image-thumbnail {
max-width: 100px;
height: auto;
}
.portable-infobox.pi-theme-110px .pi-image-thumbnail {
max-width: 110px;
height: auto;
}
.portable-infobox.pi-theme-120px .pi-image-thumbnail {
max-width: 120px;
height: auto;
}
.portable-infobox.pi-theme-130px .pi-image-thumbnail {
max-width: 130px;
height: auto;
}
.portable-infobox.pi-theme-140px .pi-image-thumbnail {
max-width: 140px;
height: auto;
}
.portable-infobox.pi-theme-150px .pi-image-thumbnail {
max-width: 150px;
height: auto;
}
.portable-infobox.pi-theme-160px .pi-image-thumbnail {
max-width: 160px;
height: auto;
}
.portable-infobox.pi-theme-170px .pi-image-thumbnail {
max-width: 170px;
height: auto;
}
.portable-infobox.pi-theme-180px .pi-image-thumbnail {
max-width: 180px;
height: auto;
}
.portable-infobox.pi-theme-190px .pi-image-thumbnail {
max-width: 190px;
height: auto;
}
.portable-infobox.pi-theme-200px .pi-image-thumbnail {
max-width: 200px;
height: auto;
}
.portable-infobox.pi-theme-210px .pi-image-thumbnail {
max-width: 210px;
height: auto;
}
.portable-infobox.pi-theme-220px .pi-image-thumbnail {
max-width: 220px;
height: auto;
}
.portable-infobox.pi-theme-230px .pi-image-thumbnail {
max-width: 230px;
height: auto;
}
.portable-infobox.pi-theme-240px .pi-image-thumbnail {
max-width: 240px;
height: auto;
}
/* end of imagewidth for infoboxes fix per queron */
/* tabber */
.mw-parser-output > .tabber {
margin-top: 12px;
}
.tabber .tabber__header {
border-bottom: 1px solid var(--theme-border-color);
box-shadow: none;
margin-bottom: 6px;
}
.tabber .tabber__tabs {
flex-wrap: wrap;
justify-content: center;
}
.tabber .tabber__tab[aria-selected=true], .tabber .tabber__tab[aria-selected=true]:visited {
color: var(--theme-link-color);
box-shadow: inset 0 -2px 0 0 var(--theme-link-color);
}
.tabber .tabber__indicator {
display: none;
}
.tabber .tabber__tab {
padding: 4px 10px;
color: var(--theme-text-color);
}
.tabber .tabber__tab:hover {
color: var(--theme-link-color-hover);
}
.tabber .tabber__tab:visited {
color: var(--theme-text-color);
}
/********* Gallery *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.page.gallery.styles/gallery.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.page.gallery.styles/print.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.page.gallery.styles/content.media.less */
.gallery.mw-gallery-traditional {
margin: var(--layout-box-gap) 0;
/* Some lengths are hard-coded in html code, so we have to do some tricks. */
--offset-width: -5px; /* html width of .gallerybox>div is width of .thumb + 5px */
--offset-margin: -15px; /* width/height of .thumb is width/height of .thumb img + 15px */
--layout-box-padding: 12px;
display: flex;
flex-wrap: wrap;
gap: var(--layout-box-gap);
}
.gallery.mw-gallery-traditional .gallerybox {
width: unset !important;
margin: 0;
--offset-left: calc(0px - var(--offset-margin) - var(--layout-box-padding) - 1px);
--offset-right: calc(0px - var(--offset-width) - var(--offset-margin) - var(--layout-box-padding) - 1px);
}
.gallery.mw-gallery-traditional .gallerybox > div {
margin: 0 calc(0px - var(--offset-right)) 0 calc(0px - var(--offset-left));
}
.gallery.mw-gallery-traditional .gallerybox .thumb {
border: 0;
border-radius: 0;
background: none;
margin: 0 var(--offset-right) 0 var(--offset-left);
width: unset !important;
}
.theme-dark .light-background .gallery.mw-gallery-traditional .gallerybox .thumb {
background: #dcded4;
}
.gallery.mw-gallery-traditional .gallerybox .thumb > div > *:first-child {
margin: var(--offset-margin);
}
.gallery.mw-gallery-traditional .gallerybox .thumb a {
display: block;
}
.gallery.mw-gallery-traditional .gallerybox .gallerytext {
font-size: 12px;
line-height: 20px;
padding: 0 1px; /* 1px for border of image. */
margin: 4px var(--offset-right) var(--layout-gap) var(--offset-left); /* 5px margin-right for .gallerybox>div */
text-align: center;
}
.gallery.mw-gallery-traditional .gallerybox .gallerytext p {
margin: 0;
}
.gallery.mw-gallery-traditional .gallerycaption {
flex-basis: 100%; /* the caption should always be on its own line */
}
.gallery.mw-gallery-traditional .thumbinner {
border-radius: 5px;
}
.gallery.mw-gallery-traditional li.gallerybox div.thumb {
border-radius: 5px;
}
.gallery.mw-gallery-traditional * {
box-sizing: initial;
}
.gallery.mw-gallery-traditional .thumb {
display: flex;
}
.gallery.mw-gallery-traditional .thumb a {
display: block;
}
center .gallery.mw-gallery-traditional {
justify-content: center;
}
/* img thumb */
div.thumbinner {
border-color: var(--theme-border-color);
font-size: 12px;
background: var(--pi-background);
}
.thumbimage {
border-color: transparent;
}
/* navbox styling, help from oni wiki */
.navbox {
color: var(--theme-text-color);
border: 1px solid var(--pi-border-color);
}
.navbox .navbox-title {
background: var(--theme-header-background);
color: var(--theme-header-color);
}
.navbox .navbox-group, .navbox .navbox-header {
background: var(--theme-header-background);
color: var(--theme-header-color);
}
.navbox-group a, .navbox-header a, .navbox-title a {
color: var(--theme-header-color);
}
/* end of navbox */
/***********************************************************************************************************
* common style for content box
***********************************************************************************************************/
.fullwidth, .full-width {
width: 100%;
}
.nowrap {
white-space: nowrap;
}
/* ".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;
}
/* clear fix for float block */
.clearfix {
*zoom: 1;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/***********************************************************************************************************
* css for specific content pages
***********************************************************************************************************/
/*********** Main page START ****************/
#mainpage-wrap .footer {
text-align: right;
font-size: 12px;
line-height: 22px;
}
#mainpage-wrap .box {
border: 1px solid var(--theme-border-color);
border-radius: var(--theme-box-border-radius);
padding: 16px;
}
#mainpage-wrap .box > h2 {
background: var(--theme-header-background);
color: var(--theme-header-color);
margin: -17px -17px 16px -17px;
border-radius: var(--theme-box-border-radius) var(--theme-box-border-radius) 2px 2px;
padding: 4px 16px;
font-size: 16px;
font-weight: bold;
line-height: 24px;
}
#mainpage-wrap .box > h2 a {
color: var(--theme-header-color);
}
#mainpage-wrap .box .embedvideo {
display: block;
}
#mainpage-wrap h2 {
margin-top: 0;
border-bottom: 0;
}
#mainpage-wrap .content-wrap {
display: flex;
gap: 1em;
align-items: stretch;
margin-bottom: 1em;
}
@media (max-width: 1200px) {
#mainpage-wrap .content-wrap {
flex-direction: column;
}
}
#mainpage-wrap .content-wrap .l {
flex: 4 4 800px;
display: flex;
flex-direction: column;
gap: 1em;
}
#mainpage-wrap .content-wrap .r {
flex: 1 1 300px;
display: flex;
flex-direction: column;
gap: 1em;
}
#mainpage-wrap .box.header {
text-align: center;
}
#mainpage-wrap .box.header .welcome h2 {
font-size: 2em;
}
#mainpage-wrap .box.header ul {
display: inline-flex;
align-items: center;
margin: 1.5em auto 0.5em;
gap: 1em;
}
#mainpage-wrap .box.header ul li {
list-style: none;
}
@media (max-width: 600px) {
#mainpage-wrap .box.header img {
width: 32px;
height: auto;
}
}
#mainpage-wrap .box.intro {
text-align: center;
}
#mainpage-wrap .box.intro .slider {
margin: 1em auto;
width: 100%;
max-width: 640px;
aspect-ratio: 16/9;
overflow: hidden;
position: relative;
text-align: left;
}
#mainpage-wrap .box.intro .slider > .prev, #mainpage-wrap .box.intro .slider > .next {
display: block;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.6);
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
border-radius: 100%;
}
#mainpage-wrap .box.intro .slider > .prev:before, #mainpage-wrap .box.intro .slider > .next:before {
content: "";
display: block;
width: 14px;
height: 14px;
margin: 8px;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath id='aarow-tiny' d='M5 11a.997.997 0 0 1-.707-.293l-4-4A.983.983 0 0 1 0 6.003v-.006a.988.988 0 0 1 .293-.704l4-4a.999.999 0 1 1 1.414 1.414L3.414 5H11a1 1 0 1 1 0 2H3.414l2.293 2.293A.999.999 0 0 1 5 11'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: #333;
}
#mainpage-wrap .box.intro .slider > .prev {
left: 6px;
}
#mainpage-wrap .box.intro .slider > .next {
right: 6px;
}
#mainpage-wrap .box.intro .slider > .next:before {
transform: scaleX(-1);
}
#mainpage-wrap .box.intro .slider ul {
display: flex;
align-items: center;
height: 100%;
margin: 0;
transition: transform 0.3s;
}
#mainpage-wrap .box.intro .slider li {
display: grid;
position: relative;
margin: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#mainpage-wrap .box.intro .slider li > img {
place-self: center center;
opacity: 0;
}
#mainpage-wrap .box.intro .slider li > span {
position: absolute;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.75);
color: white;
display: block;
width: 100%;
box-sizing: border-box;
padding: 8px;
font-size: 12px;
}
#mainpage-wrap .box.intro .slider li > span b {
display: block;
font-size: 14px;
}
#mainpage-wrap .box.intro .slider li > span a {
display: block;
color: #fff;
font-weight: bold;
}
@media (min-width: 640px) {
#mainpage-wrap .box.intro .slider li > span a {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
}
#mainpage-wrap .box .list {
clear: both;
display: grid;
gap: 1em;
justify-content: center;
grid-template-columns: repeat(auto-fill, 80px);
padding: 24px;
}
#mainpage-wrap .box .list > div {
font-size: 12px;
font-weight: bold;
text-align: center;
}
#mainpage-wrap .box .list > div > * {
display: block;
margin: auto;
}
#mainpage-wrap .box .flex.list {
display: flex;
flex-wrap: wrap;
}
#mainpage-wrap .box .flex.list > div {
flex: 0 0 80px;
}
#mainpage-wrap .box.gallery ul {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin: 0;
}
#mainpage-wrap .box.gallery ul li {
flex: 1 1 40%;
list-style: none;
}
@media (max-width: 1200px) and (min-width: 720px) {
#mainpage-wrap .box.gallery ul li {
flex: 1 1 22%;
}
}
#mainpage-wrap .box.gallery ul li img {
width: 100%;
height: auto;
}
#mainpage-wrap .box.gallery img {
box-shadow: 0 0 3px rgba(255, 255, 255, 0.25);
}
/*********** Main page END ****************/
/***********************************************************************************************************
* css for pages under MediaWiki or Special NS, or system widgets on template/module pages and so on
***********************************************************************************************************/
/********* ooui *********/
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background: none;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
color: var(--theme-text-color);
}
.oo-ui-tabOptionWidget {
color: var(--theme-text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
color: var(--theme-text-color);
background: none;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: var(--theme-text-color-note);
}
.oo-ui-tabSelectWidget-framed {
background: none;
}
/********* for File: NS pages *********/
#filetoc {
background: none;
}
/******* Search result page. (Special:Search) ******/
.mw-search-form-wrapper {
font-size: 1em;
}
.mw-search-form-wrapper #mw-search-top-table {
display: flex;
align-items: center;
}
.mw-search-form-wrapper #mw-search-top-table > div {
float: none;
}
.mw-search-form-wrapper .results-info {
color: var(--theme-text-color-note);
font-size: 1em;
padding: 0 0 0 3em;
white-space: nowrap;
text-align: right;
flex: 1 1 auto;
}
.mw-search-form-wrapper .mw-search-visualclear {
display: none;
}
.mw-search-form-wrapper .mw-search-profile-tabs {
border: 0;
margin: 1em 0;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types + div {
display: none;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types {
width: 100%;
float: none;
padding: 0;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
float: none;
display: inline-block;
vertical-align: middle;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li.current {
background: var(--theme-highlight-background);
border-radius: 4px;
overflow: hidden;
}
.mw-search-form-wrapper #mw-searchoptions {
padding: 1em;
background: var(--theme-box-background);
border: 1px solid var(--theme-border-color-accent);
border-radius: 4px;
}
/* responsive tweak */
@media screen and (max-width: 600px) {
.mw-search-form-wrapper #mw-search-top-table {
display: block;
}
.mw-search-form-wrapper .results-info {
margin-top: 1em;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
font-size: 12px;
}
}
/***********************************************************************************************************
* theming vars.
***********************************************************************************************************/
:root {
/*** top site logo ***/
--theme-site-logo-image: url(/images/e/e6/Site-logo.png);
--theme-site-logo-filter: drop-shadow(0 0 10px rgba(72, 45, 55, 0.7));
--theme-site-logo-width: 300px;
--theme-site-logo-height: 150px;
/*** site background ***/
--theme-site-background: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.25)),#10131d url(/images/8/80/Site-background.jpg) center center / cover no-repeat fixed;
/* common "box" style */
--theme-box-back-backdrop-filter: none;
--theme-box-border-radius: 0px;
--theme-box-border-width: 1px;
--theme-box-border-style: solid;
--theme-box-border-color: #000;
--theme-box-shadow: 0 0 12px 0 rgba(247, 236, 211, 0.17);
--theme-box-shadow2: none;
--theme-box-back-background: rgba(250, 243, 227, 0.8);
/* be used in multi-layer background, so we can't simpy use background-color */
--theme-box-background: linear-gradient(rgba(250, 243, 227, 0.93),rgba(250, 243, 227, 0.93));
--theme-background: var(--theme-box-background), var(--theme-box-back-background);
/*** text color ***/
--theme-text-color: #3a3a3a;
--theme-text-color-hover: var(--theme-text-color);
--theme-text-color-note: #777;
--theme-text-color-em: #228622;
--theme-heading-color: var(--theme-text-color);
--theme-text-color-placeholder: #999;
--theme-control-text-color: #333;
--theme-control-text-color-hover: #333;
/*** link text color ***/
--theme-link-color: #8b104a;
--theme-link-color-hover: #864e63;
--theme-link-color-visited: var(--theme-link-color);
--theme-link-color-redlink: #ee3030;
/* default color for icons */
--theme-icon-color: var(--theme-link-color);
--theme-icon-color-redlink: var(--theme-link-color-redlink);
--theme-icon-color-hover: var(--theme-link-color-hover);
/* default common color */
--theme-border-color: var(--pi-border-color);
--theme-border-color-accent: rgba(72, 45, 55, 0.8);
--theme-highlight-background: url(https://dontstarve.wiki.gg/images/9/9e/Highlight-background.png) center center / 100% 100% no-repeat;
--theme-header-background: #482d37;
--theme-header-color: #fff;
/* dropdown menu */
--theme-dropdown-border: 1px solid var(--theme-box-border-color);
--theme-dropdown-background: var(--theme-background);
/* for wide table */
--theme-wide-table-shadow-color: #999;
/** notification **/
--theme-notice-red-text-color: #ff001f;
--theme-notice-orange-text-color: #ffab5b;
/* portable infobox */
--pi-background: #fff;
--pi-border-color: #614f59;
--pi-secondary-background: #b8939f;
--pi-secondary-background--label: var(--theme-text-color);
--pi-item-spacing: 4px 2px;
/* table */
--theme-th-background: #e6e4d5;
}
/* main content box */
/* sidebar */
#mw-panel {
--theme-link-color: #fff;
--theme-link-color-visited: var(--theme-link-color);
--theme-link-color-hover: var(--theme-link-color);
--theme-text-shadow: 0px 0px 3px #000, 0px 0px 3px #000;
--theme-header-color: #fff;
--theme-header-shadow: 0px 0px 3px #000, 0px 0px 3px #000;
--theme-border-width: 0;
--theme-gap: 0;
}
#catlinks {
--theme-background: none;
--theme-box-border-radius: 0;
--theme-border-color: var(--theme-border-color-accent);
}
#footer {
--theme-background: none;
}
/* navbar */
#mw-head {
--theme-link-color: var(--theme-text-color);
--theme-link-color-visited: var(--theme-link-color);
--theme-link-color-hover: var(--theme-link-color);
--theme-background: rgba(0,0,0,0.4);
--theme-background-shadow: linear-gradient(to top, rgba(0,0,0,0.05), transparent 6px);
--theme-tab-background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)), var(--theme-box-background);
--theme-tab-background-selected: var(--theme-box-background);
--theme-box-border-radius: 0;
--theme-tab-border-color: var(--theme-box-border-color);
--theme-tab-border-color-selected: var(--theme-box-border-color);
}
#mw-head #p-search {
--theme-link-color: var(--theme-text-color);
--theme-link-color-hover: var(--theme-icon-color);
--theme-link-color-focus: var(--theme-link-color-hover);
--theme-background: var(--theme-box-background);
--theme-border-color: var(--theme-border-color-accent);
--theme-border-color-hover: var(--theme-icon-color-hover);
--theme-border-color-focus: var(--theme-border-color-hover);
--theme-shadow: none;
--theme-shadow-focus: var(--theme-box-shadow);
}
/* search result suggestion */
body > .suggestions {
--theme-border-color: var(--theme-border-color-accent);
--theme-rule-color: var(--theme-border-color-accent);
--theme-link-color: var(--theme-text-color);
--theme-link-color-visited: var(--theme-text-color);
--theme-link-color-hover: var(--theme-text-color-hover);
}
/***** CSS from old wiki *****/
/* Tabber style. Street cred to Hedgeg*/
.tabberlive { /*tabs container*/
border: none !important;
}
.tabbertab { /*content container*/
border: none !important;
}
ul.tabbernav { /*tabs row+general parameters*/
background-color: #EDEBDC;
font-size: 22px;
text-align: center;
}
ul.tabbernav li a {
color: #3A3A3A !important;
background: none !important;
border: none !important;
}
ul.tabbernav li a:hover {
color: #3A3A3A !important;
background-color: #B8939F !important;
}
ul.tabbernav li.tabberactive a { /*active tab*/
color: #C3B3A3 !important;
background-color: #482D37 !important;
}
/** A few hover classes to allow mouse over behavior without javascript.
These are from Don't Starve Wiki, so prefixed with DSW to avoid potential conflicts.
DSWHoverTabContainer - is to be applied to the top container which contains all tabs.
DSWHoverTab - is to be applied to a single tab of data, contained by the DSWHoverTabContainer
DSWHoverTabDefault - is to be applied to only one of the elements that has DSWHoverTab class to make it the default tab
DSWHoverTabSelector - is to be applied to selectors of tabs. This must be inside a DSWHoverTab, and must not be paret or child of DSWHoverTabContent
DSWHoverTabContent - is to be applied to content of tabs. This must be inside a DSWHoverTab, and must not be paret or child of DSWHoverTabSelector
**/
/*Hide the top container, only used for linking css styles*/
.DSWHoverTabContainer {
visibility: hidden;
}
/*Content is not displayed by default, but it overrides the parent so that it would be visible*/
.DSWHoverTabContent {
display: none;
visibility: visible;
}
/*Selectors are by default transparent*/
.DSWHoverTabSelector {
-webkit-filter: opacity(40%); /* Chrome, Safari, Opera */
filter: opacity(40%); /* standard */
visibility: visible;
}
/*When the tab is hovered, or
when the container isn't hovered, but the tab is default
make the selector opaque*/
.DSWHoverTab:Hover .DSWHoverTabSelector,
.DSWHoverTabContainer:not(:Hover) .DSWHoverTabDefault .DSWHoverTabSelector {
-webkit-filter: opacity(100%); /* Chrome, Safari, Opera */
filter: opacity(100%); /* standard */
}
/*When the tab is hovered, or
when the container isn't hovered, but the tab is default
make the content display. New code provided by Dmitry221060 so links are hoverable but won't block tabbers*/
.DSWHoverTab:Hover .DSWHoverTabContent,
.DSWHoverTabContainer:not(:Hover) .DSWHoverTabDefault .DSWHoverTabContent {
display: block;
}
.DSWHoverTab:Hover,
.DSWHoverTabContainer:not(:Hover) .DSWHoverTabDefault {
width: 100%;
}
.DSWHoverTabContainer {
display: flex;
}
/** Styling for the warning message when attempting to reply old comments **/
.DSWOldCommentWarning {
color: red;
}
/* The following code was copied from the Templates Wiki to allow for collapsible navboxes - Bluegeist */
/* For [show]/[hide] link of javascript collapsible tables */
.collapseButton { /* 'show'/'hide' buttons created dynamically by the */
float: right; /* CollapsibleTables javascript in [[MediaWiki:Common.js]] */
font-weight: normal; /* are styled here so they can be customised. */
text-align: right;
width: auto;
}
/* End of collapsible code */
/* End of copy from wikia.css */
/* ---------------------------------------------------------------------------------------------------------------
For Template:Quotes and it's subtemplate Template:Quotes/single
--------------------------------------------------------------------------------------------------------------- */
.DSWHoverTabContainer {
min-width: 320px;
position: relative;
padding-top: 25px;
}
.DSWHoverTabSelector {
position: absolute;
width: 25px;
padding-left: 3px;
}
.DSWHoverTabSelector img {
width: 20px;
height: auto;
}
.DSWHoverTabContent {
padding-top: 25px;
}
.DSWQuote {
display: table;
margin: 0px auto;
padding-top: 10px;
font-size: 34px;
font-family: "Times New Roman", serif;
}
.DSWQuoteText {
font-size: 16px;
font-family: "Segoe Print";
}
.DSWQuoteSource {
font-size: 12px;
text-align: right;
font-family: "Segoe Print";
}
/* ---------------------------------------------------------------------------------------------------------------
For tables with some information about hunger, sanity, health, beefalo speed or beefalo damage.
--------------------------------------------------------------------------------------------------------------- */
.DSWHungerBg {
background-color: rgba(255, 204, 51, 0.1568627451);
}
.DSWSanityBg {
background-color: rgba(232, 123, 15, 0.1568627451);
}
.DSWHealthBg {
background-color: rgba(174, 21, 21, 0.1568627451);
}
.DSWBeefaloSpeedBg {
background-color: rgba(0, 132, 255, 0.1568627451);
}
.DSWBeefaloDamageBg {
background-color: rgba(174, 21, 21, 0.1568627451);
}
.Belisa_plumilla_white {
color: #ffffff;
font-family: Belisa_plumilla;
}
.toccolours {
background-color: unset;
border: unset;
font-size: unset;
padding: unset;
}
Categories:
- Articles with missing item infobox stack value
- Infobox missing spawncodes