MediaWiki:Timeless.css

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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All CSS here will be loaded for users of the Timeless skin */

/* Fix content width padding */
#mw-content {
	padding: 0.8em;
}

.ts-inner {
	max-width: 1920px;
	width: 100%;
}

/* Top bar font modernization */
#mw-header *,
#mw-site-navigation *,
#mw-related-navigation * {
	font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}

/* Avoid cutting off letters with descenders: g,j,p,q,y */
#personal h2 span {
	height: 1.5em;
	position: relative;
	bottom: 0.1em;
}

/* Triangle position patch */
#personal h2::after {
	position: relative;
	bottom: 0.5em;
}

/* Add line to Blockquotes */
#mw-content-text div blockquote {
	padding: 0 15px;
	border-left: 3px solid darkgray;
	border-radius: 1px;
}


/* ============================================================
   Item outlines and credit ratings
   ============================================================ */

/* Official outline colors */
:root {
	/* Rarity colors */
	--ws-rarity-normal: #929BA1;
	--ws-rarity-uncommon: #B8FF97;
	--ws-rarity-rare: #A3B8FF;
	--ws-rarity-epic: #DAA2FF;
	--ws-rarity-legendary: #FFC880;
	--ws-rarity-ethereal: #FF5F5F;

	/* Credit rating colors */
	--ws-credit-negative: #D16F74;

	/* Item tag colors */
	--ws-item-fine: #B0F7EE;
	--ws-item-collectible: #FFB951;
	--ws-item-lore: #51FF94;
	--ws-item-magical: #D5B0F7;
	--ws-item-valuable: #F7D0B0;
	--ws-item-coins: #FFC107;
	--ws-item-egg: #E991FF;
	--ws-item-rare-egg: #FF538C;
}

.client-darkmode {
	/*
	   Counter-adjusted colors for sites using:
	   filter: invert(1) hue-rotate(180deg);

	   Use:
	   https://codepen.io/bonez565/full/ByprRrE
	*/

	/* Rarity colors */
	--ws-rarity-normal: #5E676D;
	--ws-rarity-uncommon: #002D00;
	--ws-rarity-rare: #31468D;
	--ws-rarity-epic: #703895;
	--ws-rarity-legendary: #612A00;
	--ws-rarity-ethereal: #FC5C5C;

	/* Credit rating colors */
	--ws-credit-negative: #C8666B;

	/* Item tag colors */
	--ws-item-fine: #00281F;
	--ws-item-collectible: #7D3700;
	--ws-item-lore: #005A00;
	--ws-item-magical: #5A357C;
	--ws-item-valuable: #4A2303;
	--ws-item-coins: #7C3E00;
	--ws-item-egg: #9139A7;
	--ws-item-rare-egg: #FF5B94;
}


/* ============================================================
   Shared outline filter
   ============================================================ */

.qualityfine,
.qualitynormal,
.qualitycommon,
.qualitygood,
.qualityuncommon,
.qualitygreat,
.qualityrare,
.qualityexcellent,
.qualityepic,
.qualityperfect,
.qualitylegendary,
.qualityeternal,
.qualityethereal,
.credit-rating-negative,
.outlinelore,
.outlinecollectible,
.outlinecoins,
.outlinemagical,
.outlinevaluable,
.outlineegg,
.outlinerareegg {
	--quality-outline-size: 1.5px;
	--quality-outline-neg-size: -1.5px;

	-webkit-filter:
		drop-shadow(var(--quality-outline-size) 0 0 var(--quality-outline-color))
		drop-shadow(0 var(--quality-outline-neg-size) 0 var(--quality-outline-color))
		drop-shadow(var(--quality-outline-neg-size) 0 0 var(--quality-outline-color))
		drop-shadow(0 var(--quality-outline-size) 0 var(--quality-outline-color));

	filter:
		drop-shadow(var(--quality-outline-size) 0 0 var(--quality-outline-color))
		drop-shadow(0 var(--quality-outline-neg-size) 0 var(--quality-outline-color))
		drop-shadow(var(--quality-outline-neg-size) 0 0 var(--quality-outline-color))
		drop-shadow(0 var(--quality-outline-size) 0 var(--quality-outline-color));
}


/* ============================================================
   Outline modifiers
   ============================================================ */

/* Infobox modifier */
.quality-infobox {
	--quality-outline-size: 3px;
	--quality-outline-neg-size: -3px;
}


/* ============================================================
   Rarity outlines
   ============================================================ */

/* Fine */
.qualityfine {
	--quality-outline-color: var(--ws-item-fine);
}

/* Normal / Common */
.qualitynormal,
.qualitycommon {
	--quality-outline-color: var(--ws-rarity-normal);
}

/* Good / Uncommon */
.qualitygood,
.qualityuncommon {
	--quality-outline-color: var(--ws-rarity-uncommon);
}

/* Great / Rare */
.qualitygreat,
.qualityrare {
	--quality-outline-color: var(--ws-rarity-rare);
}

/* Excellent / Epic */
.qualityexcellent,
.qualityepic {
	--quality-outline-color: var(--ws-rarity-epic);
}

/* Perfect / Legendary */
.qualityperfect,
.qualitylegendary {
	--quality-outline-color: var(--ws-rarity-legendary);
}

/* Eternal / Ethereal */
.qualityeternal,
.qualityethereal {
	--quality-outline-color: var(--ws-rarity-ethereal);
}


/* ============================================================
   Credit ratings
   ============================================================ */

/* Shared credit rating text styling */
.credit-rating {
	font-size: 1.4em;
	font-weight: bold;
}

/* Nearly Bankrupt / negative rating */
.credit-rating-negative {
	--quality-outline-color: var(--ws-credit-negative);
}


/* ============================================================
   Item tag outlines
   ============================================================ */

/* Coins */
.outlinecoins {
	--quality-outline-color: var(--ws-item-coins);
}

/* Lore items */
.outlinelore {
	--quality-outline-color: var(--ws-item-lore);
}

/* Collectible items */
.outlinecollectible {
	--quality-outline-color: var(--ws-item-collectible);
}

/* Magical items */
.outlinemagical {
	--quality-outline-color: var(--ws-item-magical);
}

/* Valuable items */
.outlinevaluable {
	--quality-outline-color: var(--ws-item-valuable);
}

/* Egg items */
.outlineegg {
	--quality-outline-color: var(--ws-item-egg);
}

/* Rare egg items */
.outlinerareegg {
	--quality-outline-color: var(--ws-item-rare-egg);
}


/* ============================================================
   Hover outlines
   ============================================================ */

/* Shared hover outline */
.finehover:hover,
.rareegghover:hover {
	--quality-outline-size: 3px;
	--quality-outline-neg-size: -3px;

	-webkit-filter:
		drop-shadow(var(--quality-outline-size) 0 0 var(--quality-outline-color))
		drop-shadow(0 var(--quality-outline-neg-size) 0 var(--quality-outline-color))
		drop-shadow(var(--quality-outline-neg-size) 0 0 var(--quality-outline-color))
		drop-shadow(0 var(--quality-outline-size) 0 var(--quality-outline-color)) !important;

	filter:
		drop-shadow(var(--quality-outline-size) 0 0 var(--quality-outline-color))
		drop-shadow(0 var(--quality-outline-neg-size) 0 var(--quality-outline-color))
		drop-shadow(var(--quality-outline-neg-size) 0 0 var(--quality-outline-color))
		drop-shadow(0 var(--quality-outline-size) 0 var(--quality-outline-color)) !important;
}

/* Fine hover */
.finehover:hover {
	--quality-outline-color: var(--ws-item-fine);
}

/* Rare egg hover */
.rareegghover:hover {
	--quality-outline-color: var(--ws-item-rare-egg);
}


/* ============================================================
   Tabber
   ============================================================ */

/* === Desktop (>=851px) === */
@media screen and (min-width: 851px) {

	/* Float the whole tabber; let its panels size themselves */
	.tabberresize {
		max-width: 100%;
		width: min-content;
		padding-left: 0.8em;
	}

	/* Default: 3 columns */
	.tabberresize .tabber__header {
		display: block;
	}

	.tabberresize .tabber__tabs {
		display: grid;
		grid-template-columns: repeat(3, var(--tab-w, max-content));
		gap: 5px;
		justify-content: space-evenly;
	}

	/* Exactly 4 tabs: put the 4th in the middle column */
	.tabberresize[data-tab-count="4"] .tabber__tab:nth-child(4) {
		grid-column: 2;
	}
}

.tabberresize .tabber__tab {
	display: block;
	text-align: center;
}

.tabberresize .tabber__panel {
	display: flex;
	justify-content: center;
}

@media screen and (max-width: 850px) {
	.tabberresize {
		width: 100%;
	}
}

/* Tabber Fix */
.tabberfix .tabber__tabs {
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.tabbercrafting {
	width: 365px;
}


/* ============================================================
   Infoboxes
   ============================================================ */

.ItemInfobox {
	margin-left: 0.8em;
}

.tabber__panel .ItemInfobox {
	margin-left: 0 !important;
}


/* ============================================================
   Images
   ============================================================ */

/* Images should be responsive */
.resizeimg {
	max-width: 30%;
	height: auto;
}

.roundcorners > a:nth-child(1) > img:nth-child(1) {
	border-radius: 15px;
}


/* ============================================================
   Dark mode fixes
   ============================================================ */

.client-darkmode .editor,
.client-darkmode .btn {
	filter: invert(1) hue-rotate(180deg);
}

.client-darkmode code,
.client-darkmode pre,
.client-darkmode .mw-code {
	color: #000;
	background-color: #aaa;
	border: 1px solid #666;
}

.client-darkmode .invertcolors,
.client-darkmode .redirectText,
.client-darkmode .ws-sprite {
	filter: invert(1) hue-rotate(180deg);
}


/* ============================================================
   Translation extension
   ============================================================ */

.mw-tpt-pagelist-item div {
	float: right;
}

/* ============================================================
   Automatically generated page footer
   ============================================================ */

.wswb-auto-footer {
	display: table;
	box-sizing: border-box;
	max-width: 90%;
	min-height: 60px;
	margin: 1em auto 0;
	padding: 0px 15px;
	border: 2px solid #22333d;
	border-radius: 10px;
	text-align: center;
}

.wswb-auto-footer__translation {
	display: block;
	margin-top: 0.35em;
	font-size: 0.85em;
	line-height: 1.4;
}

/* ============================================================
   WSWB language selector
   ============================================================ */

.wswb-language-selector {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	box-sizing: border-box;
	width: fit-content;
	max-width: 90%;
	margin: 0 0 0.75em;
	padding: 6px 12px;
	border: 2px solid #22333d;
	border-radius: 10px;
	font-size: 0.9em;
	line-height: 1.4;
}

/* English and the current language */
.wswb-language-selector__primary {
	display: flex;
	align-items: center;
	gap: 0.35em;
}

/* Highlight the current language */
.wswb-language-selector__primary strong {
	padding: 2px 7px;
	border-radius: 6px;
	background-color: #22333d;
	color: #fff;
}

/* Languages dropdown button */
.wswb-language-selector__toggle {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border: 1px solid #22333d;
	border-radius: 6px;
	color: #22333d;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.wswb-language-selector__toggle:hover,
.wswb-language-selector__toggle[aria-expanded="true"] {
	background-color: #22333d;
	color: #fff;
}

.wswb-language-selector__toggle:focus-visible {
	outline: 2px solid #36c;
	outline-offset: 2px;
}

.wswb-language-selector__toggle::after {
	content: " ▼";
	margin-left: 0.35em;
	font-size: 0.7em;
}

.wswb-language-selector__toggle[aria-expanded="true"]::after {
	content: " ▲";
}

/* Dropdown panel */
.wswb-language-selector__menu {
	position: absolute;
	z-index: 100;
	top: calc(100% + 0.35em);
	left: 0;
	box-sizing: border-box;
	display: none;
	grid-template-columns: repeat(2, minmax(8em, 1fr));
	gap: 0.25em;
	width: max-content;
	min-width: 18em;
	max-width: min(32em, 90vw);
	max-height: 24em;
	overflow-y: auto;
	padding: 8px;
	border: 2px solid #22333d;
	border-radius: 10px;
	background-color: var(--background-color-base, #fff);
	box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}

.wswb-language-selector__menu.is-open {
	display: grid;
}

/* Individual language options */
.wswb-language-selector__menu > div {
	box-sizing: border-box;
	padding: 5px 8px;
	border-radius: 6px;
	white-space: nowrap;
}

.wswb-language-selector__menu > div:hover {
	background-color: rgb(34 51 61 / 10%);
}

.wswb-language-selector__menu > div > a {
	display: block;
	text-decoration: none;
}

.wswb-language-selector__menu > div > a:hover {
	text-decoration: underline;
}

/* Current language inside the dropdown */
.wswb-language-selector__menu >
.wswb-language-selector__current {
	background-color: #22333d;
	color: #fff;
	font-weight: 600;
}

/* Use one column on narrow screens */
@media (max-width: 500px) {
	.wswb-language-selector__menu {
		grid-template-columns: 1fr;
		min-width: 13em;
	}
}