Tip of the Day
The hamburger menu at the bottom-right (or bottom-left in left handed mode) has your WalkPedia to help track your total progress.

MediaWiki:Timeless.css: Difference between revisions

From Walkscape Walkthrough
← Older edit
mNo edit summary
Tag: Reverted
mNo edit summary
 
(39 intermediate revisions by the same user not shown)
Line 460: Line 460:
}
}


/* Tabber Fix*/
/* === Desktop (>=851px) === */
.tabberfix .tabber__tabs {
    flex-wrap: wrap;
    justify-content: space-evenly;
}
 
 
.tabberfix .tabber__tab {
    width: 70px;
text-align: center;
}
 
@media screen and (min-width: 851px) {
@media screen and (min-width: 851px) {
@media screen and (min-width: 851px) {
  /* Float the whole tabber; let its panels size themselves */
   .tabberresize {
   .tabberresize {
     float: right;
     max-width: 100%;
     display: inline-block;   /* shrink-to-fit */
     width: 310px;
    max-width: 100%;         /* don’t overflow page */
padding-left: 0.8em;
   }
   }
   /* Undo common 100% widths inside TabberNeue */
 
   .tabberresize .tabber,
   /* 3×2 grid of equal-width tabs; width comes from --tab-w (via JS) */
  .tabberresize .tabber__tablist,
   .tabberresize .tabber__header { display: block; }
   .tabberresize .tabber__panels {
   .tabberresize .tabber__tabs {
     display: inline-block;
     display: grid;
     width: auto;
    grid-template-columns: repeat(3, var(--tab-w, max-content));
     max-width: none;
     gap: 5px;
     justify-content: center;     /* center grid if wider than panel */
   }
   }
   /* Make sure the infobox table isn’t forced wide */
    
   .tabberresize table {
   .tabberresize .tabber__tab {
     width: auto;
     display: block;
    text-align: center;
   }
   }
  /* Optional: arrows can add extra width; hide if you don’t use them */
  .tabberresize .tabber__header__prev,
  .tabberresize .tabber__header__next {
    display: none;
  }
}
.tabberresize .tabber__panel {
  display: flex;
  justify-content: center;
}
}


Line 497: Line 499:
width: 100%;
width: 100%;
}
}
}
/* Tabber Fix*/
.tabberfix .tabber__tabs {
flex-wrap: wrap;
justify-content: space-evenly;
}
}


.tabbercrafting {
.tabbercrafting {
width: 317px;
width: 365px;
}
}
.ItemInfobox {
margin-left: 0.8em;
}
.tabber__panel .ItemInfobox {
  margin-left: 0 !important;
}


/* Images should be responsive */
/* Images should be responsive */
Line 511: Line 528:
.roundcorners > a:nth-child(1) > img:nth-child(1) {
.roundcorners > a:nth-child(1) > img:nth-child(1) {
border-radius: 15px;
border-radius: 15px;
}
.ItemInfobox {
margin-left: 0.8em;
}
}


Line 531: Line 544:
}
}


/* lighttable colors */
.mw-tpt-pagelist-item div {
:root {
float: right;
  --lighttable-bg-hover: #fff7e3;
  --lighttable-bg-active: #ffe0a3;
  --lighttable-link-color: #784c0a;
}
}
/* ACTIVE (click-selected): apply to cells */
table.mw-lighttable tbody tr.highlight-on > td,
table.mw-lighttable tbody tr.highlight-on > th {
  background-color: var(--lighttable-bg-active) !important;
}
/* HOVER: only when not already active; apply to cells */
table.mw-lighttable tbody tr:not(.highlight-on):hover > td,
table.mw-lighttable tbody tr:not(.highlight-on):hover > th {
  background-color: var(--lighttable-bg-hover) !important;
}
/* Link color inside highlighted rows */
table.mw-lighttable tbody tr.highlight-on a {
  color: var(--lighttable-link-color) !important;
}
/* Optional: link color on hover rows too */
table.mw-lighttable tbody tr:not(.highlight-on):hover a {
  color: var(--lighttable-link-color) !important;
}
/* Pointer cursor (keep) */
table.mw-lighttable tbody tr { cursor: pointer; }
/* Footer Button Formatting */
.lt-footer-cell { text-align: center; }
.lt-clear-btn { padding: 0.25em 0.6em; }

Latest revision as of 10:33, 16 November 2025

/* All CSS here will be loaded for users of the Timeless skin */
/* Fix content width padding */
    #mw-content { padding: 0.8em }

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

/* Add stroke to fine items*/
.qualityfine {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px -1.5px 0px hsl(173, 82%, 85%))
		drop-shadow(-1.5px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px 1.5px 0px hsl(173, 82%, 85%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px -1.5px 0px hsl(173, 82%, 85%))
		drop-shadow(-1.5px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px 1.5px 0px hsl(173, 82%, 85%));
}
.client-darkmode .qualityfine {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px -1.5px 0px hsl(172, 100%, 7%))
		drop-shadow(-1.5px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px 1.5px 0px hsl(172, 100%, 7%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px -1.5px 0px hsl(172, 100%, 7%))
		drop-shadow(-1.5px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px 1.5px 0px hsl(172, 100%, 7%));
}

/* Add stroke to Normal and Common items*/
.qualitynormal, .qualitycommon {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(0, 0%, 63%))
		drop-shadow(0px -1.5px 0px hsl(0, 0%, 63%))
		drop-shadow(-1.5px 0px 0px hsl(0, 0%, 63%))
		drop-shadow(0px 1.5px 0px hsl(0, 0%, 63%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(0, 0%, 63%))
		drop-shadow(0px -1.5px 0px hsl(0, 0%, 63%))
		drop-shadow(-1.5px 0px 0px hsl(0, 0%, 63%))
		drop-shadow(0px 1.5px 0px hsl(0, 0%, 63%));
}
.client-darkmode .qualitynormal, .client-darkmode .qualitycommon {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(0, 0%, 36%))
		drop-shadow(0px -1.5px 0px hsl(0, 0%, 36%))
		drop-shadow(-1.5px 0px 0px hsl(0, 0%, 36%))
		drop-shadow(0px 1.5px 0px hsl(0, 0%, 36%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(0, 0%, 36%))
		drop-shadow(0px -1.5px 0px hsl(0, 0%, 36%))
		drop-shadow(-1.5px 0px 0px hsl(0, 0%, 36%))
		drop-shadow(0px 1.5px 0px hsl(0, 0%, 36%));
}

/* Add stroke to Good and Uncommon items*/
.qualitygood, .qualityuncommon {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(102, 94%, 76%))
		drop-shadow(0px -1.5px 0px hsl(102, 94%, 76%))
		drop-shadow(-1.5px 0px 0px hsl(102, 94%, 76%))
		drop-shadow(0px 1.5px 0px hsl(102, 94%, 76%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(102, 94%, 76%))
		drop-shadow(0px -1.5px 0px hsl(102, 94%, 76%))
		drop-shadow(-1.5px 0px 0px hsl(102, 94%, 76%))
		drop-shadow(0px 1.5px 0px hsl(102, 94%, 76%));
}
.client-darkmode .qualitygood, .client-darkmode .qualityuncommon {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(120, 94%, 11%))
		drop-shadow(0px -1.5px 0px hsl(120, 94%, 11%))
		drop-shadow(-1.5px 0px 0px hsl(120, 94%, 11%))
		drop-shadow(0px 1.5px 0px hsl(120, 94%, 11%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(120, 94%, 11%))
		drop-shadow(0px -1.5px 0px hsl(120, 94%, 11%))
		drop-shadow(-1.5px 0px 0px hsl(120, 94%, 11%))
		drop-shadow(0px 1.5px 0px hsl(120, 94%, 11%));
}

/* Add stroke to Great and Rare items*/
.qualitygreat, .qualityrare {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(222, 100%, 80%))
		drop-shadow(0px -1.5px 0px hsl(222, 100%, 80%))
		drop-shadow(-1.5px 0px 0px hsl(222, 100%, 80%))
		drop-shadow(0px 1.5px 0px hsl(222, 100%, 80%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(222, 100%, 80%))
		drop-shadow(0px -1.5px 0px hsl(222, 100%, 80%))
		drop-shadow(-1.5px 0px 0px hsl(222, 100%, 80%))
		drop-shadow(0px 1.5px 0px hsl(222, 100%, 80%));
}
.client-darkmode .qualitygreat, .client-darkmode .qualityrare {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(233,100%,56%))
		drop-shadow(0px -1.5px 0px hsl(233,100%,56%))
		drop-shadow(-1.5px 0px 0px hsl(233,100%,56%))
		drop-shadow(0px 1.5px 0px hsl(233,100%,56%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(233,100%,56%))
		drop-shadow(0px -1.5px 0px hsl(233,100%,56%))
		drop-shadow(-1.5px 0px 0px hsl(233,100%,56%))
		drop-shadow(0px 1.5px 0px hsl(233,100%,56%));
}

/* Add stroke to Excellent and Epic items*/
.qualityexcellent, .qualityepic {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(277, 100%, 82%))
		drop-shadow(0px -1.5px 0px hsl(277, 100%, 82%))
		drop-shadow(-1.5px 0px 0px hsl(277, 100%, 82%))
		drop-shadow(0px 1.5px 0px hsl(277, 100%, 82%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(277, 100%, 82%))
		drop-shadow(0px -1.5px 0px hsl(277, 100%, 82%))
		drop-shadow(-1.5px 0px 0px hsl(277, 100%, 82%))
		drop-shadow(0px 1.5px 0px hsl(277, 100%, 82%));
}
.client-darkmode .qualityexcellent, .client-darkmode .qualityepic {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(260, 80%, 53%))
		drop-shadow(0px -1.5px 0px hsl(260, 80%, 53%))
		drop-shadow(-1.5px 0px 0px hsl(260, 80%, 53%))
		drop-shadow(0px 1.5px 0px hsl(260, 80%, 53%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(260, 80%, 53%))
		drop-shadow(0px -1.5px 0px hsl(260, 80%, 53%))
		drop-shadow(-1.5px 0px 0px hsl(260, 80%, 53%))
		drop-shadow(0px 1.5px 0px hsl(260, 80%, 53%));
}

/* Add stroke to Perfect and Legendary items*/
.qualityperfect, .qualitylegendary {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(35, 97%, 73%))
		drop-shadow(0px -1.5px 0px hsl(35, 97%, 73%))
		drop-shadow(-1.5px 0px 0px hsl(35, 97%, 73%))
		drop-shadow(0px 1.5px 0px hsl(35, 97%, 73%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(35, 97%, 73%))
		drop-shadow(0px -1.5px 0px hsl(35, 97%, 73%))
		drop-shadow(-1.5px 0px 0px hsl(35, 97%, 73%))
		drop-shadow(0px 1.5px 0px hsl(35, 97%, 73%));
}
.client-darkmode .qualityperfect, .client-darkmode .qualitylegendary {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(30, 100%, 19%))
		drop-shadow(0px -1.5px 0px hsl(30, 100%, 19%))
		drop-shadow(-1.5px 0px 0px hsl(30, 100%, 19%))
		drop-shadow(0px 1.5px 0px hsl(30, 100%, 19%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(30, 100%, 19%))
		drop-shadow(0px -1.5px 0px hsl(30, 100%, 19%))
		drop-shadow(-1.5px 0px 0px hsl(30, 100%, 19%))
		drop-shadow(0px 1.5px 0px hsl(30, 100%, 19%));
}

/* Add stroke to Eternal and Ethereal items*/
.qualityeternal, .qualityethereal {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(360, 88%, 62%))
		drop-shadow(0px -1.5px 0px hsl(360, 88%, 62%))
		drop-shadow(-1.5px 0px 0px hsl(360, 88%, 62%))
		drop-shadow(0px 1.5px 0px hsl(360, 88%, 62%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(360, 88%, 62%))
		drop-shadow(0px -1.5px 0px hsl(360, 88%, 62%))
		drop-shadow(-1.5px 0px 0px hsl(360, 88%, 62%))
		drop-shadow(0px 1.5px 0px hsl(360, 88%, 62%));
}
.client-darkmode .qualityeternal, .client-darkmode .qualityethereal {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(360, 90%, 70%))
		drop-shadow(0px -1.5px 0px hsl(360, 90%, 70%))
		drop-shadow(-1.5px 0px 0px hsl(360, 90%, 70%))
		drop-shadow(0px 1.5px 0px hsl(360, 90%, 70%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(360, 90%, 70%))
		drop-shadow(0px -1.5px 0px hsl(360, 90%, 70%))
		drop-shadow(-1.5px 0px 0px hsl(360, 90%, 70%))
		drop-shadow(0px 1.5px 0px hsl(360, 90%, 70%));
}

/* Add stroke to Coins*/
.coins {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(40, 90%, 60%))
		drop-shadow(0px -1.5px 0px hsl(40, 90%, 60%))
		drop-shadow(-1.5px 0px 0px hsl(40, 90%, 60%))
		drop-shadow(0px 1.5px 0px hsl(40, 90%, 60%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(40, 90%, 60%))
		drop-shadow(0px -1.5px 0px hsl(40, 90%, 60%))
		drop-shadow(-1.5px 0px 0px hsl(40, 90%, 60%))
		drop-shadow(0px 1.5px 0px hsl(40, 90%, 60%));
}

.client-darkmode .coins {
	-webkit-filter:
		drop-shadow(1.5px 0px 0px hsl(40, 80%, 20%))
		drop-shadow(0px -1.5px 0px hsl(40, 80%, 20%))
		drop-shadow(-1.5px 0px 0px hsl(40, 80%, 20%))
		drop-shadow(0px 1.5px 0px hsl(40, 80%, 20%));
	filter:
		drop-shadow(1.5px 0px 0px hsl(40, 80%, 20%))
		drop-shadow(0px -1.5px 0px hsl(40, 80%, 20%))
		drop-shadow(-1.5px 0px 0px hsl(40, 80%, 20%))
		drop-shadow(0px 1.5px 0px hsl(40, 80%, 20%));
}

/* Add stroke to fine items*/
.infoboxqualityfine {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px -3px 0px hsl(173, 82%, 85%))
		drop-shadow(-3px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px 3px 0px hsl(173, 82%, 85%));
	filter:
		drop-shadow(3px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px -3px 0px hsl(173, 82%, 85%))
		drop-shadow(-3px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px 3px 0px hsl(173, 82%, 85%));
}
.client-darkmode .infoboxqualityfine {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px -3px 0px hsl(172, 100%, 7%))
		drop-shadow(-3px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px 3px 0px hsl(172, 100%, 7%));
	filter:
		drop-shadow(3px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px -3px 0px hsl(172, 100%, 7%))
		drop-shadow(-3px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px 3px 0px hsl(172, 100%, 7%));
}

.finehover:hover {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px -3px 0px hsl(173, 82%, 85%))
		drop-shadow(-3px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px 3px 0px hsl(173, 82%, 85%)) !important;
	filter:
		drop-shadow(3px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px -3px 0px hsl(173, 82%, 85%))
		drop-shadow(-3px 0px 0px hsl(173, 82%, 85%))
		drop-shadow(0px 3px 0px hsl(173, 82%, 85%)) !important;
}
.client-darkmode .finehover:hover {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px -3px 0px hsl(172, 100%, 7%))
		drop-shadow(-3px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px 3px 0px hsl(172, 100%, 7%)) !important;
	filter:
		drop-shadow(3px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px -3px 0px hsl(172, 100%, 7%))
		drop-shadow(-3px 0px 0px hsl(172, 100%, 7%))
		drop-shadow(0px 3px 0px hsl(172, 100%, 7%)) !important;
}

/* Add stroke to Normal and Common items*/
.infoboxqualitynormal, .infoboxqualitycommon {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(0, 0%, 63%))
		drop-shadow(0px -3px 0px hsl(0, 0%, 63%))
		drop-shadow(-3px 0px 0px hsl(0, 0%, 63%))
		drop-shadow(0px 3px 0px hsl(0, 0%, 63%));
	filter:
		drop-shadow(3px 0px 0px hsl(0, 0%, 63%))
		drop-shadow(0px -3px 0px hsl(0, 0%, 63%))
		drop-shadow(-3px 0px 0px hsl(0, 0%, 63%))
		drop-shadow(0px 3px 0px hsl(0, 0%, 63%));
}
.client-darkmode .infoboxqualitynormal, .client-darkmode .infoboxqualitycommon {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(0, 0%, 36%))
		drop-shadow(0px -3px 0px hsl(0, 0%, 36%))
		drop-shadow(-3px 0px 0px hsl(0, 0%, 36%))
		drop-shadow(0px 3px 0px hsl(0, 0%, 36%));
	filter:
		drop-shadow(3px 0px 0px hsl(0, 0%, 36%))
		drop-shadow(0px -3px 0px hsl(0, 0%, 36%))
		drop-shadow(-3px 0px 0px hsl(0, 0%, 36%))
		drop-shadow(0px 3px 0px hsl(0, 0%, 36%));
}

/* Add stroke to Good and Uncommon items*/
.infoboxqualitygood, .infoboxqualityuncommon {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(102, 94%, 76%))
		drop-shadow(0px -3px 0px hsl(102, 94%, 76%))
		drop-shadow(-3px 0px 0px hsl(102, 94%, 76%))
		drop-shadow(0px 3px 0px hsl(102, 94%, 76%));
	filter:
		drop-shadow(3px 0px 0px hsl(102, 94%, 76%))
		drop-shadow(0px -3px 0px hsl(102, 94%, 76%))
		drop-shadow(-3px 0px 0px hsl(102, 94%, 76%))
		drop-shadow(0px 3px 0px hsl(102, 94%, 76%));
}
.client-darkmode .infoboxqualitygood, .client-darkmode .infoboxqualityuncommon {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(120, 94%, 11%))
		drop-shadow(0px -3px 0px hsl(120, 94%, 11%))
		drop-shadow(-3px 0px 0px hsl(120, 94%, 11%))
		drop-shadow(0px 3px 0px hsl(120, 94%, 11%));
	filter:
		drop-shadow(3px 0px 0px hsl(120, 94%, 11%))
		drop-shadow(0px -3px 0px hsl(120, 94%, 11%))
		drop-shadow(-3px 0px 0px hsl(120, 94%, 11%))
		drop-shadow(0px 3px 0px hsl(120, 94%, 11%));
}

/* Add stroke to Great and Rare items*/
.infoboxqualitygreat, .infoboxqualityrare {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(222, 100%, 80%))
		drop-shadow(0px -3px 0px hsl(222, 100%, 80%))
		drop-shadow(-3px 0px 0px hsl(222, 100%, 80%))
		drop-shadow(0px 3px 0px hsl(222, 100%, 80%));
	filter:
		drop-shadow(3px 0px 0px hsl(222, 100%, 80%))
		drop-shadow(0px -3px 0px hsl(222, 100%, 80%))
		drop-shadow(-3px 0px 0px hsl(222, 100%, 80%))
		drop-shadow(0px 3px 0px hsl(222, 100%, 80%));
}
.client-darkmode .infoboxqualitygreat, .client-darkmode .infoboxqualityrare {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(233,100%,56%))
		drop-shadow(0px -3px 0px hsl(233,100%,56%))
		drop-shadow(-3px 0px 0px hsl(233,100%,56%))
		drop-shadow(0px 3px 0px hsl(233,100%,56%));
	filter:
		drop-shadow(3px 0px 0px hsl(233,100%,56%))
		drop-shadow(0px -3px 0px hsl(233,100%,56%))
		drop-shadow(-3px 0px 0px hsl(233,100%,56%))
		drop-shadow(0px 3px 0px hsl(233,100%,56%));
}

/* Add stroke to Excellent and Epic items*/
.infoboxqualityexcellent, .infoboxqualityepic {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(277, 100%, 82%))
		drop-shadow(0px -3px 0px hsl(277, 100%, 82%))
		drop-shadow(-3px 0px 0px hsl(277, 100%, 82%))
		drop-shadow(0px 3px 0px hsl(277, 100%, 82%));
	filter:
		drop-shadow(3px 0px 0px hsl(277, 100%, 82%))
		drop-shadow(0px -3px 0px hsl(277, 100%, 82%))
		drop-shadow(-3px 0px 0px hsl(277, 100%, 82%))
		drop-shadow(0px 3px 0px hsl(277, 100%, 82%));
}
.client-darkmode .infoboxqualityexcellent, .client-darkmode .infoboxqualityepic {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(260, 80%, 53%))
		drop-shadow(0px -3px 0px hsl(260, 80%, 53%))
		drop-shadow(-3px 0px 0px hsl(260, 80%, 53%))
		drop-shadow(0px 3px 0px hsl(260, 80%, 53%));
	filter:
		drop-shadow(3px 0px 0px hsl(260, 80%, 53%))
		drop-shadow(0px -3px 0px hsl(260, 80%, 53%))
		drop-shadow(-3px 0px 0px hsl(260, 80%, 53%))
		drop-shadow(0px 3px 0px hsl(260, 80%, 53%));
}

/* Add stroke to Perfect and Legendary items*/
.infoboxqualityperfect, .infoboxqualitylegendary {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(35, 97%, 73%))
		drop-shadow(0px -3px 0px hsl(35, 97%, 73%))
		drop-shadow(-3px 0px 0px hsl(35, 97%, 73%))
		drop-shadow(0px 3px 0px hsl(35, 97%, 73%));
	filter:
		drop-shadow(3px 0px 0px hsl(35, 97%, 73%))
		drop-shadow(0px -3px 0px hsl(35, 97%, 73%))
		drop-shadow(-3px 0px 0px hsl(35, 97%, 73%))
		drop-shadow(0px 3px 0px hsl(35, 97%, 73%));
}
.client-darkmode .infoboxqualityperfect, .client-darkmode .infoboxqualitylegendary {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(30, 100%, 19%))
		drop-shadow(0px -3px 0px hsl(30, 100%, 19%))
		drop-shadow(-3px 0px 0px hsl(30, 100%, 19%))
		drop-shadow(0px 3px 0px hsl(30, 100%, 19%));
	filter:
		drop-shadow(3px 0px 0px hsl(30, 100%, 19%))
		drop-shadow(0px -3px 0px hsl(30, 100%, 19%))
		drop-shadow(-3px 0px 0px hsl(30, 100%, 19%))
		drop-shadow(0px 3px 0px hsl(30, 100%, 19%));
}

/* Add stroke to Eternal and Ethereal items*/
.infoboxqualityeternal, .infoboxqualityethereal {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(360, 88%, 62%))
		drop-shadow(0px -3px 0px hsl(360, 88%, 62%))
		drop-shadow(-3px 0px 0px hsl(360, 88%, 62%))
		drop-shadow(0px 3px 0px hsl(360, 88%, 62%));
	filter:
		drop-shadow(3px 0px 0px hsl(360, 88%, 62%))
		drop-shadow(0px -3px 0px hsl(360, 88%, 62%))
		drop-shadow(-3px 0px 0px hsl(360, 88%, 62%))
		drop-shadow(0px 3px 0px hsl(360, 88%, 62%));
}
.client-darkmode .infoboxqualityeternal, .client-darkmode .infoboxqualityethereal {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(360, 90%, 70%))
		drop-shadow(0px -3px 0px hsl(360, 90%, 70%))
		drop-shadow(-3px 0px 0px hsl(360, 90%, 70%))
		drop-shadow(0px 3px 0px hsl(360, 90%, 70%));
	filter:
		drop-shadow(3px 0px 0px hsl(360, 90%, 70%))
		drop-shadow(0px -3px 0px hsl(360, 90%, 70%))
		drop-shadow(-3px 0px 0px hsl(360, 90%, 70%))
		drop-shadow(0px 3px 0px hsl(360, 90%, 70%));
}

/* Add stroke to Coins*/
.coins {
	-webkit-filter:
		drop-shadow(3px 0px 0px hsl(40, 90%, 60%))
		drop-shadow(0px -3px 0px hsl(40, 90%, 60%))
		drop-shadow(-3px 0px 0px hsl(40, 90%, 60%))
		drop-shadow(0px 3px 0px hsl(40, 90%, 60%));
	filter:
		drop-shadow(3px 0px 0px hsl(40, 90%, 60%))
		drop-shadow(0px -3px 0px hsl(40, 90%, 60%))
		drop-shadow(-3px 0px 0px hsl(40, 90%, 60%))
		drop-shadow(0px 3px 0px hsl(40, 90%, 60%));
}

/* === Desktop (>=851px) === */
@media screen and (min-width: 851px) {
  /* Float the whole tabber; let its panels size themselves */
  .tabberresize {
    max-width: 100%;
    width: 310px;
	padding-left: 0.8em;
  }

  /* 3×2 grid of equal-width tabs; width comes from --tab-w (via JS) */
  .tabberresize .tabber__header { display: block; }
  .tabberresize .tabber__tabs {
    display: grid;
    grid-template-columns: repeat(3, var(--tab-w, max-content));
    gap: 5px;
    justify-content: center;      /* center grid if wider than panel */
  }
  
  .tabberresize .tabber__tab {
    display: block;
    text-align: center;
  }

  /* Optional: arrows can add extra width; hide if you don’t use them */
  .tabberresize .tabber__header__prev,
  .tabberresize .tabber__header__next {
    display: none;
  }
}

.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{
	filter: invert( 1 ) hue-rotate( 180deg )
}

.mw-tpt-pagelist-item div {
	float: right;
}
Retrieved from "https://wiki.walkscape.app/index.php?title=MediaWiki:Timeless.css&oldid=26730"