From Old School RuneScape Wiki
/* ********************************************************
This file is used to update [[MediaWiki:Common.css]].
******************************************************** */
/*General styling*/
/*Imports*/
@dir: 'MediaWiki:Common.less';
// color constants
@BUTTON_BORDER: #0c0a06;
@BUTTON_DARK: #18140c;
@BUTTON_LIGHT: #3a301d;
@BODY_MAIN: #e2dbc8;
@BODY_LIGHT: #d8ccb4;
@BODY_MID: #d0bd97;
@BODY_DARK: #b8a282;
@BODY_BORDER: #94866d;
@SIDEBAR: #cfc08d;
@SEARCH_BOX: #efeee6;
@LINK_COLOR: #936039;
@REDLINK_COLOR: #ba0000;
@TEXT_COLOR: #000;
// colours for /highlight.less
@ADMIN_BLUE: #332e75;
@BEARCAT_GREEN: #13592e;
@AWB_PURPLE: #933b96;
@JMOD_CROWN: "Jagex_small_logo.png";
// Link colours
@RSW_BLUE: #438AB6;
@OSRSW_BROWN: #605443;
// colours for /lighttable.less
@LIGHTTABLE_BG_HOVER: #CCCCCC;
@LIGHTTABLE_BG_ACTIVE: #CCFFCC;
@LIGHTTABLE_COLOR: inherit;
// include fonts first
@import '@{dir}/fonts.less'; //Font definitions and font stack definitions
@import '@{dir}/variables.less'; //Colours
@import '@{dir}/elements.less'; //HTML elements
@import '@{dir}/links.less'; //Link colours
@import '@{dir}/highlight.less'; //Usergroup highlighting
// Vector skin things
@import '@{dir}/vectormenu.less'; //Vectormenu
@import '@{dir}/vectorsearch.less'; //Search bar
@import '@{dir}/vectorsidebar.less'; //Vector Sidebar
@import '@{dir}/vectortabs.less'; //Vector tabs
// Templates
@import '@{dir}/templates.less'; //Various single use templates
@import '@{dir}/coins.less'; //[[Template:Coins]]
@import '@{dir}/documentation.less'; //[[Template:Documentation]]
@import '@{dir}/fairycode.less'; //[[Template:Fairycode]]
@import '@{dir}/floornumber.less'; //[[Template:FloorNumber]]
@import '@{dir}/infotablebonuses.less'; //[[Template:Infotable Bonuses header]]
@import '@{dir}/listen.less'; //[[Template:Listen]]
@import '@{dir}/plink.less'; //[[Template:Plink]]
@import '@{dir}/pohroom.less'; //[[Template:POH Room]]
@import '@{dir}/questdetails.less'; //[[Template:Quest details]]
@import '@{dir}/editnotice.less'; //[[Template:Editnotice]]
@import '@{dir}/messagebox.less'; //Maintenance messagebox templates
@import '@{dir}/navbox.less'; //Bottom navbox styles
@import '@{dir}/poll.less'; //Ajax poll styles
@import '@{dir}/storage.less'; //Storage templates; [[Template:Inventory]], [[Template:Equipment]], and related templates
@import '@{dir}/thumb.less'; //Image thumbnails
@import '@{dir}/transcripts.less'; //Transcript pages
@import '@{dir}/quotes.less'; //Quotes template(s)
//Interface
@import '@{dir}/button.less'; //Infobox & Misc Buttons
@import '@{dir}/catlinks.less'; //Catlinks class
@import '@{dir}/cookies.less'; //Do you accept these cookies?
@import '@{dir}/charts.less'; //ChartJS hide config
@import '@{dir}/diff.less'; //Revision differences
@import '@{dir}/infobox.less'; //Infobox styles
@import '@{dir}/itemcompare.less'; //Item compare css
@import '@{dir}/lighttable.less'; //Highlight tables (incl. underground pass grid)
@import '@{dir}/hatnote.less'; //Hatnotes, such as otheruses
//@import '@{dir}/announcement.less'; //Mainpage annnouncement pill (unused rn)
@import '@{dir}/echo.less'; //Echo icons
@import '@{dir}/notifications.less';
@import '@{dir}/toc.less'; //Table of contents
@import '@{dir}/wikitables.less'; //Tables
@import '@{dir}/skilltraining.less'; //Skilltraining class
@import '@{dir}/tabber.less'; //Tabs
@import '@{dir}/fields.less'; //Text fields
@import '@{dir}/smw.less';
@import '@{dir}/tooltips.less';
@import '@{dir}/editor.less'; //Editor interface
@import '@{dir}/ooui.less';
//Page specific
@import '@{dir}/mainpage.less'; //OSRS Wiki home page
@import '@{dir}/prefs.less'; //Wiki preferences theming
@import '@{dir}/forum.less'; //Watercooler theming
@import '@{dir}/specials.less'; //special pages
@import '@{dir}/recentchanges.less'; //[[Special:Recentchanges]]
@import '@{dir}/sitenotice.less'; //[[MediaWiki:Sitenotice]]
@import '@{dir}/tiles.less'; //Main page tiles
@import '@{dir}/maintenance.less'; //[[RuneScape:Maintenance]]
@import '@{dir}/mmg.less'; //[[Money making guides]]
@import '@{dir}/activediscussions.less'; //[[RuneScape:Active discussions]]
@import '@{dir}/oswf.less'; //[[RS:OSWF]]
//Grand Exchange
@import '@{dir}/gecharts.less'; //Riblets favourite thing to review
@import '@{dir}/gemw.less'; //Riblets second favourite thing to review
/* ==================================================================
END IMPORTS! :)
================================================================= */
#mw-page-base {
background: none;
}
/* border around article content */
.mw-body {
background-color: @BODY_MAIN;
color: @TEXT_COLOR;
border-color: transparent;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
margin-top: 0;
}
/* watch star */
#ca-unwatch.icon a,
#ca-watch.icon a {
padding-top: 2.95em;
}
/* compare colours */
#pagehistory li {
border: 1px solid #cbc19e;
&.selected {
background-color: #f5edd0;
border:none;
}
}
/* space between edit box and mediawiki warnings */
form#editform {
margin-top: 20px;
}
/* hide certain links in sidebar tools */
#t-print,
#t-permalink {
display: none;
}
/* Allowing [[Template:Extimage]] to resize images properly */
.extimage div,
.extimage a,
.extimage img {
width: inherit;
height: inherit;
}
/* Redlink files in dropstables */
.hidenoimage a[href*="Special:Upload"] {
display:none;
}
.title-parenthesis {
color: #898989;
font-size: 80%;
}
/* calculator script config */
.jcConfig {
display: none;
}
/* image background */
#file img,table.filehistory img {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4jWNoaGj4jw8TAgyjBgwLAwgpIGTBqAHDwgAA83w9rjOB4XgAAAAASUVORK5CYII=) repeat;
}
table.filehistory button img,
#file button img {
background: none;
}
/* Mark redirects in Special:Allpages and Special:Watchlist */
.watchlistredir,
.allpagesredirect {
font-style: italic;
}
.allpagesredirect:after {
color: #808080; content: " (redirect)"
}
#filetoc {
text-align: center;
background: @BODY_MID;
border: none;
}
.mw_metadata td, .mw_metadata th {
background: #d7ca9f;
border: 1px solid #c7b67b;
}
.offbox {
background: #d7ca9f;
border: 1px solid #c7b67b;
}
.mw-parser-output .external {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23d7ca9f%22%20stroke%3D%22%2389773a%22%20d%3D%22M1.5%204.518h5.982V10.5H1.5z%22%2F%3E%3Cpath%20d%3D%22M5.765%201H11v5.39L9.427%207.937l-1.31-1.31L5.393%209.35l-2.69-2.688%202.81-2.808L4.2%202.544z%22%20fill%3D%22%2389773a%22%2F%3E%3Cpath%20d%3D%22M9.995%202.004l.022%204.885L8.2%205.07%205.32%207.95%204.09%206.723l2.882-2.88-1.85-1.852z%22%20fill%3D%22%23d7ca9f%22%2F%3E%3C%2Fsvg%3E);
}
.plainlinks .external {
background-image: none;
}
//Source editor background (broken)
.wpTextbox0 .mw-editfont-monospace {
background-color:#4286f4;
}
.wikiEditor-ui-text {
color:#4286f4;
}
/* Image frame fix */
div.tright,
div.tleft {
border: 1px transparent;
}
div.update {
border-radius: 3px;
background: @BODY_MID;
color:black;
margin-top:10px;
margin-bottom:10px;
padding:5px;
text-align:center;
}
//Menu dropdown colour
.menu {
background-color:#C0A886 !important;
border:none !important;
}
/* logo */
#p-logo {
filter: drop-shadow(0 2px 5px rgba(0,0,0,.25));
margin: -1.5em 0 1.5em;
}
/* Galleries */
li.gallerybox div.thumb {
border: 0;
background-color: transparent;
}
.smwfact {
display: none;
}
/* Sidebar bigness */
#mw-panel .portal {
font-size: 1.115em;
}
/* Notification Page toolbar */
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
background:@BODY_MAIN;
}
.list-header {
background-color: transparent;
color: black;
}
// for HiDPI screens; otherwise icons appear blurry
.pixelate() {
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
image-rendering: -moz-crisp-edges; // firefox doesn't support unprefixed
image-rendering: pixelated; // chrome only supports this value
image-rendering: crisp-edges; // this is what should be used; only safari supports it
}
}
// top links
#p-personal {
background: hsl(43, 27%, 78%);
top: 0;
right: 0;
border-radius: 0 0 0 .3em;
height: 30px;
ul {
padding: .15em 1em 0 .4em;
}
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
color: @TEXT_COLOR;
}
.update-redirect {
text-align: center;
background: #fffbf1;
border: 1px solid #909090;
font-weight: 600;
font-size: 2em;
line-height: 1em;
padding: 1em;
color: #000 !important;
&.nuke {
margin-bottom: 25%;
}
}
.SkillClickPicText {
font-size: 1px;
opacity: 0;
position: absolute;
}
//Sticky compare rev
#mw-history-compare > div:first-of-type {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: @BODY_MAIN;
border: 1px solid @BODY_DARK;
padding: .25em 0;
.wgl-stickyheader & {
top: 2.75em;
}
}
.client-js .mw-recentchanges-toplinks:not(.mw-recentchanges-toplinks-collapsed) {
border: 1px solid @BODY_DARK;
}
//Special:Search
.mw-search-profile-tabs {
background-color: @BODY_MID;
border: none;
border-radius: 2px;
}
#mw-searchoptions {
background-color: @BODY_MID;
border:none;
color: black;
}
#mw-searchoptions h4 {
color: black;
}
#mw-searchoptions .divider {
border-bottom: 1px solid @BODY_BORDER;
}
//Ooui Popup
div.oo-ui-popupWidget-popup {
border: 1px solid @BODY_BORDER;
background-color: @BODY_LIGHT;
}
/* -------------------------------
[[Template:Redirect]]
[[Template:Other uses]]
------------------------------- */
.seealso {
margin: .8em 1.6em; // needs to be 1.6em to match : indent
font-style: italic;
& + & {
margin-top: -0.8em;
}
}
//Music player
.rsw-music-player {
height: 2em;
vertical-align: middle;
}
// Prevents undesired background showing when next to expanded toc
.mw-highlight {
background: none;
}
/* -------------------------------
[[Template:Drop sources]]
------------------------------- */
.item-drops .beast-version {
font-size: smaller;
font-style: italic;
}
.oo-ui-windowManager-fullscreen > .oo-ui-window.oo-ui-window-active {
z-index: 600;
}
/* --------------------------------------
fix section heading being hidden
underneath sticky header
-------------------------------------- */
// technique from <https://css-tricks.com/hash-tag-links-padding/>
body.wgl-stickyheader.action-view .mw-headline:target::before {
display: block;
content: '';
margin-top: -3rem;
height: 3rem;
visibility: hidden;
pointer-events: none;
}
/* Proper styling for block cells in family trees */
td {
&.famtreesub {
margin: 0;
padding: 0;
table {
border-spacing: 0;
margin: 0;
padding: 0;
td {
height: 1em;
width: 1em;
}
}
}
&.famtreeleaf {
background: @BODY_LIGHT;
border: 1px solid @BODY_BORDER;
padding: .2em;
}
}
// Stitch this onto the bottom until I can be bothered to make it into correct LESS
.mainpage-trailblazer {
text-align: center;
}
/*.mainpage-trailblazer .tb-main-container {*/
/* position: relative;*/
/* top: -150px;*/
/* margin-bottom: -125px;*/
/*}*/
.mainpage-trailblazer .tb-logo img {
height: auto;
width: 500px;
}
.mainpage-trailblazer .tile-halves {
flex: 1;
align-content: flex-start;
margin-right: 0.9rem;
}
.mainpage-trailblazer .tile-halves:last-child {
margin-right: 0;
}
.mainpage-trailblazer .tb-regions {
display: flex;
background: #0d323b;
color: #ffffff;
padding: 1em;
margin: 0 auto;
border-radius: 1em;
}
.mainpage-trailblazer .tb-regions h2 {
color: #ffffff;
}
//MediaWiki:Editingold
.oldrevision {
color:@flamingo;
background-color:@BODY_LIGHT;
padding:0.3em;
border: 2px solid @flamingo;
text-align: center;
margin-bottom:5px;
}
.mw-editsection {
font-family: inherit;
}