MediaWiki:Common.less

From Old School RuneScape Wiki
Jump to: navigation, search
/* ********************************************************
	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;

@ADMIN_BLUE: #332e75;
@BEARCAT_GREEN: #13592e;
@AWB_PURPLE: #933b96;
@JMOD_CROWN: "Jagex_small_logo.png";

@RSW_BLUE: #438AB6;
@OSRSW_BROWN: #605443;

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

//Vector 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}/highlight.less';         //Usergroup highlighting
@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 differencess
@import '@{dir}/elements.less';          //HTML elements
@import '@{dir}/infobox.less';           //Infobox styles
@import '@{dir}/links.less';             //Link colours   
@import '@{dir}/itemcompare.less';       //Item compare css
@import '@{dir}/lighttable.less';        //Highlight tables 
@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';

//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}/undergroundpass.less';   //Underground pass 5x5 grid
@import '@{dir}/maintenance.less';       //[[RuneScape:Maintenance]]
@import '@{dir}/mmg.less';               //[[Money making guides]]
@import '@{dir}/activediscussions.less';  //[[RuneScape:Active discussions]]

//Grand Exchange
@import '@{dir}/gecharts.less';          //Riblets favourite thing to review
@import '@{dir}/gemw.less';              //Riblets second favourite thing to review

/* ==================================================================
                      END    IMPORTS! :)
   ================================================================= */

// page content
body {
    background: url('filepath://Old_School_RuneScape_Wiki_background.jpg') #c0a886 no-repeat;
    background-size: 1500px 375px;
    background-position: top left
}

#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;
    }
}

/* ******************
        headers
   ****************** */
   
/* heading underline */
h1, h2, h3, h4, h5, h6 {
	color: @TEXT_COLOR;
    border-color: @SIDEBAR;
    padding-bottom: 0.5em;
}

.mw-body h1,
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
    font-family: 'PT Serif','Palatino','Georgia',serif;
    margin-bottom: .3em;
}

.mw-body h1,
.mw-body-content h1,
.mw-body-content h2 {
	padding: 0 0 .15em;
}

/* change page title's weight */
.mw-body h1 {
    font-weight: 600;
}

/* Clear left on first subheader. Useful to start section after DIIs */
.mw-parser-output h2:first-of-type {
    clear: left;
}

/* space between edit box and mediawiki warnings */
form#editform {
    margin-top: 20px;
}

/* why is the <hr> tag messed up */
hr {
    border-color: @SIDEBAR;
    border-style: solid;
    border-width: 1px 0 0 0;
    height: unset;
}

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

h3 .editsection,
h4 .editsection,
h5 .editsection,
h6 .editsection {
    font-weight:normal !important;
}

pre {
    white-space: pre-wrap;
}

.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;
}

/* Giving headers and TOC a little extra space */
h2,
.toc {
   margin-top: 20px;
}

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

/* --------------------
       pre and code
   -------------------- */
.mw-parser-output {

    pre {
        background-color: @BODY_MID;
        border: 1px solid #afa282;
        line-height: 14px;
        overflow: auto;
        padding: 12px;
        word-wrap: normal;
    }

    code {
        background-color: @BODY_MID;
        border: 1px solid #afa282;
        border-radius: 2px;
        padding: 1px 4px;
    }

}

/* 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: fade( @BODY_DARK, 80% );
	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%;
	}
}

#p-personal a,
#p-personal a.new {
    color: #49301d;
}

.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;
}