MediaWiki:Timeless.css: Difference between revisions

/* 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
   ============================================================ */

/* Shared filter application */
.qualityfine,
.qualitynormal,
.qualitycommon,
.qualitygood,
.qualityuncommon,
.qualitygreat,
.qualityrare,
.qualityexcellent,
.qualityepic,
.qualityperfect,
.qualitylegendary,
.qualityeternal,
.qualityethereal,
.qualityethereal,
.outlinelore,
.outlinecollectible,
.coins {
	--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));
}

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

/* Fine */
.qualityfine {
	--quality-outline-color: hsl(173, 82%, 85%);
}

.client-darkmode .qualityfine {
	--quality-outline-color: hsl(172, 100%, 7%);
}

/* Normal / Common */
.qualitynormal,
.qualitycommon {
	--quality-outline-color: hsl(0, 0%, 63%);
}

.client-darkmode .qualitynormal,
.client-darkmode .qualitycommon {
	--quality-outline-color: hsl(0, 0%, 36%);
}

/* Good / Uncommon */
.qualitygood,
.qualityuncommon {
	--quality-outline-color: hsl(102, 94%, 76%);
}

.client-darkmode .qualitygood,
.client-darkmode .qualityuncommon {
	--quality-outline-color: hsl(120, 94%, 11%);
}

/* Great / Rare */
.qualitygreat,
.qualityrare {
	--quality-outline-color: hsl(222, 100%, 80%);
}

.client-darkmode .qualitygreat,
.client-darkmode .qualityrare {
	--quality-outline-color: hsl(233, 100%, 56%);
}

/* Excellent / Epic */
.qualityexcellent,
.qualityepic {
	--quality-outline-color: hsl(277, 100%, 82%);
}

.client-darkmode .qualityexcellent,
.client-darkmode .qualityepic {
	--quality-outline-color: hsl(260, 80%, 53%);
}

/* Perfect / Legendary */
.qualityperfect,
.qualitylegendary {
	--quality-outline-color: hsl(35, 97%, 73%);
}

.client-darkmode .qualityperfect,
.client-darkmode .qualitylegendary {
	--quality-outline-color: hsl(30, 100%, 19%);
}

/* Eternal / Ethereal */
.qualityeternal,
.qualityethereal {
	--quality-outline-color: hsl(360, 88%, 62%);
}

.client-darkmode .qualityeternal,
.client-darkmode .qualityethereal {
	--quality-outline-color: hsl(360, 90%, 70%);
}

/* Coins */
.coins {
	--quality-outline-color: hsl(40, 90%, 60%);
}

.client-darkmode .coins {
	--quality-outline-color: hsl(40, 80%, 20%);
}

/* Lore Items*/
.outlinelore {
	--quality-outline-color: hsl(143, 93%, 69%);
}

.client-darkmode .outlinelore {
	--quality-outline-color: hsl(143, 93%, 17%);
}

/* Collectible Items*/
.outlinecollectible {
	--quality-outline-color: hsl(36, 99%, 66%);
}

.client-darkmode .outlinecollectible {
	--quality-outline-color: hsl(32, 99%, 31%);
}

/* Fine hover */
.finehover:hover {
	--quality-outline-size: 3px;
	--quality-outline-neg-size: -3px;
	--quality-outline-color: hsl(173, 82%, 85%);

	-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;
}

.client-darkmode .finehover:hover {
	--quality-outline-color: hsl(172, 100%, 7%);
}

/* === 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;
}

.ItemInfobox {
	margin-left: 0.8em;
}

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

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

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

.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 )
}

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