User:Kohila/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 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%);
	}
}

//