User:Kohila/common.less
Jump to navigation
Jump to search
//
/* ------------------------------------------------------------------------------------------------------
* 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: <https://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}/fonts.less'; // needs to be first, due to the Google Fonts @import
@import '@{dir}/variables.less'; // color variables
// modifications
@import '@{dir}/links.less'; // link colors, at the top for lower specificity
@import '@{dir}/elements.less'; // HTML elements
@import '@{dir}/files.less'; // images, gifs, galleries
@import '@{dir}/hilite.less'; // highlighted usernames
@import '@{dir}/interface.less'; // changes to the MediaWiki interface: system messages, etc
@import '@{dir}/editor.less'; // Editor interface styles
@import '@{dir}/codemirror.less'; // Extension:CodeMirror
@import '@{dir}/diffs.less'; // diffs
@import '@{dir}/poll.less'; // <poll>
// custom classes
@import '@{dir}/animations.less'; // CSS animations
@import '@{dir}/censored.less'; //
@import '@{dir}/dooglemaps.less'; // Doogle Maps
@import '@{dir}/hovereffects.less'; // document usage better
@import '@{dir}/nodesktop.less'; // hide elements from appearing on desktop
@import '@{dir}/tile.less'; //
@import '@{dir}/tooltips.less'; //
@import '@{dir}/transcripts.less'; //
// templates
@import '@{dir}/actionbar.less'; //
@import '@{dir}/anchor.less'; // [[Template:Anchor]] [[Template:AnchorText]]
@import '@{dir}/archivelist.less'; //
@import '@{dir}/attackspeedbar.less'; //
@import '@{dir}/chatoptions.less'; //
@import '@{dir}/clear.less'; //
@import '@{dir}/coins.less'; //
@import '@{dir}/disassembly.less'; //
@import '@{dir}/documentation.less'; //
@import '@{dir}/dropsline.less'; //
@import '@{dir}/editnotice.less'; //
@import '@{dir}/equipment.less'; //
@import '@{dir}/extimage.less'; //
@import '@{dir}/fact.less'; //
@import '@{dir}/fairycode.less'; //
@import '@{dir}/floornumber.less'; //
@import '@{dir}/indicators.less'; //
@import '@{dir}/infobox.less'; //
@import '@{dir}/infoboxbonuses.less'; //
@import '@{dir}/infotablebonuses.less'; //
@import '@{dir}/inventory.less'; //
@import '@{dir}/ironmanreqs.less'; // [[Template:Ironmanreqs]]
@import '@{dir}/keypress.less'; //
@import '@{dir}/license.less'; //
@import '@{dir}/listen.less'; //
@import '@{dir}/messagebox.less'; //
@import '@{dir}/menaphite.less'; //
@import '@{dir}/multipleimages.less'; // [[Template:Multipleimages]]
@import '@{dir}/navbox.less'; //
@import '@{dir}/pathmap.less'; //
@import '@{dir}/perk-link.less'; //
@import '@{dir}/perk-suggestions.less'; //
@import '@{dir}/plink.less'; //
@import '@{dir}/pohroom.less'; //
@import '@{dir}/portals.less'; //
@import '@{dir}/questdetails.less'; //
@import '@{dir}/questreq.less'; //
@import '@{dir}/quotes.less'; //
@import '@{dir}/recolours.less'; //
@import '@{dir}/references.less'; //
@import '@{dir}/shortcut.less'; //
@import '@{dir}/speaksin.less'; // [[Template:Speaksin]]
@import '@{dir}/spoiler.less'; // [[Template:Spoiler]
@import '@{dir}/statbox.less'; //
@import '@{dir}/succession.less'; //
@import '@{dir}/tabber.less'; //
@import '@{dir}/thgem.less'; //
@import '@{dir}/titleanchor.less'; // [[Template:TitleAnchor]]
@import '@{dir}/toc.less'; //
@import '@{dir}/towers.less'; //
@import '@{dir}/updatehistory.less'; //
@import '@{dir}/updates.less'; //
@import '@{dir}/usesmateriallist.less'; //
@import '@{dir}/userstats.less'; //
@import '@{dir}/wikitables.less'; //
// page specific styling
@import '@{dir}/activediscussions.less'; // [[RuneScape:Active discussions]]
@import '@{dir}/mainpage.less'; // Main Page
@import '@{dir}/smw.less'; // SMW search/property pages
@import '@{dir}/specials.less'; // Special pages
@import '@{dir}/rsediting.less'; // [[Help:Editing]] and [[Help:Contents]]
@import '@{dir}/rstheme.less'; // [[RuneScape:Theme]]
@import '@{dir}/yewgrove.less'; // [[Forum:Yew Grove]]
@import '@{dir}/calculators.less'; // [[Calculators]]
@import '@{dir}/oswf.less'; // [[RuneScape:One Small Wiki Favour]
// script styles
@import '@{dir}/calc.less'; // [[MediaWiki:Gadget-calc.js]]
@import '@{dir}/charts.less'; // [[MediaWiki:Gadget-Chart.js]]
@import '@{dir}/gemw.less'; // review after js is tidied
// @import '@{dir}/issues.less'; // [[MediaWiki:Common.js/issues.js]]
// @import '@{dir}/timer.less'; // Moved to [[MediaWiki:Gadget-events.css]]
@import '@{dir}/ooui.less'; // anything that uses OOUI
@import '@{dir}/questchecker.less'; // [[MediaWiki:Gadget-questchecker.js]]
/* ----------------------
CSS to convert
---------------------- */
/* =================
TEMPLATES
================= */
/* -------------------------------
[[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;
}
}
/* ----------------------------------
[[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, 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]]
------------------------------------------- */
#spreport {
border: 1px solid #808080;
padding: 10px;
text-align: center;
}
/* dismiss link on sitenotice */
.mw-dismissable-notice-close-parent {
min-height: 1em;
}
.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
------------------------- */
/* Remove section title bar when editing charm logs */
.ns-0 #charmguide + div + form .mw-summary,
.ns-0 #charmguide + div + form .module_content {
display: none;
}
/* fix q tags in content area */
#mw-content-text q:before {
content: open-quote;
}
#mw-content-text q:after {
content: close-quote;
}
/* Proper styling for block cells in family trees */
td {
&.famtreesub {
margin: 0;
padding: 0;
table {
border-spacing: 0;
margin: 0;
padding: 0;
width: 100%;
td {
height: 1em;
width: 1em;
}
}
}
&.famtreeleaf {
background: #dfdfdf;
padding: .2em;
}
}
/* 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;
}
}
/* adjacent clickpics */
.clickpic a.image {
margin-left: 2px !important;
margin-right: 2px !important;
line-height: 34px;
vertical-align: middle;
}
/* {{THGem}} */
.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;
}
.accent {
background-color: transparent !important;
}
/* smw display of large things */
.smwprops {
width: 80% !important;
max-width: 500px;
white-space: nowrap;
overflow: auto;
display: inline-block;
}
/* For showing double spaces in usernames ([[RS:WIKIAN]], etc.) */
.prewrap p {
white-space: pre-wrap;
}
.mw-editsection,
.mw-editsection-like {
font-family: @sans-serif-stack;
}
// for HiDPI screens; otherwise inventory icons appear blurry
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.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;
}
}
.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%;
}
}
/* --------------------
text colors
-------------------- */
.text-color-mixin(@text-color-mixin) {
color: darken( @text-color-mixin, 15% );
}
.text-red {
.text-color-mixin(@flamingo);
}
.text-orange {
.text-color-mixin(@ecstasy);
}
.text-yellow {
.text-color-mixin(@supernova);
}
.text-green {
.text-color-mixin(@lima);
}
.text-blue {
.text-color-mixin(@curious-blue);
}
.text-purple {
.text-color-mixin(@medium-purple);
}
.text-pink {
.text-color-mixin(@lavender);
}
.text-gray, .text-grey {
.text-color-mixin(@gray-chateau);
}
/* --------------------
dark mode transition
-------------------- */
body.wgl-darkmode-transition, .wgl-darkmode-transition * {
transition-property: all;
transition-duration: 1s;
}
/* --------------------
gadget icons positioning
on top bar #p-personal
-------------------- */
#p-personal ul {
display: inline-flex;
flex-flow: row wrap;
justify-content: flex-end;
}
#pt-skin-toggles { order: -4 }
#utcdate { order: -3 }
#pt-rsnews { order: -2 }
#pt-events { order: -1 }
/* --------------------
affiliated discord
-------------------- */
.discord-aff-line {
img {
filter: invert(45%) sepia(4%) saturate(6018%) hue-rotate(192deg) brightness(83%) contrast(107%);
}
}
//