MediaWiki:Timeless.css
From The Walkscape Walkthrough
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.
/* 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(2px 0px 0.5px hsl(173, 82%, 85%))
drop-shadow(0px -2px 0.5px hsl(173, 82%, 85%))
drop-shadow(-2px 0px 0.5px hsl(173, 82%, 85%))
drop-shadow(0px 2px 0.5px hsl(173, 82%, 85%));
filter:
drop-shadow(2px 0px 0.5px hsl(173, 82%, 85%))
drop-shadow(0px -2px 0.5px hsl(173, 82%, 85%))
drop-shadow(-2px 0px 0.5px hsl(173, 82%, 85%))
drop-shadow(0px 2px 0.5px hsl(173, 82%, 85%));
}
.client-darkmode .qualityfine {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(172, 100%, 7%))
drop-shadow(0px -2px 0.5px hsl(172, 100%, 7%))
drop-shadow(-2px 0px 0.5px hsl(172, 100%, 7%))
drop-shadow(0px 2px 0.5px hsl(172, 100%, 7%));
filter:
drop-shadow(2px 0px 0.5px hsl(172, 100%, 7%))
drop-shadow(0px -2px 0.5px hsl(172, 100%, 7%))
drop-shadow(-2px 0px 0.5px hsl(172, 100%, 7%))
drop-shadow(0px 2px 0.5px hsl(172, 100%, 7%));
}
/* Add stroke to Normal and Common items*/
.qualitynormal, .qualitycommon {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(0, 0%, 63%))
drop-shadow(0px -2px 0.5px hsl(0, 0%, 63%))
drop-shadow(-2px 0px 0.5px hsl(0, 0%, 63%))
drop-shadow(0px 2px 0.5px hsl(0, 0%, 63%));
filter:
drop-shadow(2px 0px 0.5px hsl(0, 0%, 63%))
drop-shadow(0px -2px 0.5px hsl(0, 0%, 63%))
drop-shadow(-2px 0px 0.5px hsl(0, 0%, 63%))
drop-shadow(0px 2px 0.5px hsl(0, 0%, 63%));
}
.client-darkmode .qualitynormal, .client-darkmode .qualitycommon {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(0, 0%, 36%))
drop-shadow(0px -2px 0.5px hsl(0, 0%, 36%))
drop-shadow(-2px 0px 0.5px hsl(0, 0%, 36%))
drop-shadow(0px 2px 0.5px hsl(0, 0%, 36%));
filter:
drop-shadow(2px 0px 0.5px hsl(0, 0%, 36%))
drop-shadow(0px -2px 0.5px hsl(0, 0%, 36%))
drop-shadow(-2px 0px 0.5px hsl(0, 0%, 36%))
drop-shadow(0px 2px 0.5px hsl(0, 0%, 36%));
}
/* Add stroke to Good and Uncommon items*/
.qualitygood, .qualityuncommon {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(102, 94%, 76%))
drop-shadow(0px -2px 0.5px hsl(102, 94%, 76%))
drop-shadow(-2px 0px 0.5px hsl(102, 94%, 76%))
drop-shadow(0px 2px 0.5px hsl(102, 94%, 76%));
filter:
drop-shadow(2px 0px 0.5px hsl(102, 94%, 76%))
drop-shadow(0px -2px 0.5px hsl(102, 94%, 76%))
drop-shadow(-2px 0px 0.5px hsl(102, 94%, 76%))
drop-shadow(0px 2px 0.5px hsl(102, 94%, 76%));
}
.client-darkmode .qualitygood, .client-darkmode .qualityuncommon {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(120, 94%, 11%))
drop-shadow(0px -2px 0.5px hsl(120, 94%, 11%))
drop-shadow(-2px 0px 0.5px hsl(120, 94%, 11%))
drop-shadow(0px 2px 0.5px hsl(120, 94%, 11%));
filter:
drop-shadow(2px 0px 0.5px hsl(120, 94%, 11%))
drop-shadow(0px -2px 0.5px hsl(120, 94%, 11%))
drop-shadow(-2px 0px 0.5px hsl(120, 94%, 11%))
drop-shadow(0px 2px 0.5px hsl(120, 94%, 11%));
}
/* Add stroke to Great and Rare items*/
.qualitygreat, .qualityrare {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(222, 100%, 80%))
drop-shadow(0px -2px 0.5px hsl(222, 100%, 80%))
drop-shadow(-2px 0px 0.5px hsl(222, 100%, 80%))
drop-shadow(0px 2px 0.5px hsl(222, 100%, 80%));
filter:
drop-shadow(2px 0px 0.5px hsl(222, 100%, 80%))
drop-shadow(0px -2px 0.5px hsl(222, 100%, 80%))
drop-shadow(-2px 0px 0.5px hsl(222, 100%, 80%))
drop-shadow(0px 2px 0.5px hsl(222, 100%, 80%));
}
.client-darkmode .qualitygreat, .client-darkmode .qualityrare {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(233,100%,56%))
drop-shadow(0px -2px 0.5px hsl(233,100%,56%))
drop-shadow(-2px 0px 0.5px hsl(233,100%,56%))
drop-shadow(0px 2px 0.5px hsl(233,100%,56%));
filter:
drop-shadow(2px 0px 0.5px hsl(233,100%,56%))
drop-shadow(0px -2px 0.5px hsl(233,100%,56%))
drop-shadow(-2px 0px 0.5px hsl(233,100%,56%))
drop-shadow(0px 2px 0.5px hsl(233,100%,56%));
}
/* Add stroke to Excellent and Epic items*/
.qualityexcellent, .qualityepic {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(277, 100%, 82%))
drop-shadow(0px -2px 0.5px hsl(277, 100%, 82%))
drop-shadow(-2px 0px 0.5px hsl(277, 100%, 82%))
drop-shadow(0px 2px 0.5px hsl(277, 100%, 82%));
filter:
drop-shadow(2px 0px 0.5px hsl(277, 100%, 82%))
drop-shadow(0px -2px 0.5px hsl(277, 100%, 82%))
drop-shadow(-2px 0px 0.5px hsl(277, 100%, 82%))
drop-shadow(0px 2px 0.5px hsl(277, 100%, 82%));
}
.client-darkmode .qualityexcellent, .client-darkmode .qualityepic {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(260, 80%, 53%))
drop-shadow(0px -2px 0.5px hsl(260, 80%, 53%))
drop-shadow(-2px 0px 0.5px hsl(260, 80%, 53%))
drop-shadow(0px 2px 0.5px hsl(260, 80%, 53%));
filter:
drop-shadow(2px 0px 0.5px hsl(260, 80%, 53%))
drop-shadow(0px -2px 0.5px hsl(260, 80%, 53%))
drop-shadow(-2px 0px 0.5px hsl(260, 80%, 53%))
drop-shadow(0px 2px 0.5px hsl(260, 80%, 53%));
}
/* Add stroke to Perfect and Legendary items*/
.qualityperfect, .qualitylegendary {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(35, 97%, 73%))
drop-shadow(0px -2px 0.5px hsl(35, 97%, 73%))
drop-shadow(-2px 0px 0.5px hsl(35, 97%, 73%))
drop-shadow(0px 2px 0.5px hsl(35, 97%, 73%));
filter:
drop-shadow(2px 0px 0.5px hsl(35, 97%, 73%))
drop-shadow(0px -2px 0.5px hsl(35, 97%, 73%))
drop-shadow(-2px 0px 0.5px hsl(35, 97%, 73%))
drop-shadow(0px 2px 0.5px hsl(35, 97%, 73%));
}
.client-darkmode .qualityperfect, .client-darkmode .qualitylegendary {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(30, 100%, 19%))
drop-shadow(0px -2px 0.5px hsl(30, 100%, 19%))
drop-shadow(-2px 0px 0.5px hsl(30, 100%, 19%))
drop-shadow(0px 2px 0.5px hsl(30, 100%, 19%));
filter:
drop-shadow(2px 0px 0.5px hsl(30, 100%, 19%))
drop-shadow(0px -2px 0.5px hsl(30, 100%, 19%))
drop-shadow(-2px 0px 0.5px hsl(30, 100%, 19%))
drop-shadow(0px 2px 0.5px hsl(30, 100%, 19%));
}
/* Add stroke to Eternal and Ethereal items*/
.qualityeternal, .qualityethereal {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(360, 88%, 62%))
drop-shadow(0px -2px 0.5px hsl(360, 88%, 62%))
drop-shadow(-2px 0px 0.5px hsl(360, 88%, 62%))
drop-shadow(0px 2px 0.5px hsl(360, 88%, 62%));
filter:
drop-shadow(2px 0px 0.5px hsl(360, 88%, 62%))
drop-shadow(0px -2px 0.5px hsl(360, 88%, 62%))
drop-shadow(-2px 0px 0.5px hsl(360, 88%, 62%))
drop-shadow(0px 2px 0.5px hsl(360, 88%, 62%));
}
.client-darkmode .qualityeternal, .client-darkmode .qualityethereal {
-webkit-filter:
drop-shadow(2px 0px 0.5px hsl(360, 90%, 70%))
drop-shadow(0px -2px 0.5px hsl(360, 90%, 70%))
drop-shadow(-2px 0px 0.5px hsl(360, 90%, 70%))
drop-shadow(0px 2px 0.5px hsl(360, 90%, 70%));
filter:
drop-shadow(2px 0px 0.5px hsl(360, 90%, 70%))
drop-shadow(0px -2px 0.5px hsl(360, 90%, 70%))
drop-shadow(-2px 0px 0.5px hsl(360, 90%, 70%))
drop-shadow(0px 2px 0.5px hsl(360, 90%, 70%));
}
/* Tabber Fix*/
.tabberfix .tabber__tabs {
flex-wrap: wrap;
justify-content: space-evenly;
}
@media screen and (min-width: 851px) {
.tabberresize {
width: 280px;
}
}
@media screen and (max-width: 850px) {
.tabberresize {
width: 100%;
}
}
/* Images should be responsive */
.resizeimg {
max-width: 30%;
height: auto;
}
