Tip of the Day
Make sure you equip your items to get their effects, most don't work from inventory alone.
MediaWiki:Timeless.css: Difference between revisions
From Walkscape Walkthrough
mNo edit summary Tag: Reverted |
mNo edit summary Tag: Reverted |
||
| Line 28: | Line 28: | ||
border-left: 3px solid darkgray; | border-left: 3px solid darkgray; | ||
border-radius: 1px; | border-radius: 1px; | ||
} | } | ||
| Line 215: | Line 33: | ||
.coins { | .coins { | ||
-webkit-filter: | -webkit-filter: | ||
drop-shadow( | drop-shadow(3px 0px 0px hsl(40, 90%, 60%)) | ||
drop-shadow(0px - | drop-shadow(0px -3px 0px hsl(40, 90%, 60%)) | ||
drop-shadow(- | drop-shadow(-3px 0px 0px hsl(40, 90%, 60%)) | ||
drop-shadow(0px | drop-shadow(0px 3px 0px hsl(40, 90%, 60%)); | ||
filter: | filter: | ||
drop-shadow( | drop-shadow(3px 0px 0px hsl(40, 90%, 60%)) | ||
drop-shadow(0px - | drop-shadow(0px -3px 0px hsl(40, 90%, 60%)) | ||
drop-shadow(- | drop-shadow(-3px 0px 0px hsl(40, 90%, 60%)) | ||
drop-shadow(0px | drop-shadow(0px 3px 0px hsl(40, 90%, 60%)); | ||
} | } | ||
.client-darkmode .coins { | .client-darkmode .coins { | ||
filter: invert( 1 ) hue-rotate( 180deg ) | |||
filter: | |||
} | } | ||
/* Add stroke to | /* Add stroke to Fine items*/ | ||
.infoboxqualityfine { | .infoboxqualityfine { | ||
-webkit-filter: | -webkit-filter: | ||
| Line 253: | Line 61: | ||
} | } | ||
.client-darkmode .infoboxqualityfine { | .client-darkmode .infoboxqualityfine { | ||
filter: invert( 1 ) hue-rotate( 180deg ) | |||
} | } | ||
| Line 278: | Line 77: | ||
} | } | ||
.client-darkmode .finehover:hover { | .client-darkmode .finehover:hover { | ||
filter: invert( 1 ) hue-rotate( 180deg ) | |||
} | } | ||
| Line 304: | Line 94: | ||
} | } | ||
.client-darkmode .infoboxqualitynormal, .client-darkmode .infoboxqualitycommon { | .client-darkmode .infoboxqualitynormal, .client-darkmode .infoboxqualitycommon { | ||
filter: invert( 1 ) hue-rotate( 180deg ) | |||
} | } | ||
| Line 330: | Line 111: | ||
} | } | ||
.client-darkmode .infoboxqualitygood, .client-darkmode .infoboxqualityuncommon { | .client-darkmode .infoboxqualitygood, .client-darkmode .infoboxqualityuncommon { | ||
filter: invert( 1 ) hue-rotate( 180deg ) | |||
} | } | ||
| Line 356: | Line 128: | ||
} | } | ||
.client-darkmode .infoboxqualitygreat, .client-darkmode .infoboxqualityrare { | .client-darkmode .infoboxqualitygreat, .client-darkmode .infoboxqualityrare { | ||
filter: invert( 1 ) hue-rotate( 180deg ) | |||
} | } | ||
| Line 382: | Line 145: | ||
} | } | ||
.client-darkmode .infoboxqualityexcellent, .client-darkmode .infoboxqualityepic { | .client-darkmode .infoboxqualityexcellent, .client-darkmode .infoboxqualityepic { | ||
filter: invert( 1 ) hue-rotate( 180deg ) | |||
} | } | ||
| Line 408: | Line 162: | ||
} | } | ||
.client-darkmode .infoboxqualityperfect, .client-darkmode .infoboxqualitylegendary { | .client-darkmode .infoboxqualityperfect, .client-darkmode .infoboxqualitylegendary { | ||
filter: invert( 1 ) hue-rotate( 180deg ) | |||
} | } | ||
| Line 435: | Line 180: | ||
.client-darkmode .infoboxqualityeternal, .client-darkmode .infoboxqualityethereal { | .client-darkmode .infoboxqualityeternal, .client-darkmode .infoboxqualityethereal { | ||
filter: invert( 1 ) hue-rotate( 180deg ) | filter: invert( 1 ) hue-rotate( 180deg ) | ||
} | } | ||
Revision as of 08:30, 4 February 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 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%));
}
.client-darkmode .coins {
filter: invert( 1 ) hue-rotate( 180deg )
}
/* 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 {
filter: invert( 1 ) hue-rotate( 180deg )
}
.finehover:hover {
-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%)) !important;
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%)) !important;
}
.client-darkmode .finehover:hover {
filter: invert( 1 ) hue-rotate( 180deg )
}
/* 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 {
filter: invert( 1 ) hue-rotate( 180deg )
}
/* 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 {
filter: invert( 1 ) hue-rotate( 180deg )
}
/* 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 {
filter: invert( 1 ) hue-rotate( 180deg )
}
/* 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 {
filter: invert( 1 ) hue-rotate( 180deg )
}
/* 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 {
filter: invert( 1 ) hue-rotate( 180deg )
}
/* 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 {
filter: invert( 1 ) hue-rotate( 180deg )
}
/* Tabber Fix*/
.tabberfix .tabber__tabs {
flex-wrap: wrap;
justify-content: space-evenly;
}
.tabberfix .tabber__tab {
width: 70px;
text-align: center;
}
@media screen and (min-width: 851px) {
.tabberresize {
width: 310px;
}
}
@media screen and (max-width: 850px) {
.tabberresize {
width: 100%;
}
}
.tabbercrafting {
width: 317px;
}
/* Images should be responsive */
.resizeimg {
max-width: 30%;
height: auto;
}
.resizeimg > a:nth-child(1) > img:nth-child(1) {
max-width: 100% !important;
height: auto !important;
}
.roundcorners > a:nth-child(1) > img:nth-child(1) {
border-radius: 15px;
}
.ItemInfobox {
margin-left: 0.8em;
}
.client-darkmode button.btn img{
background-color: rgba(255, 255, 255, 0.7);
display: inline-block;
padding: 5px;
border-radius: 5px;
}
.mw-notification-area {
padding: 5em;
}
/* Make Captcha More Eyecatching */
.simplecaptcha-field {
border: thick dashed #EE4B2B;
border-radius: 15px;
padding: 10px;
font-size: x-large;
background-color: lightgray;
}
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
flex-grow: unset;
}
.mw-highlight, .wikiEditor-ui{
filter: invert( 1 ) hue-rotate( 180deg )
}
