MediaWiki:Common.less
Jump to navigation
Jump to search
// <pre>
/* ------------------------------------------------------------------------------------------------------
* 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 Less files. All CSS found here should ideally be moved to a subpage.
* Converted subpages can be found at [[Special:PrefixIndex/MediaWiki:Common.less/]].
*
* To update MediaWiki:Common.css from here, click the "Update CSS" button at the top.
* ------------------------------------------------------------------------------------------------------
* Less documentation: <http://lesscss.org/features/>
* Gadget: <https://meta.weirdgloop.org/w/MediaWiki:Gadget-Less.js>
* Core Less JS: <https://meta.weirdgloop.org/w/MediaWiki:Gadget-Less-core.js>
* Non-standard mixins: <https://meta.weirdgloop.org/w/MediaWiki:Gadget-LessMixins.less>
* Online Less tester: <http://lesstester.com/>
* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------
* TABLE OF CONTENTS
*
* - Imports
* - Important stuff
* - Local modifications
* - Custom classes
* - Templates
* - Page specific styling
* - Script CSS
* - Junk that hasn't been organised yet
------------------------------------------ */
/* =============
IMPORTS
============= */
@dir: 'MediaWiki:Common.less';
// important stuff
@import '@{dir}/colors.less'; // color variables
@import '@{dir}/variables.less'; // theme variables
@import '@{dir}/mixins.less'; // less mixins
@import '@{dir}/fonts.less'; // font definitions
// modifications
@import '@{dir}/links.less'; // link colors, at the top for lower specificity
@import '@{dir}/elements.less'; // HTML elements
@import '@{dir}/highlight.less'; // highlighted usernames
@import '@{dir}/interface.less'; // changes to the MediaWiki interface: system messages, etc
@import '@{dir}/codemirror.less'; // Extension:CodeMirror
@import '@{dir}/diff.less'; // diffs
@import '@{dir}/poll.less'; // <poll>
// custom classes
@import '@{dir}/animations.less'; // CSS animations
@import '@{dir}/hovereffects.less'; // document usage better
@import '@{dir}/nodesktop.less'; // hide elements from appearing on desktop
@import '@{dir}/tiles.less'; //
@import '@{dir}/tooltips.less'; //
@import '@{dir}/transcripts.less'; //
// templates
@import '@{dir}/archivelist.less'; //
@import '@{dir}/clear.less'; //
@import '@{dir}/coins.less'; //
@import '@{dir}/documentation.less'; //
@import '@{dir}/dropsline.less'; //
@import '@{dir}/editnotice.less'; //
@import '@{dir}/extimage.less'; //
@import '@{dir}/fact.less'; //
@import '@{dir}/floornumber.less'; //
@import '@{dir}/listen.less'; //
@import '@{dir}/messagebox.less'; //
@import '@{dir}/quotes.less'; //
@import '@{dir}/references.less'; //
@import '@{dir}/shortcut.less'; //
@import '@{dir}/tabber.less'; //
@import '@{dir}/toc.less'; //
@import '@{dir}/updates.less'; //
@import '@{dir}/usesmateriallist.less'; //
@import '@{dir}/wikitables.less'; //
// page specific styling
@import '@{dir}/discussions.less'; // Maple Grove / Active discussions
@import '@{dir}/mainpage.less'; // Main Page
@import '@{dir}/popular.less'; //Main page popular pages
@import '@{dir}/specials.less'; // Special pages
// script styles
@import '@{dir}/calc.less'; // [[MediaWiki:Common.js/calc.js]]
@import '@{dir}/ooui.less'; // anything that uses OOUI
/* ----------------------
CSS to convert
---------------------- */
/* =================
TEMPLATES
================= */
/* -------------------------------
[[Template:Redirect]]
------------------------------- */
.seealso {
margin: .8em 1.6em; // needs to be 1.6em to match : indent
font-style: italic;
& + & {
margin-top: -0.8em;
}
}
/* ----------------------------------
[[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;
}
}
/* ======================
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;
}
/* -------------
small
------------- */
// class alternative to deprecated small tag
.small {
font-size: smaller;
}
/* -----------------------
non-mobile-hide
----------------------- */
/* hides stuff for non-mobile viewers */
.non-mobile-hide {
display: none;
}
/* ==================
SCRIPT CSS
================== */
/* dismiss link on sitenotice */
.rcsitenotice-dismiss {
float: right;
font-weight: normal;
}
/* ===========================
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
------------------------------------ */
#file img,
table.filehistory img {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVQYV2N4DwX/oYBhgARgDJjEAAkAAEC99wFuu0VFAAAAAElFTkSuQmCC) repeat;
}
table.filehistory button img,
#file button img {
background: none;
}
/* --------------------
Category bar
-------------------- */
.catlinks {
background: @white;
border: 1px solid @mystic;
padding: 8px 15px;
box-shadow: @box-shadow;
}
/* -------------------------
stuff to document
------------------------- */
/* For extimage fix */
div.thumbinner {
border: none;
background: none;
padding: 0;
}
/* @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 q tags in content area */
#mw-content-text q:before {
content: open-quote;
}
#mw-content-text q:after {
content: close-quote;
}
/* template:na and similar */
.table-na {
background: #f3f3f3;
color: #aaa;
vertical-align: middle;
text-align: center;
cursor: default;
.user-select( none );
}
/* smw display of large things */
.smwprops {
width: 80% !important;
max-width: 500px;
white-space: nowrap;
overflow: auto;
display: inline-block;
}
.mw-editsection,
.mw-editsection-like {
font-family: @sans-serif-stack;
}
// for HiDPI screens; otherwise inventory icons appear blurry
.inventory-image {
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, but only safari supports it
}
// not for navboxes, since they're already scaled down
.navbox .inventory-image {
image-rendering: auto;
}