MediaWiki:Custom-Common.less

// /* -- * This is the root LESS file that is parsed to produce MediaWiki:Common.css * * Eventually, this will be completely converted to native LESS * and will be a series of imports of easy to navigate LESS files * * All CSS found/imported here should ideally be moved to a subpage of this page * unless it's a user subpage * Converted subpages can be found at Special:PrefixIndex/MediaWiki:Custom-Common.less/ * * To update MediaWiki:Common.css from here, Oasis users can click the "Update CSS" button * found below the edit button. For monobook users, the link is in the toolbox in the sidebar. * * For more information, see  * -- * LESS standard library:  * Non-standard mixins:   * Online LESS tester:    * * Available themedesigner values: * - @theme-body   -> body background colour (#90c2dd) * - @theme-buttons -> button colour (#438ab5) * - @theme-header -> collapsible footer bar colour (#90c2dd) * - @theme-links  -> link colour (#438ab5) * - @theme-page   -> article content background (#ffffff) * -- */

/** * Set default colour palette, mainly for monobook usage * * @todo Remove all colour from this file and apply in monobook and oasis separately */ @default-page: #fff;

/*       LESS */

@dir: 'MediaWiki:Custom-Common.less';

// include fonts first @import '@{dir}/fonts.less';

// page specific styling @import '@{dir}/activediscussions.less'; // ... @import '@{dir}/mainpage.less';         // ... @import '@{dir}/specials.less';         // ... @import '@{dir}/yewgrove.less';

// templates @import '@{dir}/actionbar.less';        // ... @import '@{dir}/clear.less';            // ... @import '@{dir}/coins.less';            // ... @import '@{dir}/documentation.less';    // ... @import '@{dir}/equipment.less';        // ... @import '@{dir}/external.less'; @import '@{dir}/extimage.less';         // ... @import '@{dir}/fairycode.less'; @import '@{dir}/infobox.less';          // ... @import '@{dir}/infoboxbonuses.less';   // ... @import '@{dir}/inventory.less';        // ... @import '@{dir}/messagebox.less';       // ... @import '@{dir}/navbox.less';           // ... @import '@{dir}/perk-link.less'; @import '@{dir}/perk-suggestions.less'; @import '@{dir}/pohroom.less'; @import '@{dir}/portals.less'; @import '@{dir}/questdetails.less'; @import '@{dir}/questreq.less';         // implement thing we talked about in a forum a while back (requires js) @import '@{dir}/quotes.less'; @import '@{dir}/tabber.less'; @import '@{dir}/toc.less';

// custom classes @import '@{dir}/censored.less'; @import '@{dir}/hovereffects.less';     // document usage better @import '@{dir}/transcripts.less';

// script styles @import '@{dir}/gecharts.less';         // review after js is tidied

// modifications @import '@{dir}/hilite.less'; @import '@{dir}/WikiaRail.less';           // idk what to put this under

/* --      CSS to convert -- */ /** * When adding CSS here, try to add it under the relevant 'section' * If it doesn't seem to fit anywhere, just stick at the bottom * * At some point this will be converted to LESS and * all these sections will becomes separate pages which will be much nicer to navigate :) * * Contents: * - Imports * - Page specific styling * - Templates * - Custom classes * - Script CSS * - Local modifications */

/* ===============      IMPORTS =============== */

// Note: These show up as load.php during updating instead of the page title

@rl-url: '/load.php?debug=true&lang=en&mode=articles';

/* calculators (stewbasic), switchinfobox */ @import url( '@{rl-url}&articles=User:Stewbasic/calc.css&only=styles' ); @import url( '@{rl-url}&articles=User:-Matt/SwitchInfobox.css&only=styles' );

/* =================      TEMPLATES ================= */

/*       Template:Statbox */ .statbox { width: 197px; height: 280px; cursor: default; font-family: runescape; font-size: 16px; color: #ff8c00; text-shadow: #000 1px 1px 0; background-color: #000; background-image: url( "http://images.wikia.com/runescape/images/9/9a/Statstable_bg.png" ); background-repeat: no-repeat; border-spacing: 0; padding: 7px;

td { position: relative; background-image: url( "http://images.wikia.com/runescape/images/0/09/Statstable_background.png" ); background-repeat: no-repeat; vertical-align: middle; text-align: right; width: 62px; height: 25px; padding: 0 10px 0 4px; border-spacing: 0;

img { float: left; margin-bottom: -3px; margin-top: -1px;

// fix for thieving and smithing icons &[height^="1"] { margin-top: 4px; }       }

.xpbox { display: none; z-index: 3; position: absolute; text-align: left; background-color: #0d0d0d; border: 1px solid #ebece6; color: #f5b241; text-shadow: none; padding: 2px 1px 0 1px; font-family: runescape; min-width: 119px; line-height: 15px; margin-left: 7px;

span { float: right; }       }

&:hover .xpbox { display: inline-block; }

&[colspan="3"] { background: none; text-align: left; padding: 20px 0 0 90px; color: #fff; }   } }

/* --      Template:Recolours -- */

@empty-size: 9px;

// border conflicts for cells when this is used inside the infobox .recolour-table { .infobox & { margin: auto; }

.rec-empty-row, .rec-empty-cell { padding: 0; border: none; }

.rec-empty-row { height: @empty-size; }

.rec-empty-cell { width: @empty-size; }

.rec-cell { border: 2px ridge #8c8264; padding: 0; height: 15px; width: 15px; } }

/* ---       Template:Redirect Template:Other uses --- */ .seealso { margin: 0.5em 2em 1em 2em; font-style: italic;

& + & {       margin-top: -1em; } }

/*       Template:License */ .license { background: #cfd8eb; border: none;

th { padding-right: 0.4em; background-color: #617ebc; color: #fff; width: 25%;

&[colspan="2"] { font-size: 16px; }   }

a { color: #556d97; } }

/* --      Template:Level up table -- */ .level-up-table { td li { padding: 0 10px 0 10px; }

ul { list-style-type: disc; }

.lvlupmem { background: #f6ab58; color: #582e00; }

.lvlupfree { background: #98e553; color: #245200; } }

/* --     Infobox monster -- */ .infobox-monster { text-align:center; }

.infobox-monster th, .infobox-monster td { vertical-align:middle !important; }

.infobox-monster .offensive-header { background-color: #861c10; color: #fff; font-variant: small-caps; }

.infobox-monster .offensive-subheader { background-color: #ecccc6; font-variant: small-caps; }

.infobox-monster .offensive-subheader a { color: #861c10 !important; }

.infobox-monster .defensive-header { background-color: #438ab5; color: #fff; font-variant: small-caps; }

.infobox-monster .defensive-subheader { background-color: #c1deed; font-variant: small-caps; }

.infobox-monster .defensive-subheader a { color: #32637c !important; }

.infobox-monster .slayer-header { background: #464646; color: #fff; font-variant: small-caps; }

.infobox .nestedinfo td table { min-width: 263px; margin: -1px; width: ~"calc(100% + 2px)" !important; }

.infobox .nestedinfo td { width:100%; padding:0; }

/* --     Template:Perk link possibly move in-line styles here -- */ .navbox .perk-link img { padding: 2.5px 0 0 0 !important; border-spacing: 2px !important; }

/* ======================      CUSTOM CLASSES ====================== */

/*       tooltips */ .sic { color:#15F; font-style:italic; cursor:help; border-bottom:dotted 1px black; }

/* ---      nowraplinks --- */ .nowraplinks a { white-space: nowrap; }

/* -      boldlinks - */ .boldlinks a { font-weight: bold; } /* -      alignment - */ .center, .centre { display: block; text-align: center; }

.center table, table.center, .centre table, table.centre { margin: 0 auto; }

.right table, span.right { float: right; }

.left table, span.left { float: left; }

/*       targethilite */ /** * @example example * highlights when the url contains #caek. */ .targethilite:target { background-color: #def; }

// @todo move to Wikia.css .skin-oasis .targethilite:target { background-color: #cda172; }

/* -      small - */ // class alternative to deprecated small tag .small { font-size: smaller; }

/*       hideRefBacklinks */ /* hiding backlinks for reflists, when there's loads of references to it. Mainly intended for Diango/Reclaimables. */ .hideRefBacklinks .references a { display: none; }

/* ---      non-mobile-hide --- */ /* hides stuff for non-mobile viewers, not to be confused with mobile-hide found in MediaWiki:Handheld.css */ .non-mobile-hide { display: none; }

/* ---      sg-red sg-yellow sg-green --- */ // for skill calculators and interactive skill guides // includes modified link colour for accessibility // applies to a variety of templates used by a variety of scripts */ .sg-red, .nocell { background: #ecccc6; color: #861c10; }

.sg-yellow, .maybecell { background: #f3f0b0; color: #6e5d45; }

.sg-green, .yescell { background: #c3ebc5; color: #506553; }

.sg-red, .sg-yellow, .sg-green, .nocell, .maybecell, .yescell { a { color: #04f; } }

/* ---      smalllistmargin --- */ ul.smalllistmargin, .smalllistmargin ul, ol.smalllistmargin, .smalllistmargin ol { margin-left: 1.5em; }

/* ==================      SCRIPT CSS ================== */

/* ---      MediaWiki:Common.js/spreport.js --- */   border: 1px solid #808080; padding: 10px; text-align: center; }
 * 1) spreport {

/* dismiss link on sitenotice */ .rcsitenotice-dismiss { float: right; font-weight: normal; }

/* -   lighttable (MediaWiki:Common.js/highlightTable.js) - */ /* mouse over */ tr.highlight-over { background-color: #bce3a8 !important;

a { color: #4c7839 !important; }

}

/* light on (light off = no class) */ tr.highlight-on { background-color: #c8f0b3 !important;

a { color: #4c7839 !important; }

}

/* ---      MediaWiki:Common.js/calc.js --- */ /* Hides configuration sections for dynamic templates (e.g. calculators). */ .jcConfig { display: none; }

/* ===========================      LOCAL MODIFICATIONS =========================== */

/* --      Standard table styling -- */

// .wikitable is defined in core scss as table.wikitable // Which forces us to use table.class in pretty much every table that uses .wikitable // yay....

// single pixel border between adjacent wikitables table.wikitable + table.wikitable { margin-top: -1px; }

/*       File background transparency */ table.filehistory img { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAHUlEQVQY02M8ygABVlCaiQEN0EeA8T+UcWxg3QEABnoC420ysE0AAAAASUVORK5CYII=') repeat !important; } table.filehistory button img, background: none; }
 * 1) file img,
 * 1) file button img {

/*       Category bar */   background: url( "http://images2.wikia.nocookie.net/runescape/images/6/67/Category_sword.png" ) transparent no-repeat 99.7% 65% !important; }
 * 1) catlinks {

/*       Default link colours */ table.wikitable a, table.messagebox a, table.navbox a, div.forumheader a, image a { color: #002bb8; }

table.wikitable a:visited, table.messagebox a:visited, table.navbox a:visited, div.forumheader a:visited, image a:visited { color: #5a3696; }

table.wikitable a:active, table.messagebox a:active, table.navbox a:active, div.forumheader a:active, image a:active { color: #faa700; }

table.wikitable a.new, table.messagebox a.new, table.navbox a.new, div.forumheader a.new, image a.new { color: #ba0000; }

table.wikitable a.new:visited, table.messagebox a.new:visited, table.navbox a.new:visited, div.forumheader a.new:visited, image a.new:visited { color: #a55858; } /*       fixes for light-coloured backgrounds */ .diff-context, .diff-addedline, color: #000 !important; }
 * 1) anontalktext {

/*       pre and code */ code { background-color: #f7f7f7 !important; border: 1px solid #ddd !important; border-radius: 2px !important; padding: 1px 4px !important; }

pre { background-color: #f7f7f7 !important; border: 1px solid #ddd !important; border-radius: 2px !important; white-space: pre-wrap; }

/* -      bold line margins - */ /* @example ;foo */ /* @todo move to MediaWiki:Wikia.css */ .WikiaArticle dl { margin: 0; } /* --      Remove buttons from editor -- */ /* Main */ .ns-0 .cke_button_signature, .ns-0 #edittools_name, .ns-0 #mw-editbutton-signature,

/* User */ .ns-2 #ImageUploadUpload,

/* User talk */ .ns-3 #ImageUploadUpload,

/* MediaWiki */ .ns-8 #edittools_name, .ns-8 #mw-editbutton-signature,

/* Category */ .ns-14 .cke_button_signature, .ns-14 #edittools_name, .ns-14 #mw-editbutton-signature,

/* Update */ .ns-100 .cke_button_signature, .ns-100 #edittools_name, .ns-100 #mw-editbutton-signature,

/* Forum */ .ns-110 #ImageUploadUpload,

/* Exchange */ .ns-112 .cke_button_signature, .ns-112 #edittools_name, .ns-112 #mw-editbutton-signature,

/* Charm */ .ns-114 .cke_button_signature, .ns-114 #edittools_name, .ns-114 #mw-editbutton-signature,

/* Beta */ .ns-120 .cke_button_signature, .ns-120 #edittools_name, .ns-120 #mw-editbutton-signature { display: none !important; }

/* -      page title parenthesis styling override using 'no-parenthesis-styling' class somewhere on the page - */ .title-parenthesis { color:#898989; font-size:80% }

/* -      stuff to document - */

/* Remove section title bar when editing charm logs */ .ns-0 #charmguide + div + form .mw-summary, .ns-0 #charmguide + div + form .module_content { display: none; } /* Letting headers inherit colors */ h2 { color: inherit; }

/* @todo check if these still apply following thumbnail updates */ /*      reapply/remove if so? */ .thumbcaption { word-wrap: break-word; padding: 0; }

.article-thumb { padding: 2px; }

/* Fix bullet points on Recommended Pages */ table.recommendedtasks { ul { margin: 0; padding: 0; }

li { list-style-type: none; margin: 0; } }

/* something for indents used in discussions to mimic threaded replies */ dd { min-width: 250px; }

/* Small reference list */ ol.references { font-size: 100%; } .references-small { font-size: 90%; }

/* Hide certain text (namely quote parameters) from the references section to shorten it and make it readable */ .WikiaArticle .hideQuotes .refhide { display:none; }

/* fix q tags in content area */ content: open-quote; }
 * 1) mw-content-text q:before {

content: close-quote; }
 * 1) mw-content-text q:after {

/* global notifications */ display: none !important; } /* Overrides default colour for image borders * "File:Example.png|border" */ img.thumbborder { border: 1px solid #000 !important; }
 * 1) WikiaNotifications li div[data-type="5"] {

/* Lightbox changes */ .LightboxHeader .avatar { display: none !important; }

.image-no-lightbox { line-height: initial !important; }

/* 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: #dfdfdf; padding: .2em; } }

/* Reduce font size for "Redirected from ..." */ .WikiaPageHeader h2 { color: #898989; font-size: 15px !important; }

/* active/inactive colors for Module:Rotations */ .status-active { background-color: #98e553; color: #245200;

a { color: inherit !important; } }

.status-inactive { background-color: #ececec; color: #777777;

a { color: inherit !important; } }

/*    Provide instructions on how to purge if a page is loaded blank (a failed build by the server) will only show when javascript is disabled; if javascript is enabled, the Common.js script provides a link instead mainspace only; if the first child of #mw-content-text is a tag, the page is blank no way to test if a page is legitimately blank, but we shouldn't have those in mainspace anyway .ns-0 #mw-content-text > noscript:first-child::before { font-size: 120%; color: darkred; font-weight: bold; white-space: pre-wrap; content: "Oops! It looks like this page failed to build. Since you have javascript disabled, you'll need to purge by adding \"?action=purge\" to the URL:\A\A" url(https://dl.dropboxusercontent.com/u/45182859/purging.png); }

/* adjacent clickpics */ .clickpic a.image { margin-left: 2px !important; margin-right: 2px !important; line-height: 34px; vertical-align: middle; }

/* */ .TH_Gem-common img, .TH_Gem-fairly-common img, .TH_Gem-rare img, .TH_Gem-uncommon img, .TH_Gem-very-rare img, .TH_Gem-none img { image-rendering: pixelated; } /* */ .gifgallery img { background: #d9e7f0; border: 1px solid #438ab5; } /* give red links cute little box */ .gifgallery a[rel='nofollow'] { display: block; max-height: 187px; padding: 25px; background: #d9e7f0; border: 1px solid #438ab5; }

.gifgallery a[rel='nofollow']:after { display: block; color: #999; content: '(File does not exist)'; }

/* margins for captions */ .gifgallery div { margin: 10px auto 30px; }

.gifgallery .lightbox-caption { display: block; margin: 8px 0 5px; }

/* dropsline rarity */ .rarity-always { background: #8fd7fa; color: #083f66;

a { color: #0b588f !important; } }

.rarity-common { background: #98e553; color: #245200;

a { color: #286801 !important; } }

.rarity-uncommon { background: #f5eb4e; color: #524e00;

a { color: #706b0d !important; } }

.rarity-rare { background:#f6ab58; color:#582e00;

a { color: #804200 !important; } }

.rarity-very-rare { background: #f86c67; color: #520800;

a { color: #7f0d03 !important; } }

.rarity-random { background: #f3bff3; color: #651565;

a { color: #882988 !important; } }

.rarity-varies { background: #f3bff3; color: #651565;

a { color: #882988 !important; } }

.rarity-unknown { background: #fff; color: #000; }

/* Module:Infobox css */ .infobox-wrapper { float: right; display: table; }

.infobox-buttons { text-align: center; max-width: 250px; display: none; margin: 0 auto; padding: 0 0 0.5em 2em;

.button { margin:0 3px; }

}

.infobox-switch-resources { display:none; }

.infobox-bottom-links { float: right; font-size: xx-small; margin-top: -10px; clear: right; }

/* template:na and similar */ .table-na { background: #ececec; color: gray; vertical-align: middle; text-align: center; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* per Forum:Portable infoboxes -- and you */ .ebs-container { display: none !important; } /* since we won't be using portable boxes, most of this is also just invalid */ .insights-module { display: none !important; } /* ponie request */ .infobox-item { max-width:300px; } .infobox-item th { white-space:nowrap; } .infobox-item th, .infobox-item td { vertical-align: middle !important; } .infobox .infobox-cell-hidden { display: none; } /* older switch infoboxes in preview mode #EditPageDialog .loading is specified in wikia core css with relative position */ position: static; } .banner-notifications-wrapper { display: none; } /* infobox bonuses switch buttons */ .switch-infobox .switch-infobox-triggers, .switch-infobox .loading-button { clear: left; }
 * 1) EditPageDialog .switch-infobox.loading {

/* hide border from image galleries */ .gallery-image-wrapper { border: none !important; }

.accent { background-color: transparent !important; }

/* table alignment help */ /* nth td from the left is right-aligned - ths are ignored */ table.align-right-1 td:nth-of-type(1), table.align-right-2 td:nth-of-type(2), table.align-right-3 td:nth-of-type(3), table.align-right-4 td:nth-of-type(4), table.align-right-5 td:nth-of-type(5), table.align-right-6 td:nth-of-type(6), table.align-right-7 td:nth-of-type(7), table.align-right-8 td:nth-of-type(8), table.align-right-9 td:nth-of-type(9), table.align-right-10 td:nth-of-type(10) { text-align: right; }

/* center */ table.align-center-1 td:nth-of-type(1), table.align-center-2 td:nth-of-type(2), table.align-center-3 td:nth-of-type(3), table.align-center-4 td:nth-of-type(4), table.align-center-5 td:nth-of-type(5), table.align-center-6 td:nth-of-type(6), table.align-center-7 td:nth-of-type(7), table.align-center-8 td:nth-of-type(8), table.align-center-9 td:nth-of-type(9), table.align-center-10 td:nth-of-type(10) { text-align: center; }

/* left */ table.align-left-1 td:nth-of-type(1), table.align-left-2 td:nth-of-type(2), table.align-left-3 td:nth-of-type(3), table.align-left-4 td:nth-of-type(4), table.align-left-5 td:nth-of-type(5), table.align-left-6 td:nth-of-type(6), table.align-left-7 td:nth-of-type(7), table.align-left-8 td:nth-of-type(8), table.align-left-9 td:nth-of-type(9), table.align-left-10 td:nth-of-type(10) { text-align: left; }

/* alternating colours (similar to spreadsheets) */ /* rows */ table.alternating-rows tr:nth-child(even) { background: #f2f2f2; } /* columns*/ table.alternating-cols td:nth-child(even) { background: #f2f2f2; }

/* smw display of large things */ .smwprops { width: 80% !important; max-width: 500px; white-space: nowrap; overflow: auto; display: inline-block; }

/* poll changes */ .ajax-poll { border: none !important; margin-top: 0 !important; padding-right: 2em !important; } .pollAnswerVotes, .pollAnswerVotes div { margin-left: none !important; height: 14px !important; } .pollAnswerName input[type=radio] { margin-right: 5px !important; }

/* -       System messages - */ .mw-warning-with-logexcerpt, .noarticletext, .WikiaArticle fieldset { .border-radius( 5px ); background-color: #f9f9f9 !important; border: 1px solid #eee !important; margin-bottom: 0.5em !important; }
 * 1) viewingold-warning,
 * 2) viewingnew-warning,

.WikiaArticle .noarticletext { padding: 10px 20px; }

/* page history */ .WikiaArticle #pagehistory { margin-left: 0;

li { list-style: none; padding: 0 10px;

&.selected { background-color: #f9f9f9; border: none; }

}

}


 * 1) mw-history-compare {

div:first-of-type { margin-top: 15px;

&:before { content: ''; display: inline-block; height: 21px; width: 41px; background: url('http://runescape.wikia.com/wiki/Special:FilePath/History_down_arrow.svg') 100% 0 no-repeat; vertical-align: top; padding-left: 5.75em; }

}

div:last-of-type { margin-bottom: 15px;

&:before { content: ''; display: inline-block; height: 21px; width: 41px; background: url('http://runescape.wikia.com/wiki/Special:FilePath/History_up_arrow.svg') 100% 0 no-repeat; vertical-align: top; padding-left: 6em; }

}

}

.historysubmit.mw-history-compareselectedversions-button { margin-left: 3px; }

/* For showing double spaces in usernames (RS:WIKIAN, etc.) */ .prewrap p { white-space: pre-wrap; }

/* style breadcrumb under page title */ .ns-0 .WikiaPageHeader .header-title h2 { margin-top: 8px;

a {

&:not([href*="?redirect=no"]) { color: #3a3a3a; font-size: 13px; background: #f9f9f9; border-radius: 4px; border: 1px solid #d9d9d9; padding: 3px 8px; text-decoration: none; }

&:hover:not([href*="?redirect=no"]) { background: #f3f3f3; }

}

}

/* make watchlist alert in page history stand out */ .updatedmarker { color: #1b8408;

&:before { content: '(';   }

&:after { content: ')';   }

}

/* Table Sorting, duplicated from https://github.com/Wikia/app/blob/dev/resources/jquery/jquery.tablesorter.css but for tablesorter2 */

table.jquery-tablesorter2 th.headerSort { cursor: pointer; text-align: center; } table.jquery-tablesorter2 th.headerSort div { display: inline-block; height: 14px; } table.jquery-tablesorter2 th.headerSort .chevron { border-top-color: #000; display: block; margin: 1px auto; } table.jquery-tablesorter2 th.headerSort .chevron:first-child { border-color: transparent transparent #000; } table.jquery-tablesorter2 th.headerSortUp .chevron { visibility: hidden; } table.jquery-tablesorter2 th.headerSortUp .chevron:first-child { visibility: visible; } table.jquery-tablesorter2 th.headerSortDown .chevron:first-child { visibility: hidden; }