MediaWiki:Custom-common.less

/**
 * The is the root LESS file for [[MediaWiki:Common.css]].
 *
 * To update [[MediaWiki:Common.css]] from this file:
 * - For Oasis users: Click the "Update CSS" button at the top of the page
 * - For Monobook users: Click the "Update CSS" link in your toolbox
 *
 * For more information, see <http://dev.wikia.com/wiki/Less>
 * --------------------------------------------------------------------------------------------------------------------
 * LESS standard library: <http://lesscss.org/functions/>
 * Non-standard mixins:   <http://dev.wikia.com/wiki/Less/mixins>
 *
 * Available themedesigner values:
 * - @theme-body    -> body background colour
 * - @theme-buttons -> button colour
 * - @theme-header  -> collapsible footer bar colour
 * - @theme-links   -> link colour
 * - @theme-page    -> article content background
 */

/* Normal CSS import */
/* @import "/load.php?mode=articles&articles=u:dev:MediaWiki:Highlight.css&only=styles"; */
@import "https://dev.fandom.com/wiki/MediaWiki:Highlight.css?action=raw&ctype=text/css";
@import "https://dev.fandom.com/wiki/MediaWiki:InterlanguageFlags.css?action=raw&ctype=text/css";

/* directory, used in imports */
@dir: 'MediaWiki:Custom-common.less';

/* template styling */
@import '@{dir}/navbox.less';
@import '@{dir}/inventory.less';
@import '@{dir}/minecraft.less';

/* page specific styling */
@import '@{dir}/mainpage.less';

/* Code Editor Styling */
@import '@{dir}/AceEditor.less';
@import "@{dir}/CodeHighlight.less";

/* Old Wikia Menu Button */
@import "@{dir}/WikiaMenuButton.less";

/* Custom Fonts */
@import "@{dir}/fonts.less";

/* Staff Colors (Updated via a script at [[MediaWiki:Gadget-StaffColorsUpdater.js]] */
@import "@{dir}/staff-colors.less";

/* Used by Module:Minimap */
@import "@{dir}/minimap.less";

/* General CSS - only simple css that effects multiple type of article pages should go here */


/***** CSS placed here will be applied to all skins on the entire site. *****/
.mw-headline {  /*  Style all headings (h2, h3, etc) */
    font-family: Copperplate, Copperplate Gothic Light, Impact, Charcoal, sans-serif;
}

.mw-parser-output li:not([class]), 
.WikiaArticle li:not([class]) {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Holiday Guy in userboxes (disabled) */
/* #userProfileApp .user-identity-box__wrapper {
    position: relative;
    background: url(https://static.wikia.nocookie.net/hypixel-skyblock/images/1/1f/Holiday_Guy.png/revision/latest/scale-to-width-down/175?cb=20201210211322) bottom right no-repeat;
} */

#userProfileApp .user-identity-bio {
    margin-right: 10em;
}

/* Fix link icons */
a[href*="/wiki/"].external:after,
a[href*=".fandom.com"].external:after,
a[href*=".wikia.org"].external:after {
    display: none !important;
}

table[align="center"] {
	margin: auto;
}

abbr[title] { text-decoration: underline dotted; }
.oddrow tr:nth-of-type(odd)>td, tr.oddrow td { background:rgba(0,0,0,0.2); } /* Darkens every other row */
/* .center is used by fandom, and makes element used on also have a width of 100% */
.ct, .centertext, .centertxt { 
	text-align:center !important;
}

.code, code.dark {
	background: rgba(0, 0, 0, 0.35) !important;
	padding: 1.5px !important;
	border-radius: 3px !important;
	tab-size: 4 !important;
	font-family: monospace !important;
	white-space: pre !important;
}

.dark-code-box {
    background-color: #002b36;
    border: 1px solid #5e484a;
    line-height: 14px;
    overflow: auto;
    padding: 12px;
    word-wrap: normal;
    color: #93a1a1;
    font-family: monospace;
}

.skin-oasis .cm-mw-doubleUnderscore,
.skin-oasis .cm-mw-signature,
.skin-oasis .cm-mw-hr {
	background: unset !important;
}

wikitable.lowpadding th,
wikitable.lowpadding td {
	padding: 2px;
}
ol.references li:target, sup.reference:target {
	background: unset !important;
	border-color: #fff;
	border-radius: 3px;
}

a.page-title-link:hover {
    text-decoration: underline;
}

.WikiaArticle *:not(.plainlist) > ul:not([class]), 
.WikiaArticle *:not(.plainlist) > ul[class*="mw"],
.WikiaArticle *:not(.plainlist) > ul.plainlinks,
.WikiaArticle ol {
	margin: 0.4em 0px 0.5em 2.5em; 
}
.WikiaArticle ol {
	list-style: decimal; 
}
.WikiaArticle ol.special {
	margin-left: 3.2em; 
}
.WikiaArticle *:not(.plainlist) > ul:not([class]),
.WikiaArticle *:not(.plainlist) > ul[class*="mw"],
.WikiaArticle *:not(.plainlist) > ul.plainlinks{
    list-style: square;
}
.WikiaArticle li {
	line-height: 20px; margin: 3px 0px; 
}
.WikiaArticle dl {
	margin: 1em 0px; 
}

.mw-changeslist table {
    margin: 2px !important;
    margin-left: 0 !important;
}

.navbox .hlist * {
    font-size: 12px !important;
}

.cm-mw-skipformatting {
	background: unset !important;
}

ul.lowmargin {
	margin-left: 1.5em;
}

/* Makes the infobox top navigation wrap onto multiple lines, since badly designed scrolling behavior is crap on desktop */
.portable-infobox .pi-section-navigation {
    justify-content: center;
    flex-wrap: wrap;
}

.oo-ui-buttonElement-button {
	color: var(--theme-article-text-color) !important;
}
.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
	color: var(--theme-alert-color) !important;
}

/* Removing the white-ish background from various elemnts */
.admin-dashboard__module,
.AdminDashboard .admin-dashboard-content .control-section,
.mw_metadata,
.CategorySelect.articlePage {
    background: unset;
}

.WikiaMainContent pre:not([class]),
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle,
.ooui-theme-fandomooui .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle+.mw-rcfilters-ui-table {
	background-color: rgba(0, 0, 0, 0.35);
}
.mw-changeslist-legend {
	background-color: rgba(0, 0, 0, 0.35) !important;
}

.admin-dashboard__module,
.AdminDashboard .admin-dashboard-content .control-section {
    border: 1px solid #9b8d8e;
}

.AdminDashboardTabs .tab.active {
    background: rgba(248, 192, 85, 0.35);
    border-color: rgba(248, 192, 85, 0.8);
}

.AdminDashboardTabs .tab:hover {
    background: rgba(248, 192, 85, 0.5);
    transition-property: background, border;
    transition-delay: 0.3s;
}

/* General hide class to be used as necessary (pair to .mobile-hide) */
.desktop-hide { display: none !important; }

/* Table Highligting */
.wikitable tr:target,
.article-table tr:target {
    border-color:#CC0000;
    border-style:solid;
    background:#770000;
}

.wikitable tr:target td,
.wikitable tr:target th {
    border-color: #CC0000;
    border-style: solid;
}
/* Fix Collapsed table headers */
table.mw-made-collapsible:not(.mw-collapsed) > thead > tr {
    display: table-row !important;
}

/* Article-table CSS */
.article-table th {
    text-align: center;
}
 	
/* Wikitable CSS */
.wikitable th {
	padding: 2.8px 5.6px !important;
    background-color: #261416 !important;
}
 	
/* Heading CSS */
#WikiaMainContent *:not(.toctitle) > h2:not([class]):not(#mw-previewheader) {
    background: #2d1616;
    padding: 4px;
    border-radius: 8px 15px 0 0;
}

.toc ul ul { 
	list-style: none !important;
	margin: 1.2em;
}

.toc ul {
	list-style: none !important;
	margin: 0.6em;
}

/* Adds wikipedia Template:Ambox type style to a table/div */
.messagebox {
    background:lighten(@theme-page, 5%);
    border:1px solid #AAA;
    border-left:10px solid @theme-buttons;
    padding:2px 10px;
    display:block;
    margin:0 10%;
    overflow:auto;
}

/* Enables H2 and H3 headers Tabber */
.tabberlive {
    position:relative;  /*  Needed for {{TabberLinks}} */
    overflow-x:auto; /* Fixes the tabbers overflowing over infoboxes or any other floating stuff */
    .tabbertab { h2, h3 { display:block !important;  } }
}
.wikitable td, .article-table td { overflow: hidden; position:relative; }
.blankCell {
	display: flex;
    cursor:not-allowed;
    background:rgba(150,150,150,0.15);
    text-align:center;
    font-size:65%;
    color: transparent; /* We only want to show what is in ::after, but still want an actual character in the template so the character is selectable */

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.blankCell::after {
	content: "∅";
	flex: 1;
	align-self: center;
	color:rgba(185, 185, 185, 0.55);
}

/* Prevent infobox images being to tall */
.pi-image-thumbnail {
	max-height: 350px;
	max-width: 100%;
	min-width: 160px;
    height: auto;
    width: auto;
}

/* https://en.wikipedia.org/wiki/Template:Plainlist */
.plainlist ul, .pi-europa .pi-data-value .plainlist ul {
    line-height: inherit;
    list-style: none none;
    margin: 0;
}
.plainlist ul li, .pi-europa .pi-data-value .plainlist ul li {
    margin: 0;
    padding: 0;
}

.inset-code {
   background-color: #cacaca;
   padding: 1px 1px;
   border-radius: 3px;
   font-family: monospace;
   color: black;
   border: 1.1px solid #383838;
   display: inline;
   position: relative;
   vertical-align: bottom;
   white-space: pre;
}

.button .large {
    padding: 4px 12px;
    font: bold 100% arial;
    margin: 4px;
}

pre .dark {
   background-color: #002b36;
}

.delete-box {
   border: 2px solid;
   border-color: red;
   border-radius: 3.5px;
   padding: 3px 5px;
   margin: 5px;
   background-color: #7f1d1d;
   text-align: center;
}

hr .tan-line {
   margin:0.1em 2px;
   border: 0.5px solid tan;
}

#re-mirror-sandbox:hover {
    text-decoration: underline;
}

/* {{SkyDateCountdownWidget}} */
.skydate-countdown-active { color:green; }

/*Used by JS calculators*/
.jcConfig { display:none; }

/*
=========================================
Page Specific
========================================
/* Abuse Filter DIFF css */
table.mw-abuselog-details {
    margin: 1em 1em 1em 0 !important;
    background: #2f1616 !important;
}
 	
table.mw-abuselog-details th {
    background: #2e174b !important;
}
 	
.diff-context {
    border-color: #4d5065 !important;
}
 	
.diff-deletedline .diffchange.diffchange-inline {
    background: #a44d4d !important;
}
 	
td.diff-deletedline {
    background: #4d2626 !important;
}
 	
.diff-deletedline {
    border-color: #b02d2d !important;
}
 	
.diffchange {
    background-color: #0f72a7 !important;
}
 	
.diff-addedline {
    border-color: #2a77bd !important;
    background: #24263a !important;
}

/* Block list CSS */
.TablePager_col_ipb_params > ul > li:not(:last-child)::after {
    content: ",";
}
.TablePager_col_ipb_params > ul {
    list-style: none !important;
    margin: 0 !important;
}

.TablePager_col_ipb_reason {
    font-style: italic;
}

.TablePager_col_ipb_reason::before {
    content: "("
}

.TablePager_col_ipb_reason::after {
    content: ")"
}

/* Other */
img.thumbimage {
	margin: 2px 0 !important;
}

.mw-parser-output li,
.WikiaArticle li {
    line-height: 20px;
    font-size: 14px;
}
.pi-image-collection-tabs{ 
    margin: 0.6em;
    list-style: none;
}


#quickdiff-modal {
    background: rgb(54, 26, 29);
    color: inherit;
}

#userProfileApp .user-identity-header__tag {
    text-transform: uppercase;
    font-weight: normal;
    background: #301212;
}

/* Tabbers */
@theme-buttons: #c15926;
@theme-header: #cc9933;

#mw-content-text ul.tabbernav {
  border-color: @theme-header;
  
  li a {
    @mycurbg: @theme-buttons;
    background-color: @mycurbg;
    background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(35%,lighten(@mycurbg, 10%)),color-stop(65%,@mycurbg));
    border: 1px solid #c15926;
    border-radius: 4px 4px 0 0;
    color: #fff !important;
    font-weight: normal;
    
    &:hover {
      @mycurbg: darken(@theme-buttons, 5%);
      background-color: @mycurbg;
      background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(35%,lighten(@mycurbg, 10%)),color-stop(65%,@mycurbg));
      color: #dadada !important;
    }
  }
  li.tabberactive a {
    @mycurbg: lighten(@theme-buttons, 5%);
    font-weight: bold;
    background-color: #b05123;
    background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(35%,lighten(@mycurbg, 10%)),color-stop(65%,@mycurbg));
    color: #eee !important;
    border-color: @theme-header;
    border-width: 1px;
    padding-left: 10px;
    padding-right: 10px;
    
    &:hover {
      @mycurbg: darken(@theme-buttons, 10%);
      font-weight: bold;
      background-color: #b05123;
      background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(35%,lighten(@mycurbg, 10%)),color-stop(65%,@mycurbg));
      color: #dadada !important;
      border-color: darken(@theme-header, 5%);
    }
  }
}
.mw-content-text .tabber .tabbertab {
    border-color: @theme-header;
}

.sbw-ui-tabber [class^="invslot goto-"], .sbw-ui-tabber [class^="invslot animated goto-"],
.sbw-ui-tabber [class^="invslot ui-"], .sbw-ui-tabber [class^="invslot animated ui-"]
{ cursor: pointer; }

/* Username Styling {{StaffRole}} */
   /*  Bureaucrats */
  .user-link-bcrat {
    color: #ff3f43 !important;
    text-shadow: 0 0 4px #ff3f43 !important;
    font-weight: bold;
  }

   /*  Admins */
  .user-link-admin {
    font-weight:bold;
    color: #a431fc !important;
    text-shadow: 0 0 4px #a431fc !important;
  }
  
  /* Code Editors */
   .user-link-codeeditor {
   	 font-weight: bold !important;
     color: #5874f3 !important;
     text-shadow: 0 0 3px #5265ba !important;
   }

   /*  Content moderators */
  .user-link-mod {
    font-weight: bold;
    color: #7FFFD4 !important;
    text-shadow: 0 0 3px #397561 !important;
  }

   /*  Discussion moderators */
  .user-link-dmod {
    font-weight: bold;
    color: #1f9921;
    text-shadow: 0 0 3px #648264;
  }

  /* Rollbackers */
  .user-link-rollback {
    font-weight: bold;
    color: #ff992b !important;
    text-shadow: 0 0 4px #a36726 !important;
  }

   /*  Bots */
  .user-link-bot {
    font-weight: bold;
    color: darkgray !important;
    text-shadow: 0 0 3px gray !important;
  }


/* Rarity/Tier Styling */

.tier-rare {
    text-shadow: 0 0 4px #000;
}


/* Highlight table */
/* Mediawiki:Highlight.js */

.lighttable tr.highlight-over {
    background-color: #e2926b;
    color: white;
}
 
.lighttable tr.highlight-over a {
    color: purple;
}
 
.lighttable tr.highlight-on {
    background-color: #c15926;
    color: white;
}
 
.lighttable tr.highlight-on a {
    color: purple;
}

.highlight-over .tier-rare, highlight-on .tier-rare {
    text-shadow: none;
}


/* Styling for minecraft style tooltip */
/* Taken from minecraft.gamepedia.com */

#minetip-tooltip {
 position:fixed;
 top:0;
 left:0;
 background-color:#100010;
 background-color:rgba(16,0,16,0.94);
 padding:0.375em;
 font-family:Minecraft,serif,sans-serif;
 font-size:16px;
 word-spacing:4px;
 white-space:nowrap;
 line-height:1.25em;
 margin:0.125em 0.25em;
 pointer-events:none;
 z-index:9999
}
#minetip-tooltip::before {
 content:"";
 position:absolute;
 top:0.125em;
 right:-0.125em;
 bottom:0.125em;
 left:-0.125em;
 border:0.125em solid #100010;
 border-style:none solid;
 border-color:rgba(16,0,16,0.94)
}
#minetip-tooltip::after {
 content:"";
 position:absolute;
 top:0.125em;
 right:0;
 bottom:0.125em;
 left:0;
 border:0.125em solid #2D0A63;
 border-image:-webkit-linear-gradient(rgba(80,0,255,0.31),rgba(40,0,127,0.31)) 1;
 border-image:linear-gradient(rgba(80,0,255,0.31),rgba(40,0,127,0.31)) 1
}
#minetip-tooltip > .description,
#minetip-tooltip > .minetip-description {
 display:block;
 margin-top:0.25em
}


/* Element Animator - used in conjunction with JS to cycle through multiple items */
/* Taken from minecraft.gamepedia.com */

#mw-content-text .animated > *:not(.animated-active),
#mw-content-text .animated > .animated-subframe > *:not(.animated-active) {
	display: none
}
#mw-content-text span.animated,
#mw-content-text span.animated.animated-visible > *,
#mw-content-text span.animated.animated-visible > .animated-subframe > * {
	display: inline-block;
}
#mw-content-text div.animated.animated-visible > *,
#mw-content-text div.animated.animated-visible > .animated-subframe > * {
	display: block;
}


/* {{Template:ArmorStats}} */
table.armorstats2x2 {
  margin-right: 0;
}
.armorstats2x2 th {
  min-width: 184px;
}
.armorstats2x2 .as2x2-icon {
  padding: 0 3px;
}
.armorstats2x2 .as2x2-item-stats {
  padding: 0 5px;
}

.armorstats2x2 .as2x2-item-stats ul {
  line-height: inherit;
  list-style: none none;
  margin: 0;
}



/* Infobox tweaks */

.portable-infobox .pi-item[data-item-name="infobox-stats-list"] .pi-data-label {
  flex-basis: 110px;
}
.portable-infobox .pi-item[data-item-name="infobox-stats-list"] .pi-item {
  padding-top: 3px;
  padding-bottom: 3px;
}
.portable-infobox .pi-item[data-item-name="infobox-stats-list"] .pi-item:first-of-type {
  padding-top: 14px;
}
.portable-infobox .pi-item[data-item-name="infobox-stats-list"] .pi-item:last-of-type {
  padding-bottom: 17px;
}

/* Other */
:focus {
    outline: unset;
}

.mwe-math-fallback-image-inline {
	filter: invert(100%) !important;
	margin: 0 !important;
	background-color: unset !important;
}

/* Less modal */
#less-close {
    background: url(//runescape.fandom.com/wiki/Special:FilePath/Close-x-white.svg) @theme-buttons center no-repeat !important;
}

#less-title {
    color: white !important; 
}

#less-modal,
#less-content {
    background: @theme-page !important;
}

#less-content p {
    color: white !important;
}

#less-content a {
    color: #fec356 !important;
}

#less-content a:hover {
    color: #ed9a01 !important;
    transition: color 0.3s !important;
    text-decoration: underline #ed9a01 !important;
}

/* Article Scrollbar Tweaks */
.article-scrollable::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.article-scrollable::-webkit-scrollbar-track {
	background: #50373a; 
}

.article-scrollable::-webkit-scrollbar-thumb {
	background: #897e81; 
}

.article-scrollable::-webkit-scrollbar-thumb:hover {
	background: #6e6568; 
}

/* Article Scrollbar Tweaks (Firefox) */
.article-scrollable {
	scrollbar-width: thin;
	scrollbar-color: #897e81 #50373a;
}

/* Disables text highlighting on browsers */
.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Style normal text like Latex text (<math> tag) */
.math-text {
	font-family: times;
	font-size: 1.2em;
	margin: 0 0.3em;
	color: white;
}

/* Extra styling for userboxes */
.article-userbox {
    width: 240px;
    border: 1px solid #da6565;
}